Download Free Demos

Docs

DHXScheduler.Templates

DHXScheduler.Templates

The library allows you to specify different templates. They can be used to change displaying of dates and titles in the scheduler.

Common Logic

To define the desired template, write it as it's stated in this documentation below, just by changing DHXScheduler to the name of your DHXScheduler instance.

var sched = new DHXScheduler();
...
sched.Templates.event_text = "Subject: {text}";

As a result of this, the generated page will contain the following code:

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

common calendar

JavaScript Templates Definitions

The server-side library allows you to set various templates. But when you need to provide really complex logic, it's better to set the template on the client side.

There are several types of templates (depending on the number of input parameters):

The full list of default JavaScript definitions for all the supported templates is given in the corresponding article.

Below you will find the list of templates grouped according to the view they are applied to.

Views-Specific Templates

Below you will find the list of templates according to the related views.

Default Views

Day View

Available templates:

Default Day View

Month View

Available templates:

month view templates

Week View

Available templates:

default week view

Extra Views

Agenda View

Available templates:

agenda time and text in calendar

Note, if the DHXScheduler.Templates.agenda_text template isn't specified, the 'd-m-y' part of the date will be set according to DHXScheduler.Templates.day_date (28 Sep 2011 in the above picture).

Map View

Available templates:

map view templates

Note, if the DHXScheduler.Templates.map_time template isn't specified, the 'd-m-y' part of the date in the google maps popup marker will be set according to DHXScheduler.Templates.day_date (2011-09-03 in the above picture).

Timeline View

Available templates:

Note, if the DHXScheduler.Templates.timeline_date template isn't specified, the date in the header will be set according to DHXScheduler.Templates.week_date.

extra views in timeline view

Cell Mode Personality

Available templates:

cell mode personality

WeekAgenda View

Available templates:

extra week view

Units View

Available templates:

extra units view

Year View

Available templates:

extra year view

Common for All Views

Lightbox

Available templates:

Texmplates Lightbox

Note, if the DHXScheduler.Templates.lightbox_header template isn't specified, the date part of the header will be set according to DHXScheduler.Templates.event_header (04:00 - 04:05 in the picture above).

Tooltips

You have the possibility to create tooltips over events regardless of the type of a view. This could be used to display additional event information without the need of 'opening' the event.

Templates Tooltip

To take the possibility you should:

  • Add the dhtmlxscheduler_tooltip.js file to the Scripts folder.
  • Add the following line to the code to activate extension:
sched.Extensions.Add(SchedulerExtensions.Extension.Tooltip);// 'sched' is an DHXScheduler instance

After performing these 2 steps, tooltips will be displayed with the default settings. To set a custom look, use the DHXScheduler.Templates.tooltip_text template.

Touch Support

Scheduler .Net provides a special extension 'Quick Info' to enable touch support for its applications. You can read more on the topic in the related chapter - 'Touch support in Scheduler .Net'.

The extension supplies 3 templates:

Edit form

API Templates

Available templates:

Complex Templates

To provide complex scenarios (such as conditions, loops, etc.) and use JavaScript code in templates, the library supports ASP.NET-like syntax.

The supported tags are: <%...%> and <%=...%>.

var sched = new DHXScheduler();
...
sched.Templates.event_text = "<% if(ev.start_date.valueOf() < new Date().valueOf()) { %>
                                  Subject: {text}(expired)
                              <% } else { %>
                                  Subject: {text}
                              <% } %>";

Output Formatters

Setting the Date Format

You can use templates to set the desired format for displayed dates.

sched.Templates.day_scale_date = "{date:date(%d.%m.%Y)}";

The available format characters and combinations are given here.

How to Apply a Template

Generally, the format for a date is set as in:

DHXScheduler.Templates.[templateName] = "propertyName:date(someFormat)"

To learn the properties used for a certain template, check the input parameters of the related JavaScript function.

For example, you want to change the format of the date in the sub-header of the Day view:

data format in calendar

Your need to take the following steps:

scheduler.templates.day_scale_date = function(date){
    return scheduler.date.date_to_str(scheduler.config.default_date);
};
  • You see that the function takes a parameter with the name date. So, to set the necessary format, you write:
public virtual ActionResult Index()
{
    var sched = new DHXScheduler(this);
    sched.Templates.day_scale_date = "{date:date(%d.%m.%Y)}";
    ...
    return View(sched);
}

Was this article helpful?

Yes No