New to Kendo UI for jQuery? Download free 30-day trial

Set Multiple Dates in the Calendar with MVVM


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


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


Use custom binding.

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

    <script> ={
        init: function(widget, bindings, options) {
            //call the base constructor
  , 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);    
In this article