Telerik UI for Windows 8 HTML

RadCalendar allows you to specify a template for its cells. This way you can implement special days and display additional content in their cells. Or you can simply style only specific cells. This article describes two main scenarios - how to provide common formatting for given dates; and how to display different content in cells based on their corresponding dates.

Highlight specific dates

If you want to apply identical formatting, or display identical content for certain dates in RadCalendar, you can use the dates property in combination with the month.template one. dates accepts an array of Date objects, which will be passed to the template. month.template allows you to specify a template for each cell in the calendar. In this template you can make comparison between the current date and the dates in the array you have specified. When you find a match, you can output different content for the cell.

The following sample defines three days and when encountered in the template function, their value is returned wrapped in a div element with a custom CSS class assigned:

JavaScript Copy imageCopy
var highlightDates = [
    new Date(2013, 6, 12),
    new Date(2013, 6, 16),
    new Date(2013, 6, 24)

var highlightCalendarCtrl = new Telerik.UI.RadCalendar(document.getElementById("highlightCalendar"), {
    dates: highlightDates,
    value: new Date(2013, 6, 11),
    month: {
        template: "#=Templates.highlightDates(data)#"

And the template function looks like this:

JavaScript Copy imageCopy
highlightDates: function (data) {
    for (var i = 0; i < data.dates.length; i++) {
        if ( - data.dates[i] == 0) {
            return "<div class='template'>" + + "</div>"
    //#return the date string only if there is no match

Now, to apply a background color and to position the template content the same way as other cells are positioned, the following styles are added:

 Copy imageCopy
.template {
        background-color: #faecca;
        height: calc(100% + 6px); /*expand the cell content vertically*/
        width: calc(100% + 6px); /*expand the cell content horizontally*/
        text-align: left;
        display: -ms-flexbox;
        -ms-flex-align: end;
        margin-left: -3px;
        margin-bottom: -3px;
        padding-left: 3px;
        padding-bottom: 3px;

Here is an image of the resulting look:


Custom day templates

When you have a list of dates with different types of events associated with them, you would need a bit more custom logic. Following is an example which implements such scenario.

First, we define an array with the event dates and their description (this could, of course, be retrieved from a remote service or local file).

JavaScript Copy imageCopy
events: [
    { Date: new Date(2013, 6, 10), Event: "Jessie Birthday" },
    { Date: new Date(2013, 6, 7), Event: "Veronica Party" },
    { Date: new Date(2013, 6, 21), Event: "Martin Birthday" }

Now, we can define RadCalendar with a call to a custom template function:

JavaScript Copy imageCopy
var eventsCalendarCtrl = new Telerik.UI.RadCalendar(document.getElementById("eventsCalendar"), {
    value: new Date(2013, 6, 1),
    month: {
        template: "#=Templates.getTemplate(data,"

In the template function we first check for a date match and if such occurs, the type of event is extracted from the event name. Based on the event type, a different image is output in the calendar cell:

JavaScript Copy imageCopy
getTemplate: function (data, events) {
    //for each day, traverse the events and look for equal dates
    for (var i = 0; i < events.length; i++) {
        if ( - events[i].Date == 0) {
            //if dates are equal, check the type of associated event and output the relevant image,
            // along with a title, that will be shown as tooltip when the image is hovered
            if (events[i].Event.indexOf("Birthday") != -1) {
                return "<img width='24px' src='bday.png' title='" + events[i].Event + "'/>";
            else {
                return "<img width='24px' src='cocktail.png' title='" + events[i].Event + "'/>";
    //#return the date string only if there is no match

The result is shown below:


See Also