如何向kendo调度程序添加假期?

时间:2015-06-03 09:17:21

标签: kendo-ui kendo-scheduler

有人知道如何向kendo调度程序添加假期吗?

我的意思是假期用户不应该添加任何活动。

2 个答案:

答案 0 :(得分:1)

我建议在我的示例中添加一个自定义类,我创建了类 k-holiday ,或者可以使用kendo类 k-non-workhour ,并在dataBound函数中添加:

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");

        }
    });
},

我在这个特定的日期new Date("2013/6/11")创建了一个假期,此日期的所有活动/广告位之后将有 k-holiday 类,然后您想将其添加到您的编辑功能:

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();
    }
}

以上条件将过滤双击/编辑的事件,它将阻止具有k-holiday的事件打开弹出窗口。请参阅此kendo dojo

注意:在该示例中,您会注意到星期二6/11 ,您无法触发编辑/添加新事件,但除此之外您还可以

答案 1 :(得分:0)

您可以使用all day event template创建假期。

可以通过messages.allDay设置消息,如下所示:

<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>

您可以查看this executable example的假期详情。

修改

  

BorHunter:但在您的示例中,我可以将新事件添加到调度程序中,但我不需要它。我的意思是用户无法在该特定假日/日期添加活动。

然后,您只需使用editable,例如this example来禁用该选项:

editable: false,

this one

editable: {
  create: false,
  update: false,
  resize: false,
  move: false,
  destroy: false
},