I've been working on a kendo scheduler for a client and they wanted me to implement a 3-day view. I managed to get it working, but there's one issue: the custom view doesn't receive the "k-state-selected" class when it's selected, which is causing styling problems.
I couldn't figure out why this is happening. None of the examples I looked at for creating a custom time view mentioned anything about defining the class that should be applied when the view is selected. It's strange because it does receive the "k-state-hover" class when hovered over.
Here's the relevant JavaScript code:
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
})
});
Any ideas on why this might be happening? Thanks!