droppable

Determines if external jQuery UI draggables can be dropped onto the calendar.

This option operates with jQuery UI draggables. You must download the appropriate jQuery UI files and initialize a draggable element. Additionally, you must set the calendar’s droppable option to true.

Here is how you might initialize an element that can be dragged onto a calendar:

$('#my-draggable').draggable({
  revert: true,      // immediately snap back to original position
  revertDuration: 0  //
});

$('#calendar').fullCalendar({
  droppable: true,
  drop: function(date) {
    alert("Dropped on " + date.format());
  }
});

How can I use this to add events?

Good question. Please see the eventReceive article. This is only available in version 2.2 and above.

Specifying Duration

Data can be attached to the element in order to specify its duration when dropped. A Duration-ish value can be provided. This can either be done via jQuery:

$('.draggable').data('duration', '03:00'); // three hours

Or via an HTML5 attribute:

<div class="draggable" data-duration="03:00" />

If no duration is specified, defaultAllDayEventDuration or defaultTimedEventDuration will apply.

Overlapping and Constraining

When there is no event data associated with the drag, the areas where the drop is allowed are determined by selectOverlap and selectConstraint.

When there is event data associated with the drag (see eventReceive), normal event overlap/constraint rules apply, such as eventOverlap and eventConstraint.