如何将假期添加到剑道调度程序？

Posted 2023-05-07

【中文标题】如何将假期添加到剑道调度程序？

【英文标题】：How to add holidays to kendo scheduler?

【发布时间】：2015-08-17 09:47:56

【问题描述】：

有人知道如何在剑道调度程序中添加假期吗？

我的意思是在假期用户应该不能添加任何事件。

【问题讨论】：

BorHunter，在提出问题之前，*** 建议对您关注的主题进行基本搜索...请搜索 kendo 的文档，如果它没有为您提供足够清晰的答案，那么在此处编辑您的问题。

@Armfoot 我正在搜索网络并检查文档，什么都没有

@BorHunter from "user must not be add any events" 你的意思是用户不能在那个特定的假期/日期添加事件吗？

@machun 是的，你是对的

【参考方案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

注意：在该示例中，您会注意到在 2011 年 6 月 6 日，您无法触发编辑/添加新事件，但在除此之外的那一天您仍然可以

【讨论】：

你知道如何在 Angular 6 的 Kendo UI 中添加假期吗？

【参考方案2】：

您可以使用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
,

【讨论】：

但在您的示例中，我可以将新事件添加到调度程序中，但我不需要它。我的意思是用户不应该在那个特定的假期/日期添加事件。

@BorHunter 我已经编辑了我的答案，不允许按照您的要求将更多事件添加到调度程序中。

如何在 kendo Angular 6 中添加假期？