Telerik UI for Windows 8 HTML

RadScheduler exposes a number of template options that will work in all views. This article will provide you with description of each template and the data context available to it.

Note that all templates accept a string template, a function returning a string or a function returning a DOM element as template value. For more information about templates in Telerik controls, see: Templates.

This topic contains the following sections.

Event Templates

RadScheduler exposes two template properties to customize the appearance of events in the grid.

  • eventTemplate: Applies to all events in all views. This template can be overridden if the event is an all-day event and the allDayEventTemplate.

  • allDayEventTemplate: Applies to all-day events in the day and week views.

The basic fields available in these template properties are:

  • description: The event description if assigned through the dataSource.

  • end : The event end date.

  • resources: The event resources.

  • start: The event start date.

  • title: The event title.

See Code Listing 1 for an example of a scheduler where the events and all-day events are customized.

Code Listing 1: Setting Event Templates for All Views Copy imageCopy
var scheduler = new Telerik.UI.RadScheduler(document.querySelector("#schedulerWrapper"), {
    dataSource: data,
    date: new Date(2013, 8, 19),
    views: ["day", "week", "month", "agenda"],
    // Display start, end time and title
    eventTemplate: ["#=Telerik.Utilities.toString(start, 'hh:mm tt')# - ",
                    "#=Telerik.Utilities.toString(end, 'hh:mm tt')#",
                    " #=title#"].join(""),
    // Add "All day:" prefix.
    allDayEventTemplate: "All day: #=title#"
});

The fields above are essential for each event and are always available. You can also add custom fields and use them in templates. In Code Listings 2 and 3 you can see a simple example where each event has an assignedTo field and is visualized with it.

Code Listing 2: Sample Data with a Custom Field Copy imageCopy
var customData = [{
    id: 1,
    title: "Tech Meeting",
    assignedTo: "Nancy Davolio",
    start: new Date("2013/06/06 10:30"),
    end: new Date("2013/06/06 14:30"),
    description: "Tech conference"
}, {
    id: 2,
    title: "Job Interview",
    assignedTo: "Andrew Fuller",
    start: new Date("2013/06/06 10:30"),
    end: new Date("2013/06/06 11:00"),
    description: "Searching for a new hire"
}];
Code Listing 3: Using the Custom Field in Event Template Copy imageCopy
var scheduler = new Telerik.UI.RadScheduler(document.querySelector("#schedulerWrapper"), {
    dataSource: customData,
    date: new Date(2013, 8, 19),
    views: ["day", "week", "month", "agenda"],
    // Display start, end time and title
    eventTemplate: [
        "#=title#",
        " Assigned to: ",
        "#=assignedTo#"].join(""),
    // Add "All day:" prefix.
    allDayEventTemplate: "All day: #=title#; AssignedTo: #=assignedTo#"
});

You can also set a specific event templates for views individually. For examples and explanations on how to do this, refer to the related topics at the end of this article.

Date and Time Header Templates

There are three properties you can use to set templates for the date and time headers in day and week views.

  • dateHeaderTemplate: Applies to the scheduler headers that display the currently visible date.

  • majorTimeHeaderTemplate: Applies to the major ticks rendered in day and week view—these are the main time divisions.

  • minorTimeHeaderTemplate: Applies to the minor ticks rendered in day and week view—these are the smaller time divisions.

The field available in these templates is date. It represents the current item's date.

In Code Listing 4 you can see an example of RadScheduler with customized date and time headers for the day and week views.

Code Listing 4: Setting Date and Time Header Templates Copy imageCopy
var scheduler = new Telerik.UI.RadScheduler(document.querySelector("#schedulerWrapper"), {
    dataSource: data,
    date: new Date(2013, 8, 19),
    // Change color, text and date formatting.
    dateHeaderTemplate: "<div style='color: hotpink'>Schedule for: #=Telerik.Utilities.toString(date, 'dddd, MMMM dd')#</div>",
    //Switch to 24-hour format
    majorTimeHeaderTemplate: "#=Telerik.Utilities.toString(date, 'HH:mm tt')#",
    // Display minor ticks text with a smaller size.
    minorTimeHeaderTemplate: "<span style='font-size: small'>#=Telerik.Utilities.toString(date, 'HH:mm tt')#</span>"
});

See Also