Question

I am trying to implement an external container to hold unscheduled events that may be dragged onto the calendar. Currently I am able to drag events FROM the external container to the calendar and have them stick. However, I can NOT remove events from the calendar. I am hoping to be able to remove events by dragging them off the calendar but I can not get them to leave the boundries of the calender.

SIMPLY PUT, I need to be able to drag an event off of the calendar without it disapearing when I leave the boundaries of the calendar.

I’m not sure if the issue involves z-index, containment properties, or scope.

Answer 1

Well I have found the answer to my own question.

Looking into the fullcalendar.js I found the the position style for the container div affects whether or not the events can be dragged outside of it. So I made two changes to fix this issue.

absoluteViewElement = 
        $("<div class='fc-view fc-view-" + newViewName + "'/>")
        //+ "' style='position:absolute'/>")

This prevents the style from being set initially. However there is another spot that tries to change the position style again.

function setSize(dateChanged) {
    ignoreWindowResize++;
    currentView.setHeight(suggestedViewHeight, dateChanged);

    if (absoluteViewElement) {
        //absoluteViewElement.css('position', 'relative');
        absoluteViewElement = null;
    }

    currentView.setWidth(content.width(), dateChanged);
    ignoreWindowResize--;
}

With these two changes I have freed the calendar’s events from the calendar itself. Now I’m free to drag the events outside of the calendar and even have them interact with other containers or other fullcalendars on the same page.

I’m using a div next to the calendar to hold unscheduled events . this way the user can drag events onto the calendar to schedule them or remove them from the calendar to unschedule them using a call to the database on drop.