Set Multiple Dates in the Calendar with MVVM

Environment

Product	Progress® Kendo UI® Calendar for jQuery
Product Version	2017.3.1026

Description

How can I set multiple Calendar dates as selected from the viewModel?

Solution

Use custom binding.

<div data-role="calendar" id="calendar" data-selectable="multiple" data-bind="selectDates: dates"></div>

    <script>
    kendo.data.binders.widget.selectDates = kendo.data.Binder.extend({
        init: function(widget, bindings, options) {
            //call the base constructor
            kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
        },
        refresh: function() {
            var that = this,
            value = that.bindings["selectDates"].get(); //get the value from the View-Model
            $(that.element).data("kendoCalendar").selectDates(value); //update the widget
        }
    });

    //View-Model source
    var viewModel = kendo.observable({
        dates: [new Date(2017, 10, 10), new Date(2017, 10, 11)]
    });

    kendo.bind(document.body, viewModel);    
    </script>