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());