The Calendar widget allows to the end user to select a date from a graphical calendar. It supports custom templates for "month" view, configurable options for min and max date, start view and the depth of the navigation.

Getting Started

<!-- HTML -->
<div id="calendar"></div>

  $(document).ready(function(){
     $("#calendar").kendoCalendar();
  });

When a Calendar is initialized, it will automatically be displayed near the location of the used HTML element.

Configuring Calendar behaviors

Calendar provides many configuration options that can be easily set during initialization. Among the properties that can be controlled:

• Selected date
• Minimum/Maximum date
• Start view
• Define the navigation depth (last view to which end user can navigate)
• Day template
• Footer template

 $("#calendar").kendoCalendar({
     value: new Date(),
     min: new Date(1950, 0, 1),
     max: new Date(2049, 11, 31)
 });
<p>
  Calendar will not navigate to dates less than min and bigger than max date.
</p>

Define start view and navigation depth

The first rendered view can be defined with "startView" option. Navigation depth can be controlled with "depth" option. Predefined views are:

• "month" - shows the days from the month
• "year" - shows the months of the year
• "decade" - shows the years from the decade
• "century" - shows the decades from the century

 $("#calendar").kendoCalendar({
     startView: "year",
     depth: "year"
 });

Customize day template

Calendar allows to customize content of the rendered day in the "month" view.

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

This templates wraps the "value" in a div HTML element. Here is an example of the object passed to the template function:

 data = {
   date: date, // Date object corresponding to the current cell
   title: kendo.toString(date, "D"),
   value: date.getDate(),
   dateString: toDateString(date) //Date formatted using "MM/dd/yyyy" format
 };