Calendar

Description

The Calendar widget provides a visual calendar that supports navigation.

Official Kendo UI Calendar documentation

Examples

  • Basic Example
  • Passing additional options
  • Using global options
  • Accessing the widget

This example demonstrates passing a single option to bind against the value of the Calendar widget.

<div data-bind="kendoCalendar: startDate"> </div>
<hr/>
<div data-bind="text: startDate"> </div>
var ViewModel = function() {
    this.startDate = ko.observable(new Date());
};

                            ko.applyBindings(new ViewModel());

This example demonstrates passing additional options in the data-bind attribute with value now being explicitly specified. The setToToday button makes an update to the view model to show that the widget responds accordingly.

<div data-bind="kendoCalendar: { value: startDate, max: maxDate, min: minDate }"> </div>
<hr/>
<button data-bind="click: setToToday">Set to Today</button>
<hr/>
<div data-bind="text: startDate"> </div>
var ViewModel = function() {
    this.startDate = ko.observable(new Date(2012,10,30));
    this.maxDate = new Date(2012, 11 , 31);
    this.minDate = new Date(2012, 0, 1);
    this.setToToday = function() {
        this.startDate(new Date());
    };
};

                            ko.applyBindings(new ViewModel());


This example demonstrates setting global options in ko.bindingHandlers.kendoCalendar.options. This helps to simplify the markup for settings that can be used as a default for all instances of this widget.

<div data-bind="kendoCalendar: startDate"> </div>
<hr/>
<button data-bind="click: setToToday">Set to Today</button>
<hr/>
<div data-bind="text: startDate"> </div>
var ViewModel = function() {
    this.startDate = ko.observable(new Date(2012,10,30));
    this.setToToday = function() {
        this.startDate(new Date());
    };
};

ko.bindingHandlers.kendoCalendar.options = {
    min: new Date(2012, 0, 1),
    max: new Date(2012, 11, 31)
};

                            ko.applyBindings(new ViewModel());


This example demonstrates calling methods of the widget from the view model.

<div data-bind="kendoCalendar: { value: startDate, widget: calendar }"> </div>
<hr/>
<button data-bind="click: goPast">Navigate to Past</button><br/>
<button data-bind="click: goFuture">Navigate to Future</button>
<hr/>
<div data-bind="text: startDate"> </div>
var ViewModel = function() {
    this.startDate = ko.observable(new Date(2012,10,30));
    this.calendar = ko.observable();
    this.goPast = function() {
        this.calendar().navigateToPast();
    };
    this.goFuture = function() {
        this.calendar().navigateToFuture();
    };
};

ko.bindingHandlers.kendoCalendar.options = {};

                            ko.applyBindings(new ViewModel());



Live Options

The kendoCalendar.md binding accepts all of the options that can be specified for the widget. However, when bound against an observable, these live options will update the widget or respond to updates from interactions with the widget.
min

The minimum date allowed for selection in the field

max

The maximum date allowed for selection in the field

value

The current date value of the field

widget

If specified, will populate an observable with a reference to the actual widget