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


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

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

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

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

common calendar

Views-specific templates

Follow the link of a view to see templates supported by it.

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. Below you can find default Javascript definitions for all the supported 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 the displayable dates.

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

The available format characters and combinations you can see here.

How is it used?

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

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

To know properties that a certain template disposes, 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 actions:

  • First of all, you look up the desired template in the Templates chapter.
    You go TemplatesView-specific templatesDay view and find - DHXScheduler.Templates.day_scale_date.
  • Then, you follow the related link of the template and here it is, the default JavaScript definition:

    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, you write:

    public virtual ActionResult Index()
                var sched = new DHXScheduler(this);       
                sched.Templates.day_scale_date = "{date:date(%d.%m.%Y)}";
                return View(sched);

comments powered by Disqus