The mobile scheduler lets to define 10 templates. They can be used to change dispaying dates and titles in the scheduler. Beware, templates' definitions should go before the code line with scheduler initialization.
Below you can find a list of all available in the mobile version templates and their default definitions.
Available templates:
Related sample: samples/07_mobile/04_templates.html
Converts a date object to string with ”%d.%m.%Y” formatting.
Parameters:
scheduler.templates.event_date = function(date){ return dhx.Date.dateToStr("%d.%m.%Y")(date); };
Converts a date object to string with ”%l, %d %F %Y” formatting.
Parameters:
scheduler.templates.event_long_date = function(date){ return dhx.Date.dateToStr("%l, %d %F %Y")(date); };
Converts a date object to string with ”%H:%i” formatting.
Parameters:
scheduler.templates.event_time = function(date){ return dhx.Date.dateToStr("%H:%i")(date); };
Specifies event's color.
Parameters:
scheduler.templates.event_color = function(obj,type){ return obj.color?"background-color:"+obj.color:""; };
Specifies a marker in the 'list' and 'month' views.
Parameters:
scheduler.templates.event_marker = function(obj,type){ return "<div class='dhx_event_marker' style='"+scheduler.templates.event_color(obj)+"'></div>"; }
Specifies an event in the 'list' view.
Parameters:
scheduler.templates.event_title = function(obj,type){ return "<div class='dhx_day_title'>"+scheduler.templates.event_date(obj.start_date)+"</div><div style='margin:10px'><div class='dhx_event_time'>"+scheduler.templates.event_time(obj.start_date)+"</div>"+scheduler.templates.event_marker(obj,type)+"<div class='dhx_event_text'>"+obj.text+"</div></div>"; };
Specifies an event in the 'month' view.
Parameters:
scheduler.templates.month_event_title = function(obj,type){ return scheduler.templates.event_marker(obj,type)+"<div class='dhx_event_time'>"+scheduler.templates.event_time(obj.start_date)+"</div><div class='dhx_event_text'>"+obj.text+"</div>"; }
Specifies an event in the 'day' view.
Parameters:
scheduler.templates.month_event_title = function(obj,type){ return scheduler.templates.event_marker(obj,type)+"<div class='dhx_event_time'>"+scheduler.templates.event_time(obj.start_date)+"</div><div class='dhx_event_text'>"+obj.text+"</div>"; }
The template for days with events in the 'month' view.
Parameters:
scheduler.templates.calendar_event = function(date){ return date+"<div class='day_with_events'></div>"; };
The template for an event in the 'event preview' screen.
Parameters:
scheduler.templates.selected_event = function(obj,type){ var html = ""; if(!obj.start_date) return html; html += "<div class='selected_event'>"; html += "<div class='event_title'>"+obj.text+"</div>"; if(dhx.Date.datePart(obj.start_date).valueOf()==dhx.Date.datePart(obj.end_date).valueOf()){ var fd = scheduler.templates.event_long_date(obj.start_date); var fts = scheduler.templates.event_time(obj.start_date); var fte = scheduler.templates.event_time(obj.end_date); html += "<div class='event_text'>"+fd+"</div>"; html += "<div class='event_text'>"+scheduler.locale.labels.label_from+" "+fts+" "+scheduler.locale.labels.label_to+" "+fte+"</div>"; } else{ var fds = scheduler.templates.event_long_date(obj.start_date); var fde = scheduler.templates.event_long_date(obj.end_date); var fts = scheduler.templates.event_time(obj.start_date); var fte = scheduler.templates.event_time(obj.end_date); html += "<div class='event_text'>"+scheduler.locale.labels.label_from+" "+fts+" "+fds+"</div>"; html += "<div class='event_text'>"+scheduler.locale.labels.label_to+" "+fte+" "+fde+"</div>"; } if(obj.details&&obj.details!==""){ html += "<div class='event_title'>"+scheduler.locale.labels.label_details+"</div>"; html += "<div class='event_text'>"+obj.details+"</div>"; } html += "</div>"; return html; };