Improving the drag and drop experience in Schedule Beta

By - 24 Aug 2018

Julie Andrews juggling tomatoes in Sound of Music.

It takes skill to make something elegant seem effortless.

We start off this week’s product update with an announcement: we’ve finished development of drag’n’drop and resizing in the new Schedule Beta, due to be rolled out to everyone shortly.

Our initial implementation of moving bookings in the old Schedule application tried to satisfy a couple of requirements, like preserving the amount of booked durations while skipping unavailable days. That implementation did this by highlighting the days the booking would occupy when dropped:

Dragging a booking in the current Schedule.

While thinking about the mechanics of this approach, we decided to improve on it by previewing what the booking would look like while dragging. This is what the mechanism will look like in Schedule Beta:

Dragging a booking in the new Schedule Beta.

The new mechanism offers a few advantages over the previous incarnation:

  • the preview of the dragged booking now also correctly renders skipped days (displayed in dashed borders),
  • dragging left or right by a number of days translates into shifting the booking’s start date by as many days,
  • the booking’s end date is adjusted by booking available days given the new start date,
  • we dynamically fetch extra availability data for very long bookings and show the preview start and end dates.

We feel that this drastically improves the look and feel of this feature, and allows for future improvements that will empower you to make better decisions when rescheduling your events.

This feature will initially only support mouse interactions, but we are still working on a good control scheme for users on touch devices that will enable you to use drag and drop on mobile as well.

Stay tuned for our release announcement, coming very soon!

Hi there! I'm Klemen, one of the engineers at Resource Guru. I make sure all the browser bits fit together and sometimes take a hammer with me on the way to the data centre.