Timeline view with time end past midnight

Currently evaluating Scheduler.net. Following the Car Rent example along with all others.
Have a timeline view that spans a day. Everything going well, until…
One requirement is that the user can only view and schedule within configured time start and time end with . ex. 10 am to 2 am.
The following configuration works well and steps into the next day correctly:
scheduler.Config.first_hour = 11; //limits time picker in light box and config for other views
scheduler.Config.last_hour = 24; //limits time picker in light box and config for other views

timeline.X_Unit = TimelineView.XScaleUnits.Hour;
timeline.X_Step = 1;
timeline.X_Start = 11; // 11am
timeline.X_Length = 24; //12am
timeline.X_Size = 13;

But with the following configuration, several things occur:
scheduler.Config.first_hour = 11;
scheduler.Config.last_hour = 2;

timeline.X_Unit = TimelineView.XScaleUnits.Hour;
timeline.X_Step = 1;
timeline.X_Start = 11; // 11am
timeline.X_Length = 2; //2am
timeline.X_Size = 15;

  1. timeline view draws correctly
  2. timeline view does not step correctly, steps by 1 hour instead 15
  3. time pickers not populated with time values in lightbox
  4. other views (weekly or units ) not drawing schedule at all.

Is this a limitation or an issue with end time past midnight?
Is there something else I can do to work around this? ex. configuration and/or javscript



Unfortunately first_hour/last_hour settings does not support overnight config.
Timeline view can be configured for overnight display, please check this example
s3.amazonaws.com/uploads.hipcha … rnight.zip

But built-in day/week/units views can’t, and there is no simple workaround for this.

Hello Aliaksandr,

Thanks for the example.
Your example configuration allows for TimeLine to step correctly. Without configuration for schedule.Conf.first_hour and last_hour also corrects the time pickers in LightBox, but allows the user to enter time out of the day range.

Would you think I could trap for this myself by creating custom external lightbox?
Would there be a chance of adding this feature of overnight configuration to Scheduler?

I found your scheduler to be one of the better and flexible component available.

Another question please… I have various sections in the timeline view like the cars in the car rent example.
Now these sections have their own select options. I’ve tried to implement this into the LightBox using dynamic ServerLists coming from the Server side for use by client side JavaScript(onBeforeLightbox) via an Id property in the event. Trying something similar to your “Linking Select Control in the LightBox” example without the need of parent section list.

Would you have an example in MVC?
Do you think custom external lightbox would be helpful here?

Thank you for your time.


A lightbox time selector allows selecting date time within a one day. I.e. if you want to specify overnight event, you’ll need to select both next day in day selector and time option.
There may be several workarounds in order to make this transparent for the user.
Firstly, you can access DOM elements of the time controls dynamically, so you can manage list of options, attach onchange/onclick handlers, etc.
docs.dhtmlx.com/scheduler/api__s … event.html
docs.dhtmlx.com/scheduler/api__s … ction.html
Or you can implement a custom time select control:
scheduler-net.com/docs/lightbox. … r_lightbox

It’s also possible to monitor saving of the details form and doing necessary tweaks to event timing
docs.dhtmlx.com/scheduler/api__s … event.html

You can also go with a complete custom lightbox. However if you’re going to use recurring events, implementing recurrence controls and making it compatible with data format of scheduler might be quite painfull.

As for support of overnight time scale in Day/Week/Unit views - most probably it won’t be implemented very soon. Calculation of the time scale and mouse position detection for such views are embedded in several parts of scheduler login and there is no easy way to override it with a current version of scheduler api.

Updating select options using scheduler.serverList/scheduler.updateCollection requires rebuilding the lightbox, so it may not work correctly if you call it when lightbox is opened. If you do ajax loading, you can access select control DOM element from a callback and populate it with loaded options:
docs.dhtmlx.com/scheduler/api__s … ction.html

Or you can load all possible options to the client when app starts and update options using scheduler.updateCollection from onBeforeLightbox event
docs.dhtmlx.com/scheduler/api__s … ction.html

Hello Aliaksandr,

Thank you for response and support. I’ve been away and now back to this project.
I truly appreciate your advice, tips and tricks. I’m sure others on the forum feel the same. I’m finding your information, along with this forum very useful in getting closer to the end goal.

Have more questions and your help would be much appreciated.

  1. I have since your last post, implemented SetExternalLightbox with bootstrap controls. Everything working fine including separate select lists for each section and allows for greater control over time entries. Although, not a fan of calling server side every time lightbox is required (may eventually try your solution for client side data manipulation).
    Problem is the onEventSave no longer fires. With standard LightBox, I would use onEventSave to call setCurrentView, which called onBeforeViewChange where calculations are performed on all events for that view. The results are used to update web page with statistical information. I get around this by attaching to onAfterLightbox, but would be nice to do this on save only. Any other way?

  2. Scheduler does not completely render inside bootstrap modal dialog or bootstrap tabs, until you click on the timeline tab then renders completely inside the modal dialog. The reason is know, dhx_cal_data div width is 0, along with dhx_cal_header dhx_second_cal_header also set to 0 width, among others. But the cause… I assume modal container is not totally defined once scheduler loads. This is not the primary scheduler(renders in separate window), but a secondary scheduler that would be nice in a bootstrap modal or tab window. Any others experience the same?

  3. Using onLimitViolation to unblock events. Works fine if you drag into the blocked event, but how to invoke/unblock events by dragging over or by clicking the blocked event?

  4. With my over night configuration, the following problem… Week agenda view renders double events, but really is only one event. Event falls on a Friday and few hours on Saturday, rendering an separate, but same event for Friday and Saturday. I’ve tried to filter out those duplicates using onBeforeViewChange by iterating through events for the week, but no duplicate events found to filter out. Any other way to do this? Maybe, accessing the DOM directly?

  5. Currently have two timeline views, day and week.
    Week timeline renders like this: with event line overflow: visible

Would like to render like this: I manually manipulated left and width properties.

Your thoughts on how to do this by accessing DOM directly. Worth the effort?
Because of overnight config, cannot use default week or unit view.

Thanks Again.


I’ve just been reading through this, and (disclaimer) I’ve only just started reviewing Scheduler… but I had an idea that might be possible to implement.

You say you want your times to go up to 2am and be treated as the previous day. Why not implement some logic whereby all your data is stored shifted by 2 (or 3) hours back - so for example something at 1 a.m. is stored as 11 pm.

You’d need to then write some custom code to change the time display of that back both on the events themselves and on the time axis. But then it you’ve got the whole thing on one day.