How to change the default length (duration) of an event in dhtmlxScheduler

dhtmlxScheduler is without a doubt one of the most powerful open source / paid scheduler components that you can find around the web to build an awesome scheduler with different view modes and even a timeline. In many cases you will need to set a default duration for events in order to speed up the scheduling process of your client, fortunately dhtmlxScheduler allows this in an easy way for the common views (and timeline with a little trick) and we'll show you how to do it easily in this article.

Week and day view mode

To change the default duration of the scheduler in the day, week and month view, you will beable to change the default duration of an added event by setting the event_duration property of the config of the scheduler (read more about this option here):

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

So when you click once on a space of the scheduler the event will have an initial duration of 60 minutes (1 hour).

Timeline

If you are using the Premium Timeline component of dhtmlxScheduler, you will notice that the previous way to set the default time of an event won't work on this view. Pitifully there's no setting available to configure such thing in the timeline mode, however you will be able to implement a little trick during the creation of an event in the scheduler.

The trick consists on setting the end date of the event manually having as point of reference the start date, where you can modify to add minutes/hours etc, so you will have your desired "default event duration" on this mode:

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

After clicking once on a space of the timeline, the default duration of an event in this view will be of 60 minutes.

Happy coding !