DHXScheduler.Templates

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 + '';
};

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

• Default views
  • Day view
  • Month view
  • Week view
• Extra views
  • Agenda view
  • Map view
  • Timeline view
  • WeekAgenda view
  • Units view
  • Year view
• Common for all views
  • Lightbox
  • Tooltips
  • Touch support
  • API templates

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.

• Default Javascript definitions

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}
                              <% } %>";

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.

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:

Your actions:

• First of all, you look up the desired template in the Templates chapter.
  You go Templates → View-specific templates → Day 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);
  }