The mobile scheduler lets you define 10 templates. They can be used to change displaying 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 templates and their default definitions.
Available templates:
Related sample: samples/01_basic/04_templates.html
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>"; };
Specifies an event in the 'day' view.
Parameters:
scheduler.templates.day_event = function(obj,type){ return obj.text; }
Specifies an additional css class that will be applied to events in the lists of the 'list' and 'month' views.
Parameters:
//The template doesn't have the default definition. //Below you can find a usage example that illustrates how to highlight the text of the TODAY's events <style> .today .dhx_event_text{ color:red !important; } </style> ... scheduler.templates.event_class = function(obj, type){ return (dhx.Date.datePart(obj.start_date).valueOf()==dhx.Date.datePart(new Date()).valueOf())?"today":"" }
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); };
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>"; }
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 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 the default event properties. Used when a user creates new events.
scheduler.templates.new_event_data= function(){ var hours = (dhx.Date.add(new Date(),1,"hour")).getHours(); var start = dhx.Date.copy(this.coreData.getValue());//coreData refers to the currently selected date start.setHours(hours); var end = dhx.Date.add(start,1,"hour"); return {start_date:start,end_date:end}; };
The template for an event in the 'event preview' screen.
Parameters:
scheduler.templates.selected_event = function(obj){ var html = "", fts="", fte=""; var start = obj.start_date; var end = obj.end_date; if(!start) return html; html += "<div class='selected_event "+scheduler.templates.event_class(obj)+"' style='"+(obj.color?"background-color:"+obj.color+";":"")+(obj.fontColor||obj.textColor?"color:"+(obj.fontColor||obj.textColor):"")+"'>"; html += "<div class='event_title'>"+obj.text+"</div>"; if(dhx.Date.datePart(start).valueOf()==dhx.Date.datePart(end).valueOf()){ var fd = dhx.i18n.dateFormatStr(start); fts = dhx.i18n.timeFormatStr(start); fte = dhx.i18n.timeFormatStr(end); 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 = dhx.i18n.longDateFormatStr(start); var fde = dhx.i18n.longDateFormatStr(end); /*if not "all-day" event*/ if(!(dhx.Date.datePart(start).valueOf()==start.valueOf()&&dhx.Date.datePart(end).valueOf()==end.valueOf())){ fts = dhx.i18n.timeFormatStr(start)+" "; fte = dhx.i18n.timeFormatStr(end)+" "; } 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; };