Search code examples
javascriptjquerycsskendo-uikendo-scheduler

Kendo scheduler custom view doesn't get the right class when selected


I am currently working on a kendo scheduler. I was asked by my client to implement a 3-days view, which I successfully did, but there is one problem : that custom view does not get the "k-state-selected" class when it is selected, which means it can't be fully stylized.

I failed to find why that could be the case : none of the examples for creating a custom time view I found mentionned anything about defining the class the view takes when selected, and furthermore, it does get the "k-state-hover" class when hovered. Strange.

Here's the (I think) relevant JS :

var ThreeDayView = kendo.ui.MultiDayView.extend({
    nextDate: function () {
        return kendo.date.nextDay(this.startDate());
    },

    options: {
        selectedDateFormat: "{0:D} - {1:D}"
    },

    name: "ThreeDayView",

    calculateDateRange: function () {
        //create a range of dates to be shown within the view
        var start = this.options.date,
            idx, length,
            dates = [];

        for (idx = 0, length = 3; idx < length; idx++) {
            dates.push(start);
            start = kendo.date.nextDay(start);
        }

        this._render(dates);
    }
});

$("#scheduler").kendoScheduler({
       date: new Date(), // The current date of the scheduler
       showWorkHours: true,
       height: 600,
       views: [
           "week",
           { type: ThreeDayView, title: "3 Jours", selected: false },
           "day"
       ],
       editable:
           {
               resize: true,
               move: true,
               template: $("#templateEdition").html()
           },
       dataSource: finalSource,
       add: onAdd,
       edit: onUpdate,
       remove: onDelete,
       save: onSaving
   })
});

Does anyone have any idea why that might be ? Thanks !


Solution

  • The type or the view should be a string - the name of the custom view - "ThreeDayView" (instead of ThreeDayView) in this case.