Drag en drop Events wittout overlap in an different Timeline

Asked by Keust
7 years ago.

Hi,

I would like to change the placement of the Events in the timeline (e.g. Hotel Room Check-In and Check-Out Time (https://code.daypilot.org/27453/html5-hotel-room-booking-javascript-php)) .

There are some Issues if I follow this tutorial;

How to load the function loadTimeline() as a default view. Now it only works when I use click on the navigation.
Events snap to a grid. With dp.allowEventOverlap = false; this gives an challange. (E.g. I can;t let booking one end on the 16th and let booking two start on the 16th).
I prefer a different view: I would like to start an and end an event +12 hours without changing the view of the timeline. I hard-coded +12:00 hours in de DB but then there is the overlap function again... How to snap to the grid and add 12 hours and keep the don't overlap function?

Hope that it makes sense?

Best regards,
Keust

how-to javascript

events-snap-to-grid.jpg

Answer posted by Dan Letecky [DayPilot]
7 years ago.

To display the customized timeline it's necessary to call loadTimeline() before init(). In the attached project, you can find this call on line 154 (index.php).

If the model used in the tutorial doesn't work for you, you can customize the snap to grid behavior as demonstrated here:
https://code.daypilot.org/39403/javascript-scheduler-customized-snap-to-grid

Comment posted by Keust
6 years ago.

Hi Dan,

Thanks for your reply.

In the project/tutorial there is some challenge with the events. The event in the DB is shown as;
start: 09-12-2019 00:00
end: 09-15-2019 00:00

On screen this is adjusted/shown as;
start: 09-12-2019 12:00
end: 09-15-2019 12:00

In this situation I miss the vertical grid lines of the start of the day.
When I modify the data in the DB there are these 'overlap' issues (due to the snap to grid behaviour witch I absolutely like btw!).
Is it also possible to modify the code a little that a event snaps to a grid + 'x' hours. In my case + 12 hours?

The alternative is adjusting the grid behaviour (e.g. cellDuration: 720). But in this case, you can start a event at 09-12-2019 00:00 and end this at 09-14-2019 00:00 or even at 12:00 (A fault can come at ease).
In this case it would be a great if it would be possible to set the event duration to steps of 1440 (so each step has a duration of 1440 minutes).

Is something like this possible?

This question is more than 1 month old and has been closed. Please create a new question if you have anything to add.