Limit events to nights only and setting minimum cell on select

Asked by B.
8 years ago.

I'm working on hotel booking system using the demo version. I managed to do just about everything we need it do up to this point, except for setting certain limits to the "onTimeRangeSelect" event. The way things work is that I need to be able to have two bookings for each day in case I need it (departure + arrival). Let's say a client clears the room on June 12 and another client arrives the same day. I created two cells for each day using:

timeHeaders: [
{ groupBy: "Month" },
{ groupBy: "Day" },
],
scale: "CellDuration",
cellDuration: 720,

This works great, but now I'm trying to impose a few limits to selecting:

1. You can only select minimum 2 cells and only even number of cells (2,4,6,8,10 etc)
2. All events must start in the second part of the day and end in the first part of the day. So for example if someone checks in on June 12 and checks out on June 15, the selection will start in the second cell of June 12 and end in the first cell of June 15 (12 cells total).

Is there a way to do this? The best way would be to have only one cell for each day, but for the event to be offset by 50% to the left or right and be able to add another event to the same day without overlapping.

Thanks!

how-to javascript

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

Two approaches are possible:

1. It's possible to adjust args.start and args.end of the time range selection in real time using onTimeRangeSelecting event:

http://api.daypilot.org/daypilot-scheduler-ontimerangeselecting/

You would have to do the same for event resizing (onEventResizing) and event moving (onEventMoving).

http://api.daypilot.org/daypilot-scheduler-oneventmoving/
http://api.daypilot.org/daypilot-scheduler-oneventresizing/

2. You can generate a custom timeline with cells starting at 12:00 and ending at 12:00 the following day (instead of 00:00-24:00).

http://doc.daypilot.org/scheduler/timeline/

This method is demonstrated in the updated HTML5 Hotel Room Booking tutorial (see the "Check-In and Check-Out Time" section):

http://code.daypilot.org/27453/html5-hotel-room-booking-javascript-php

Comment posted by Bert
8 years ago.

Thanks for the reply!

I ended up using a different approach.

var tickDiff = args.newEnd.ticks - args.newStart.ticks;

if (tickDiff <= 43200000) {
// prevent half day selections
args.preventDefault();
} else if (tickDiff == 86400000 && args.newStart.getHours() == 0 && args.newEnd.getHours() == 0) {
// if selection is two cells wide and in wrong start and end cell, move forward
args.newStart = new DayPilot.Date(args.newStart.addHours(12));
args.newEnd = new DayPilot.Date(args.newEnd.addHours(12));
} else {
// if start is in first half-day cell, then move it forward one cell
if (args.newStart.getHours() == 0) { args.newStart = new DayPilot.Date(args.newStart.addHours(12)); }
// if end is in the second half-day cell, then move it back one cell
if (args.newEnd.getHours() == 0) { args.newEnd = new DayPilot.Date(moment(args.newEnd.d).subtract(12, 'hours').toDate()); }
}

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

Limit events to nights only and setting minimum cell on select

Products

Learn

Get Support

DayPilot Pro