Templates

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

scheduler.templates.event_date

Converts a date object to string with ”%d.%m.%Y” formatting.

Parameters:

  • date - the date which needs to be formatted
scheduler.templates.event_date = function(date){
	return dhx.Date.dateToStr("%d.%m.%Y")(date);
};

scheduler.templates.event_long_date

Converts a date object to string with ”%l, %d %F %Y” formatting.

Parameters:

  • date - the date which needs to be formatted
scheduler.templates.event_long_date = function(date){
	return dhx.Date.dateToStr("%l, %d %F %Y")(date);
};

scheduler.templates.event_time

Converts a date object to string with ”%H:%i” formatting.

Parameters:

  • date - the date which needs to be formatted
scheduler.templates.event_time = function(date){
	return dhx.Date.dateToStr("%H:%i")(date);
};

scheduler.templates.event_color

Specifies event's color.

Parameters:

  • obj - the event object
  • type - the object that specifies items list presentation. See details about the parameter in the related DHTMLX Touch documentation 'API method:type()'
scheduler.templates.event_color = function(obj,type){
	return obj.color?"background-color:"+obj.color:"";
};

scheduler.templates.event_marker

Specifies a marker in the 'list' and 'month' views.

Parameters:

  • obj - the event object
  • type - the object that specifies items list presentation. See details about the parameter in the related DHTMLX Touch documentation 'API method:type()'
scheduler.templates.event_marker = function(obj,type){
   	return "<div class='dhx_event_marker' style='"+scheduler.templates.event_color(obj)+"'></div>";
}

scheduler.templates.event_title

Specifies an event in the 'list' view.

Parameters:

  • obj - the event object
  • type - the object that specifies items list presentation. See details about the parameter in the related DHTMLX Touch documentation 'API method:type()'
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>";
};

scheduler.templates.month_event_title

Specifies an event in the 'month' view.

Parameters:

  • obj - the event object
  • type - the object that specifies items list presentation. See details about the parameter in the related DHTMLX Touch documentation 'API method:type()'
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>";	
}

scheduler.templates.day_event

Specifies an event in the 'day' view.

Parameters:

  • obj - the event object
  • type - the object that specifies items list presentation. See details about the parameter in the related DHTMLX Touch documentation 'API method:type()'
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>";	
}

scheduler.templates.calendar_event

The template for days with events in the 'month' view.

Parameters:

  • date - the date which needs to be formatted
scheduler.templates.calendar_event = function(date){
	return date+"<div class='day_with_events'></div>";
};

scheduler.templates.selected_event

The template for an event in the 'event preview' screen.

Parameters:

  • obj - the event object
  • type - the object that specifies items list presentation. See details about the parameter in the related DHTMLX Touch documentation 'API method:type()'
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;
};