如何在dhtmlxScheduler中更改事件的默认长度(持续时间)

本文概述

• 周和天查看模式
• 时间线

毫无疑问, dhtmlxScheduler是功能最强大的开源/付费计划程序组件之一, 你可以在网上找到它来构建具有不同查看模式甚至时间轴的出色计划程序。在许多情况下, 你需要为事件设置默认的时长, 以加快客户端的调度过程, 幸运的是, dhtmlxScheduler可以轻松地将其用于常见视图(以及带有一些技巧的时间轴), 我们将展示你将在本文中轻松实现。

周和天查看模式

要在日, 周和月视图中更改调度程序的默认持续时间, 你可以通过设置调度程序的配置的event_duration属性来更改已添加事件的默认持续时间(在此处了解有关此选项的更多信息)：

// 1. Set the auto end date option to true, so the end date will be added
//    automatically and set the "event_duration" to an integer value that
//    is represented in minutes e.g 60 minutes.
scheduler.config.event_duration = 60;
scheduler.config.auto_end_date = true;

// 2. Initialize your scheduler as usual and rest of configuration
scheduler.init('scheduler_here', new Date(2018, 05, 11), "week");

因此, 当你在调度程序的空间上单击一次时, 事件的初始持续时间为60分钟(1小时)。

时间线

如果你使用的是dhtmlxScheduler的Premium Timeline组件, 你会注意到, 以前设置事件默认时间的方法在该视图上不起作用。遗憾的是, 没有可用于在时间轴模式下配置此类设置的设置, 但是你将能够在调度程序中创建事件的过程中实现一些技巧。

诀窍在于手动设置事件的结束日期, 并以开始日期作为参考, 你可以在其中进行修改以增加分钟/小时等, 因此在此模式下, 你将拥有所需的”默认事件持续时间”：

scheduler.attachEvent("onEventCreated", function(id, e){
    // Check if the selected view is timeline
    if(scheduler.getState().mode == "timeline"){
        // Retrieve the event object by its temporal id
        var event = scheduler.getEvent(id);

        // Set the end date of the scheduler. The scheduler date helper allows you to add minutes to a date
        // easily, so the duration would depend on the minutes added to the start date
        event.end_date = scheduler.date.add(ev.start_date, 60, "minute");
    }
});

在时间轴上的空间上单击一次后, 该视图中事件的默认持续时间将为60分钟。

编码愉快！