New to Kendo UI for jQuery? Download free 30-day trial

Day Template

The Calendar enables you to customize the rendered day for its Month view.

The following example demonstrates how to create a Calendar by using a custom template.

<div id="calendar"></div>

<script>
    $("#calendar").kendoCalendar({
        month: {
            content: '<div class="custom"><#=data.value#></div>'
        }
    });
</script>

The template wraps the value in a <div> HTML element. The following example demonstrates the structure of the data object that is passed to the template function.

data = {
    date: date, // A date object that corresponds to the current cell.
    title: kendo.toString(date, "D"),
    value: date.getDate(),
    dateString: "2011/0/1" // The formatted date by using the yyyy/MM/dd format and the month is zero-based.
};

See Also

In this article