使用自定义模板突出显示已淘汰的kendo日历中的选定日期

Question

你好我正在使用Knockout Kendo Calendar，我正在使用自定义模板选择日期。

按照这个例子https://onabai.wordpress.com/2012/09/19/kendo-ui-setting-background-for-specific-dates/我做了一个初始日期的测试，似乎工作正常。

但我想用当前日期刷新日历。我的意思是，用户将选择不同的日期，并根据日历中的日期应该更改并突出显示。

提前致谢

查看模型

function calendarViewModel(minDate, maxDate) {
    var self = this;

    self.startDate = ko.observable(new Date());

    self.maxDate = maxDate;
    self.minDate = minDate;
    self.selectedDates = ko.observableArray(); 

    self.selectedDatesFiltered = ko.pureComputed(function () {
        return ko.utils.arrayFilter(self.selectedDates(), function (date) {
            var studentId = self.selectedStudentId() || getSelectInitialValue();
            return date.studentId == studentId;
        });
    });

    self.dates = ko.computed(function () {
        console.log("entrando a dates");
        var datesCurrentStudentAdded = ko.utils.arrayFilter(self.selectedDates(), function (date) {
            var studentId = self.selectedStudentId() || getSelectInitialValue();
            return date.studentId == studentId;
        });
        var dates = [];
        var provisionalDates = ko.utils.arrayMap(datesCurrentStudentAdded, function (item) {
            return item.shortDate;
        });
        for (var i = 0; i < provisionalDates.length; i++) {
            dates[+new Date(provisionalDates[i])] = "ob-done-date";
        }            
        return dates;
    });

    self.change = function () {
        var value = this.value();
        var fullDate = getFullDate(value);
        var shortDate = getShortDate(value);
        var dayName = getDayName(value);
        var studentId = self.selectedStudentId() || getSelectInitialValue();

        var elementToPush = {
            studentId: studentId,
            fullDate: fullDate,
            dayName: dayName,
            shortDate: shortDate

        };
        self.selectedDates.push(elementToPush);
    }

    self.calendar = ko.observable();

    self.selectedStudentId = ko.observable().subscribeTo('student-calendar-channel', function (newvalue) {
        return newvalue;
    });

    self.template = ko.computed(function () {
        console.log("entrando a template");
        var dates = self.dates();
        var result = '# console.log(typeof data.dates[+data.date] === "string") #' +
            '# if(typeof data.dates[+data.date] === "string"){ #' +
            '# console.log(data.dates[+data.date]) #' +
            '<div class="#= data.dates[+data.date] #">' +
            '#= data.value #' +
            '</div>' +
            '# }else{ #' +
            '# console.log(data.value) #' +
            '#= data.value #' +
            '# } #';
        return result;
    });
}

HTML

<div clas="row" id="calendar-area">
    <div class="col-md-10">
        <h4>First, select the dates you would like to come to the program:</h4>
        <h1 style="visibility:hidden;"></h1>
    </div>
    <div class="col-md-5">
    <div id="calendar" data-bind="kendoCalendar: { value: startDate, max: maxDate, min: minDate, change: change, dates: dates, month : { content: template() }, widget: calendar }">
    </div>
</div>

具有工作样本的存储库

https://github.com/EdsonAlcala/knockout-school-example