The view contains Google Map and allows to display events location on it.
Related sample: samples/03_extensions/19_map_view.html
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> <script src="../../codebase/ext/dhtmlxscheduler_map_view.js" type="text/javascript" charset="utf-8"></script>
<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'> <div class="dhx_cal_navline"> ... <div class="dhx_cal_tab" name="map_tab" style="right:280px;"></div>
To edit: click on the 'details' icon at the left of event description (if readonly mode is not enabled).
To create: double click on the empty cell or on the desired location on the map.
To overview: click on the event icon on the map.
scheduler.templates.map_time = function(start,end,event){ return scheduler.templates.day_date(start)+" – "+scheduler.templates.day_date(end); }
scheduler.templates.map_text = function(event){ return event.text; }
Both templates can be redefined to ouput data or text in a custom format.
In order that the app runs correctly, your database must include the columns for the following information:
If you don't have such columns, create them, for example, with names: 'location', 'lat' and 'lng'.
scheduler.xy.map_date_width = 188
scheduler.xy.map_description_width = 400;
scheduler.config.map_resolve_event_location = true;
scheduler.config.map_initial_position = new google.maps.LatLng(lat, lng);
scheduler.config.map_error_position = new google.maps.LatLng(lat, lng);
scheduler.config.map_infowindow_max_width = 300;
scheduler.config.map_type = google.maps.MapTypeId.ROADMAP;
scheduler.config.map_inital_zoom = 1;
scheduler.config.map_resolve_user_location = true;
scheduler.config.map_zoom_after_resolve = 15;
scheduler.templates.marker_date=scheduler.date.date_to_str("%Y-%m-%d %H:%i");
scheduler.templates.marker_text=function(start, end, event){ return "<div><b>"+event.text+"</b><br/><br/>"+event.event_location+"<br/><br/>"+scheduler.templates.marker_date(start)+" - "+scheduler.templates.marker_date(end)+"</div>"; }
Extension adds 4 new labels , which may be added to locale
scheduler.locale.labels.map_tab = "Map"; // name of the map tab scheduler.locale.labels.section_location = "Location"; // name of the location section in lightbox scheduler.locale.labels.marker_geo_success = "It seems you are here."; // message in info window in case of successful geolocation response scheduler.locale.labels.marker_geo_fail = "Sorry, could not get your position using geolocation."; // message in info window in case of unsuccessful geolocation response