事件的完整日历拖动手柄

Question

I am looking for a way to implement a jquery ui like drag handle on individual events inside of a full calendar.

the use case being

$("#calendar").fullCalendar({
    //the normal parameters here
    eventsDragHandle: "someClass"
});

or

$("#calendar").fullCalendar({
   //the normal parameters here
   eventHasDragHandle: true
});

This way the event won't drag unless if the specific handle is moused down on.

I have attempted to modify the fullcalendar.js to no avail and only crashing the javascript code.

Thanks, Kevin

Answer 1

I have seem to find a way to get this to work.

When instantiating your fullCalendar in the eventRender tag add your html that is going to be the drag handle of the event element.

eventRender: function(event, element, view)
{
    var theHtml = "<div class='stops'>X</div>";
    $(element).append(theHtml);
}

In the full calendar source, find the function draggable*Event where * is the type of calendar event you want to have a drag handle on. (such as the draggableDayEvent)

in the code for binding draggable add the appropriate 'handle' tag

eventElement.draggable({
   handle: ".stops",
   //etc...
});

The reason this works is because the eventRender happens before the element is drawn and draggable is associated, so the html for the handle get appended before the draggable event is bound.

I hard code modified it with the class ".stops" for my uses, but this could easily be turned into another option parameter for all of full calendar.