Map View

The Map view presents a list of upcoming events and Google Maps to show or edit the event's location or to set the location for new events.

Related sample:  Map view

By default, the left list of the view displays events beginning from the current date. To change such behavior, use the map_start, map_end properties.


To use Google Maps, you need to add your own google API key on your page.

To add the Map view to the scheduler, follow these steps:

1. Include Google Maps code file on the page:

<-- use your own Google API key-->
<script src="//[your Google API key]&sensor=false" 

2. Activate the Map view extension:

    map_view: true

3. Add the view's tab to the scheduler's markup:

<div id="scheduler_here" class="dhx_cal_container" ...>
    <div class="dhx_cal_navline">
       <div class="dhx_cal_tab" name="map_tab" style="right:280px;"></div>

4. Set the label for the tab:

//'map_tab' is the name of our div
scheduler.locale.labels.map_tab = "Map";

5. Define an additional section in the lightbox to manage the event location:

    {name:"description", height:50,map_to:"text", type:"textarea", focus:true},
    {name:"location", height:43, map_to:"event_location", type:"textarea"},
    {name:"time", height:72, type:"time", map_to:"auto"}    

6. Set the label for the section:

scheduler.locale.labels.section_location = "Location";

7. Initialize the scheduler:

//'map' is the default name of the Map view
scheduler.init('scheduler_here',new Date(2019,8,1),"map");

Related sample:  Map view

Requirements to data items

To be correctly rendered on the Map view, data items must contain a number of additional properties. The final list of mandatory properties (that data items should have) looks as in:

  • start_date (Date or string) - the date when the event is scheduled to begin. The default format - '%Y-%m-%d %H:%i'.
  • end_date (Date or string) - the date when the event is scheduled to be completed. The default format - '%Y-%m-%d %H:%i'.
  • text (string) - the event's text.
  • location - (string) the location of an event.
  • lat - (number) the latitude of the event's location.
  • lng - (number) the longitude of the event's location.

Make sure that your .php file conforms to your database data.

GUI details

  • Selected events are highlighted. If the selected event occupies several days, all related records are highlighted.
  • To create a new event - double click on an empty cell in the list or on the desired location on the map.
  • To edit or delete an event - double click on the 'details' icon on the left side of the event's description.
  • To overview event - click on the event's marker on the map.

Localization tips

The Map view has 4 labels defined in the locale:

  • scheduler.locale.labels.{mapName}_tab - the name of the map's tab
  • scheduler.locale.labels.section_{sectionName} - the section label in the lightbox
  • scheduler.locale.labels.marker_geo_success - the text in the marker's tooltip in case of successful geolocation response
  • scheduler.locale.labels.marker_geo_fail - the text in the marker's tooltip in case of unsuccessful geolocation response

The 2 first labels are commonly specified, while adding the view tab to the scheduler, but the remaining marker labels should be redefined, only if you localize the application to a language, different from English.

Map-related configuration options

scheduler.config object

  • map_end - sets the date to display events until
  • map_error_position - sets the position that will be displayed on the map, in case the event location can't be identified
  • map_infowindow_max_width - the maximum width of the google maps's popup marker in the map view
  • map_initial_position - sets the initial position of the map
  • map_initial_zoom - sets the initial zoom of google maps in the map view
  • map_resolve_event_location - activates attempts to resolve the event's location, if the database doesn't have the event's coordinates stored
  • map_resolve_user_location - enables/disables prompts, asking the user to share his location for displaying on the map
  • map_start - sets the date to start displaying events from
  • map_type - sets the type of google maps
  • map_zoom_after_resolve - sets the zoom that will be used to show the user's location, if the user agrees to the browser's offer to show it

scheduler.xy object

scheduler.xy.map_date_width - the width of the date column
scheduler.xy.map_description_width - the width of the description column

Customizing markers

Starting from v7.0 you can customize the shape of markers by redefining the createMarker() method of the Map View:

const { AdvancedMarkerElement, 
    PinElement } = await google.maps.importLibrary("marker");
scheduler.ext.mapView.createMarker = function(config){
    const pinViewGlyph = new PinElement({
        glyphColor: "white",
    return new AdvancedMarkerElement({
        content: pinViewGlyph.element,

You can find more information in the Google Maps documentation.

Related guides

Back to top