How to add holidays to kendo scheduler? - kendo-ui

Question

Is anybody know how to add holidays to kendo scheduler?
I mean in a holiday user shouldn't be able to add any events.

Answer 1

I suggest to add a custom class in my example i created class k-holiday or maybe utilize kendo class k-non-workhour and on dataBound function add this :
dataBound: function () {
var scheduler = this;
//get scheduler view
var schedulerView = this.view();
//loop through all slot/event/tile
schedulerView.table.find("td[role=gridcell]").each(function () {
//find start date
var slot = scheduler.slotByElement($(this));
var CONSTANT_HOLIDAY_DATE = new Date("2013/6/11");
CONSTANT_HOLIDAY_DATE.setHours(0, 0, 0, 0);
slot.startDate.setHours(0, 0, 0, 0);
//compare date curent event with holiday
if (slot.startDate.getTime() == CONSTANT_HOLIDAY_DATE.getTime()) {
$(this).addClass("k-holiday");
} else {
$(this).removeClass("k-holiday");
}
});
},
i created a holiday on this particular Date new Date("2013/6/11") where later on all event/slot on this date will have k-holiday class, then you want to add this to your edit function :
edit: function (e) {
var uid = e.container.attr('data-uid');
var element = e.sender.element.find('div.k-event[data-uid="' + uid + '"]');
var slot =$("#scheduler").data("kendoScheduler").slotByElement(element);
if($(slot.element).hasClass("k-holiday")){
e.preventDefault();
}
}
above condition will filter event that is double clicked / edited , where it will prevent the event that has k-holiday to open the popup. Please refer to this kendo dojo
Note : on that example you will notice that on tuesday 6/11 you can't trigger the edit/add new event, but on the day other than that you still can

Answer 2

You can use the all day event template to create holidays.
The message can be set through messages.allDay like this:
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6"),
messages: {
allDay: "Holiday"
},
dataSource: [
{
id: 1,
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 AM"),
title: "Interview"
}
]
});
</script>
You can check this executable example with holiday details.
Edit
BorHunter: but in your example I can add new events into scheduler, but I don't need it. I mean user shoudn't be able to add event on that particular holiday/date.
Then you just disable that option by using editable like this example that has:
editable: false,
Or this one:
editable: {
create: false,
update: false,
resize: false,
move: false,
destroy: false
},