Download Free Demos

Default JavaScript Definitions

In this article you will find default JavaScript definitions for all the supported templates.

TemplateTypes.Date

Parameters:

  • date - the date which needs formatting

Templates types list

DHXScheduler.Templates.api_date

The format for dates that are set by means of methods. Used to parse incoming dates.

Applicable views: all views

scheduler.templates.api_date = function(date){
    return scheduler.date.str_to_date(scheduler.config.api_date);
};

DHXScheduler.Templates.day_date

The date in the header of the view.

Applicable views: day, units

scheduler.templates.day_date = function(date){
    return scheduler.date.date_to_str(scheduler.config.default_date);
};

DHXScheduler.Templates.day_scale_date

The date in the sub-header of the view.

Applicable views: day

scheduler.templates.day_scale_date = function(date){
    return scheduler.date.date_to_str(scheduler.config.default_date);
};

DHXScheduler.Templates.hour_scale

The items of the Y-Axis.

Applicable views: day, week, units

scheduler.templates.hour_scale = function(date){
    return scheduler.date.date_to_str(scheduler.config.hour_date);
};

DHXScheduler.Templates.month_date

The date in the header of the view.

Applicable views: month

scheduler.templates.month_date = function(date){
    return scheduler.date.date_to_str(scheduler.config.month_date);
};

DHXScheduler.Templates.month_day

The format for the day in a cell.

Applicable views: month, year

scheduler.templates.month_day = function(date){
    return scheduler.date.date_to_str(scheduler.config.month_day);
};

DHXScheduler.Templates.month_scale_date

The name of the day in the week header of the view.

Applicable views: month

scheduler.templates.month_scale_date = function(date){
    return scheduler.date.date_to_str(scheduler.config.week_date);
};

DHXScheduler.Templates.marker_date

The date of the event in the Google Maps popup marker.

Applicable views: map

scheduler.templates.marker_date = function(date){
    return scheduler.date.date_to_str("%Y-%m-%d %H:%i"); 
};

DHXScheduler.Templates.time_picker

The drop-down time selector in the lightbox.

Applicable views: all views

scheduler.templates.time_picker = function(date){
    return scheduler.date.date_to_str(scheduler.config.hour_date);
};

DHXScheduler.Templates.timeline_scale_date

The items of the X-Axis.

Applicable views: timeline

scheduler.templates.timeline_scale_date = function(date){
    return scheduler.date.date_to_str(obj.x_date||scheduler.config.hour_date);
};

DHXScheduler.Templates.timeline_scalex_class

The CSS style for items of the X-Axis.

Applicable views: timeline

scheduler.templates.timeline_scalex_class = function(date){
    return "";
};

DHXScheduler.Templates.timeline_second_scale_date

The items of the second X-Axis.

Applicable views: timeline

scheduler.templates.timeline_second_scale_date = function(date){
    return scheduler.date.date_to_str((obj.second_scale && obj.second_scale.x_date)?obj.second_scale.x_date:scheduler.config.hour_date);
};

DHXScheduler.Templates.timeline_second_scalex_class

The CSS style for items of the second X-Axis.

Applicable views: timeline

scheduler.templates.timeline_second_scalex_class = function(date){
    return "";
};

DHXScheduler.Templates.week_scale_date

The date in the sub-header of the view.

Applicable views: week

scheduler.templates.week_scale_date = function(date){
    return scheduler.date.date_to_str(scheduler.config.day_date);
};

DHXScheduler.Templates.xml_date

A string from an file is converted into a date object in conformity with this template.

Applicable views: all views

scheduler.templates.xml_date = function(date){
    return scheduler.date.str_to_date(scheduler.config.xml_date,scheduler.config.server_utc);
};

DHXScheduler.Templates.xml_format

A date object is converted into a string in conformity with this template. Used to send data back to the server.

Applicable views: all views

scheduler.templates.xml_format = function(date){
    return scheduler.date.date_to_str(scheduler.config.xml_date,scheduler.config.server_utc);
};

DHXScheduler.Templates.year_date

The date in the header of the view.

Applicable views: year

scheduler.templates.year_date = function(date){
    return scheduler.date.date_to_str(scheduler.locale.labels.year_tab + " %Y")(date);
};

DHXScheduler.Templates.year_month

The name of a month in the header of a month block of the view.

Applicable views: year

scheduler.templates.year_month = function(date){
    return scheduler.date.date_to_str("%F");
};

DHXScheduler.Templates.year_scale_date

The name of a day in the sub-header of a month block of the view.

Applicable views: year

scheduler.templates.year_scale_date = function(date){
    return scheduler.date.date_to_str("%D");
};

TemplateTypes.Date: "View More" Link

Parameters:

  • date - the date which needs formatting.
  • count - the number of events in the cell.

Templates types list

DHXScheduler.Templates.month_events_link

specifies the presentation of the 'View more' link in the cell of the Month view

Applicable views: month

scheduler.templates.month_events_link = function(date, count){
    return "View more("+count+" events)";
};

TemplateTypes.Period

Parameters:

  • date1 - the date when an event is scheduled to begin.
  • date2 - the date when an event is scheduled to be completed.

Templates types list

DHXScheduler.Templates.week_date

The date in the header of the view.

Available views: week, weekAgenda

scheduler.templates.week_date = function(date1, date2){
    return scheduler.templates.day_date(date1)+" – "+scheduler.templates.day_date(scheduler.date.add(date2,-1,"day"));
};

DHXScheduler.Templates.timeline_date

The date in the header of the view.

Available views: timeline

scheduler.templates.timeline_date = function(date1, date2){
    if (date1.getDay()==date2.getDay() && date2-date1

TemplateTypes.Event

Parameters:

  • start - the date when an event is scheduled to begin.
  • end - the date when an event is scheduled to be completed.
  • ev - the event object.

Templates types list

DHXScheduler.Templates.agenda_text

The text in the second column of the view.

Applicable views: agenda

scheduler.templates.agenda_text = function(start,end,ev){
     return ev.text;
};

DHXScheduler.Templates.agenda_time

The date in the first column of the view.

Applicable views: agenda

scheduler.templates.agenda_time = function(start,end,ev){
    if (ev._timed)
        return this.day_date(ev.start_date, ev.end_date, ev)+" "+this.event_date(start);
    else
        return scheduler.templates.day_date(start)+" – "+scheduler.templates.day_date(end);
};

DHXScheduler.Templates.event_bar_date

The date of an event. Applied to one-day events.

Applicable views: month

scheduler.templates.event_bar_date = function(start,end,ev){
     return scheduler.templates.event_date(start)+" ";
};

DHXScheduler.Templates.event_bar_text

The text of an event. Applied to one-day events.

Applicable views: month

scheduler.templates.event_bar_text = function(start,end,ev){
      return ev.text;
};

DHXScheduler.Templates.event_class

The CSS style for the event container.

Applicable views: day, month, week, year, units, timeline ('bar' and 'tree' modes)

scheduler.templates.event_class = function(start,end,ev){
    return "";
};

DHXScheduler.Templates.event_header

The header of an event.

Applicable views: day, week, units

scheduler.templates.event_header = function(start,end,ev){
    return scheduler.templates.event_date(start)+" - "+scheduler.templates.event_date(end);
};

DHXScheduler.Templates.event_text

The text of an event.

Available views: day, month, week, units

scheduler.templates.event_text = function(start,end,ev){
    return ev.text;
};

DHXScheduler.Templates.quick_info_content

The content of the pop-up edit form.

Available views: all views

scheduler.templates.quick_info_content = function(start, end, ev){ 
    return ev.details || ev.text
};

DHXScheduler.Templates.quick_info_date

The date of the pop-up edit form.

Available views: all views

scheduler.templates.quick_info_date = function(start, end, ev){
    if (scheduler.is_one_day_event(ev))
        return scheduler.templates.day_date(start, end, ev) + " " +scheduler.templates.event_header(start, end, ev);
    else
        return scheduler.templates.week_date(start, end, ev);
};

DHXScheduler.Templates.quick_info_title

The title of the pop-up edit form.

Available views: all views

scheduler.templates.quick_info_title = function(start, end, ev){ 
       return ev.text.substr(0,50); 
};

DHXScheduler.Templates.lightbox_header

The header of the lightbox.

Available views: all views

scheduler.templates.lightbox_header = function(start,end,ev){
    return scheduler.templates.event_header(ev.start_date,ev.end_date,ev) + scheduler.templates.event_bar_text(ev.start_date,ev.end_date,ev);
};

DHXScheduler.Templates.map_text

The text in the second column of the view.

Available views: map

scheduler.templates.map_text = function(start,end,ev){
    return ev.text;
};

DHXScheduler.Templates.map_time

The date in the first column of the view.

Available views: map

scheduler.templates.map_time = function(start,end,ev){
    if (ev._timed)
        return this.day_date(ev.start_date, ev.end_date, ev) + " " + this.event_date(start);
    else
        return scheduler.templates.day_date(start) + " – " + scheduler.templates.day_date(end);
};

DHXScheduler.Templates.marker_text

The text of the event in the Google Maps popup marker.

Available views: map

scheduler.templates.marker_text = function(start,end,ev){
     return "" + ev.text + "" + (ev.event_location || '') + "" + scheduler.templates.marker_date(start) + " - " + scheduler.templates.marker_date(end) + "";
};

DHXScheduler.Templates.month_date_class

The CSS style for a day cell.

Available views: month

scheduler.templates.month_date_class = function(start,end,ev){
    return "";
};

DHXScheduler.Templates.timeline_tooltip

The tooltip over a day cell containing some scheduled event(s).

Available views: timeline

scheduler.templates.timeline_tooltip = function(start,end,ev){
    return ev.text;
};

DHXScheduler.Templates.tooltip_text

The text of tooltips.

Available views: agenda, day, map, month, week, weekAgenda, units

scheduler.templates.tooltip_text = function(start,end,ev){
    return "Event: "+ev.text+"Start date: "+scheduler.templates.tooltip_date_format(start)+"End date: "+scheduler.templates.tooltip_date_format(end);
};

DHXScheduler.Templates.week_date_class

The CSS style for a day cell.

Available views: week, units

scheduler.templates.week_date_class = function(start,end,ev){
    return "";
};

DHXScheduler.Templates.year_tooltip

The tooltip over a day cell containing some scheduled event(s).

Available views: year

scheduler.templates.year_tooltip = function(start,end,ev){
    return ev.text;
};

TemplateTypes.Timeline

Parameters:

  • section_id - the id of a section.
  • section_label - the text label of a section.
  • section_options
    • the instance of the view (in case of the timeline_scaley_class template)
    • the instance of a section (in case of the timeline_scale_label template).

Templates types list

DHXScheduler.Templates.timeline_scale_label

The items of the Y-Axis.

Applicable views: timeline

scheduler.templates.timeline_scale_label = function(section_id, section_label, section_options){ 
    return section_label;
};

DHXScheduler.Templates.timeline_scaley_class

The CSS style for items of the Y-Axis.

Applicable views: timeline

scheduler.templates.timeline_scaley_class = function(section_id, section_label, section_options){ 
    return "";
};

TemplateTypes.TimelineCell

Parameters:

  • evs - the array of events contained in a section.
  • date - the date when an event is scheduled to begin.
  • section - the instance of a section.

Templates types list

DHXScheduler.Templates.timeline_cell_class

The CSS style for a cell.

Available views: timeline (cell mode)

scheduler.templates.timeline_cell_class = function(evs, date, section){
    return "";
};

DHXScheduler.Templates.timeline_cell_value

The value presenting the number of scheduled events in a cell of the view.

Available views: timeline (cell mode)

scheduler.templates.timeline_cell_value = function(evs, date, section){
    return evs?evs.length:"";
};

Was this article helpful?

Yes No