Telerik UI for Windows 8 HTML

RadScheduler exposes multiple templates for its different views. This article will provide you with description of each template and the data context available to it. Template descriptions are grouped by the views that they are available for.

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.

Common Templates

The only template common for all scheduler views is the eventTemplate. Through the views property you can specify a different event template for the different views. If you want to use a common event template, you can set the eventTemplate property of the RadScheduler control itself. See Code Listing 1 for an example of a scheduler where only the day view has customized event template.

The fields that are available in the template 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.

Code Listing 1: Setting Event Template for Day View Copy imageCopy
var scheduler = new Telerik.UI.RadScheduler(document.querySelector("#schedulerWrapper"), {
    dataSource: data,
    date: new Date(2013, 8, 19),
    views: [
        {
            type: "day",
            // To apply this template to all views, move this setting outside of the views property.
            eventTemplate: ["#=Telerik.Utilities.toString(start, 'hh:mm tt')# - ",
                            "#=Telerik.Utilities.toString(end, 'hh:mm tt')#",
                            "<p style='font-weight: bold'> #=title#</p>"].join("")
        },
        {
            type: "week",
            startTime: new Date(2013, 8, 16, 9),
            eventTemplate: "#=title#"
        },
        {
            type: "month"
        }
    ]
});

Day and Week Templates

Four template properties that are available for day and week views only:

  • allDayEventTemplate: Applies to the all day slot.

    The fields available in the template 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.

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

    The field available in this template is date. It represents the current day.

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

    The field available in this template is date. It represents major tick date.

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

    The field available in this template is date. It represents minor tick date.

Same as the event template, these four templates can be set either separately for day and week views or as a common property in the RadScheduler constructor. In Code Listing 2, you can see a scheduler with all four templates applied to the day view.

Code Listing 2: Setting Templates to Day View Copy imageCopy
var scheduler = new Telerik.UI.RadScheduler(document.querySelector("#schedulerWrapper"), {
    dataSource: data,
    date: new Date(2013, 8, 19),
    views: [
        {
            type: "day",
            // Add "All day:" prefix.
            allDayEventTemplate: "All day: #=title#",
            // 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>"
        },
        {
            type: "week",
            startTime: new Date(2013, 8, 16, 9),
            eventTemplate: "#=title#"
        },
        {
            type: "month"
        }
    ]
});

Month Templates

There is one template specific for month view—dayTemplate. It can be set only through the views property. One field is available for you to use in the template definition—date—which represents the current date.

Code Listings 3 & 4 show a scheduler with dayTemplate defined. It calls a function which creates a new span element, sets a conditional color to it and populates it with a formatted date.

Code Listing 3: Declaring Month Template Copy imageCopy
var scheduler = new Telerik.UI.RadScheduler(document.querySelector("#schedulerWrapper"), {
    dataSource: data,
    date: new Date(2013, 8, 19),
    views: [
        {
            type: "month",
            dayTemplate: getMonthTemplate
        }
    ]
});
Code Listing 4: Template Function Copy imageCopy
function getMonthTemplate(args) {
    var element = document.createElement("span");
    var day = args.date;
    element.style.color = (day.getDay() == 6 || day.getDay() == 0) ? "grey" : "black";
    element.innerText = Telerik.Utilities.toString(day, "dd");
    return element.outerHTML;
}

Agenda Templates

There are two template options for agenda view—eventDateTemplate and eventTimeTemplate. These are the templates used by the agenda view to render the date and time along with details of the scheduler events.

There is a single field that you can use inside the eventDateTemplatedate—which represents the current date.

Inside the eventTimeTemplate definition, you have access to a few fields:

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

  • end : The event end date.

  • isAllDay: A Boolean value indicating whether the event is all day. The value is available only if the isAllDay field is set through the dataSource.

  • resources: The event resources.

  • start: The event start date.

  • title: The event title.

The example in Code Listing 5 defines a scheduler with eventDateTemplate and eventTimeTemplate defined to customize the layout and colors of the event date and time in agenda view.

Code Listing 5: Defining Templates in Agenda View Copy imageCopy
var scheduler = new Telerik.UI.RadScheduler(document.querySelector("#schedulerWrapper"), {
    dataSource: data,
    date: new Date(2013, 8, 19),
    views: [
        {
            type: "agenda",
            eventDateTemplate: ["<h3 style='color:hotpink'>#=Telerik.Utilities.toString(date, 'dddd')#</h3>",
                                "<span style='color:hotpink'>#=Telerik.Utilities.toString(date, 'MMMM dd')#</span>"].join(""),
            eventTimeTemplate: ["<span style='color:purple'>#=isAllDay? 'All day':Telerik.Utilities.toString(start, 'hh:mm tt')#</span>",
                                "<br/><span style='color:purple'>#=isAllDay? '':Telerik.Utilities.toString(end, 'hh:mm tt')#</span>"].join("")
        }
    ]
});