• Basic Usage
• Google Calendar
• General Display
• Views
• Agenda Options
• Current Date
• Text/Time Customization
• Clicking & Hovering
• Selection
• Event Data
• Event Rendering
• Event Dragging & Resizing
• Dropping External Elements
  • droppable
  • dropAccept
  • drop (callback)
• Utilities

droppable 1.4.7

Determines if 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, allDay) {
        alert("Dropped on " + date + " with allDay=" + allDay);
    }
});

How can I use this to add events???

Good question. It is a common need to have an "external list of events" that can be dragged onto the calendar.

While the droppable option deals with generic jQuery UI draggables and is not specifically tailored to adding events, it is possible to achieve this with a few lines of code. Follow the external-dragging.html example in FullCalendar's download. You can also view the example online.

In short, you must call renderEvent yourself in the drop callback.