Creating draggable and resizable events in scheduling app

Creating draggable and resizable events in scheduling app

I'm interested in creating a minimal scheduling app with events that can be dragged and resized, as you would in the day view of Google Calendar or FullCalendar. I've looked at the draggable, droppable, resizable and sortable features of jQuery UI, but they all seem to stand alone somewhat. 

For example, if I were to use droppable elements to define time periods, how would I use resizing to make a element overlap more than one droppable unit. I would think that sortable would do this, but how do I ensure empty space where things aren't scheduled? I keep running into obstacles like this.

I'm sorry this isn't a very specific question, but I'm new to JS and jQuery, and was hoping someone might be able to offer some guidance!

Thanks!