I have a reservation calendar in my app that allows customers to make reservations in empty time slots. The calendar is also used by non-customer personnel who can make overlapping reservations in the calendar.
In order to avoid the customers from making overlapping reservations, I want to block out the overlaps in their view and only show single occurrances. The picture below shows what I am after:
The left column shows the view of the personnel who can make overlapping reservations, the right view is what the customers should see. The customers are thus not allowed to make reservations in the smaller empty slots.
How can I achieve this with Javascript? I tried for loops which are comparing start and end times, but I ended up banging my head against the wall… And I am bound to solving this in the front-end, as I have no control over the back-end.