Making a Google-Calendar-like dragging interface

Question

When you use Google Calendar and want to make a new event, you can drag from the start time to the end time, and this creates the event in the desired range.

I want to implement the same functionality for my site using jQuery.

Does anyone have an idea how I can accomplish this?

Answer 1

The basic idea is to have time "slot" elements that each refer to a specific time (usually 15-minute intervals). Each slot element has an onmouseup and onmousedown handler. The mousedown handler, when triggered, stores the time referred to by that slot and updates a boolean variable that indicates whether dragging is occurring. When mouseup is triggered, the handler checks if dragging has started, and if so, decides that this is the ending slot. You now have a beginning and ending time, and you can take it from there to show some dialog that completes the rest of the booking.

Demo: http://www.dstrout.net/pub/appointment.htm
The demo also includes code to prevent text selection, since that is a "side-effect" of dragging. Check out the code to see how that works.