All Components
Components

Components / DateInputs / Calendar

Calendar Overview

The Calendar is a form component that represents a graphical Gregorian calendar.

It supports the selection of and navigation between dates as well as data templates and ranges for scheduling appointments.

The Calendar wrapper for Vue is a client-side wrapper for the Kendo UI Calendar widget.

Basic Usage

The following example demonstrates the Calendar in action.

<div id="vueapp" class="vue-app">
    <kendo-calendar :value="new Date()" selection></kendo-calendar>
</div>
Vue.use(DateinputsInstaller);
new Vue({ el: '#vueapp' })

Features and Functionalities

Date Ranges

The Calendar provides options for displaying date ranges. To define the start date of the range, use the min property. To define the end date of the range, use the max property.

The min date value has to be lower than the max date value.

<kendo-calendar :value="new Date()"
                :min="new Date(2017, 0, 1)"
                :max="new Date(2020, 11, 31)">
</kendo-calendar>

Active View

To define the first view that the Calendar initially renders, use the start option.

The Calendar supports the following predefined view options:

  • month—Shows the days of the month.
  • year—Shows the months of the year.
  • decade—Shows the years of the decade.
  • century—Shows the decades of the century.

You can also define the last view to which the user can navigate. To control the view navigation depth, set the depth option.

Selectable Month Calendars

The Calendar allows the user to select a month.

<kendo-calendar start="year" depth="year"></kendo-calendar>

Templates

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

<kendo-calendar month-content="<div class='custom'><#=data.value#></div>"></kendo-calendar>

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, // Date object corresponding to the current cell
    title: kendo.toString(date, "D"),
    value: date.getDate(),
    dateString: "2011/0/1" // formatted date using yyyy/MM/dd format and month is zero-based
};

Week Number Column

In the Calendar, you can render a column which displays the number of the weeks within the current month view and use the week number template to customize the cells in the Week column.

Rendering Week Numbers

The weekNumber option enables you to display the week number on an annual base to the left side of the month view and as a separate column.

<kendo-calendar :week-number="true"></kendo-calendar>

Customizing Column Cells

To customize the week column cells, use the week number template. By default, the Calendar renders the calculated week of the year.

You can use the following available properties in the data object within the template to make additional calculations:

  • currentDate—Returns the first date of the current week.
  • weekNumber—The calculated week number.

Disabled Dates

The Calendar allows you to disable certain days which are not intended to be selected by the end user—for example, weekends, national holidays, and others.

To disable a date, either:

Setting Arrays

When you set an array, list the days that need to be disabled by using the first letters from their names in English.

<kendo-calendar :disable-dates='["we", "th"]'></kendo-calendar>

Adding Functions

When you add a function, determine its return value as true for the date that is disabled.

<div id="vueapp" class="vue-app">
    <kendo-calendar :disable-dates="disableDates"></kendo-calendar>
</div>
Vue.use(DateinputsInstaller);
new Vue({
    el: '#vueapp',
    methods: {
        disableDates: function (date) {
            var disabled = [1,8,15,22,29];
            if (date && disabled.indexOf(date.getDate()) > -1 ) {
                return true;
            } else {
                return false;
            }
        }
    }
})

Events

The following example demonstrates basic Calendar events. You can subscribe to all Calendar events by the handler name.

<div id="vueapp" class="vue-app">
    <kendo-calendar v-on:navigate="onNavigate"></kendo-calendar>
</div>
Vue.use(DateinputsInstaller);
new Vue({
    el: '#vueapp',
    methods: {
        onNavigate: function (e) {
            var view = e.sender.view();
            console.log(view.name); //name of the current view

            var current = e.sender.current();
            console.log(current); //currently focused date
        }
    }
})
In this article