Fullcalendar : How to reliably get reference to HTML element for date box on which external element was dropped

Question

I would like a way to obtain an HTML element or CSS selector (or a reference to the droppable object itself) for the date on which an external draggable element was dropped. I tried using the following within the drop() callback to get the node for the date box using the coordinates of the drop event:

var pageX = jsEvent.originalEvent.pageX;
var pageY = jsEvent.originalEvent.pageY;
var domElem = document.elementFromPoint(pageX, pageY);
var node = Y.one(domElem).ancestor('#calendar > .fc-content table.fc-border-separate tr > td', true);

(I'm using the YUI 3 Y.one() and ancestor() methods above to get the node I want, but other methods could be used.)

The above does correctly locate the node of the date box as long as the drop does NOT land on top of an event cell rendered on that date. If the drop does happen to land on an event cell, however, domElem ends up being the event cell, which is an absolutely positioned element outside of the calendar, and the ancestor() methodology above does not work.

I have also tried getting a reference to the droppable obj by way of the draggable element revert property:

revert: function(droppableObj) {
    if(droppableObj === false) {
        alert('No droppableObj');
        return true;
    }
    else {
        alert(Y.dump({droppableObj: droppableObj}));
        return false;
    }
},

Unfortunately, the above does not work. Even though the external element does drop correctly, the revert function does not recognize the calendar as droppable. (For details, see my earlier stackoverflow post at: Fullcalendar: draggable object rejects fullcalendar as droppable even though fullcalendar accepts drop )

The only alternative I can think of is to use the date object in the drop() callback, and with that find the correct fc-dayXX element, but that seems pretty cumbersome. I have searched on this already, but not found anything so far. If anyone has a suggestion, please let me know.

Flavius · Accepted Answer · 2013-01-18T15:09:25.290

Here is what I came up with for the fullcalendar drop callback:

function getSelectorForDroppedOnDate(date, allDay, jsEvent, ui) {
    if (! date) return;
    var displayedDate = $('#calendar').fullCalendar('getDate');
    var displayedMonth = displayedDate.getMonth(); // 0 - 11
    var displayedYear = displayedDate.getFullYear();
    var droppedOnYear = date.getFullYear();
    var droppedOnMonth = date.getMonth(); // 0 - 11
    var droppedOnDate = date.getDate(); // 1 - 31
    var droppedOnDayOfWeek = date.getDay(); // 0 - 6 no matter what week of the month

    // Get values related to the last day of the month before the month the event was dropped on
    // so that the grid location of the drop can be determined
    var lastDayOfMonthBeforeDroppedOnMonth = new Date(droppedOnYear, droppedOnMonth, 0); // This is actually correct
    var dateOfLastDayOfMonthBeforeDroppedOnMonth = lastDayOfMonthBeforeDroppedOnMonth.getDate(); // 1 - 31
    var dayOfWeekOfLastDayOfMonthBeforeDroppedOnMonth = lastDayOfMonthBeforeDroppedOnMonth.getDay(); // 0 - 6

    var i;
    var gridLocationOfDrop; // 0 - 41 to cover 42 days of six weeks always shown

    if (droppedOnMonth === displayedMonth) { // dropped on month is same as currently displayed month
        i = 0;
        // adjust droppedOnDayOfWeek by 1 to account for 0-based index
        while ((droppedOnDayOfWeek + 1) + i*7  < droppedOnDate) {
            i++;
        }
        gridLocationOfDrop = droppedOnDayOfWeek + i*7;
    }
    else {
        // if dropped on date is in month previous to currently displayed month (need to compare years since inequality will reverse at year boundary)
        if ((droppedOnMonth < displayedMonth && droppedOnYear === displayedYear) || (droppedOnMonth > displayedMonth && droppedOnYear < displayedYear)) {
            gridLocationOfDrop = droppedOnDayOfWeek;
        }
        // else if dropped on date is in month after currently displayed month (need to compare years since inequality will reverse at year boundary)
        else if ((droppedOnMonth > displayedMonth && droppedOnYear === displayedYear) || (droppedOnMonth < displayedMonth && droppedOnYear > displayedYear)) {
            i = 0;
            // adjust dayOfWeekOfLastDayOfMonthBeforeDroppedOnMonth by 1 to account for 0-based index
            while ((dayOfWeekOfLastDayOfMonthBeforeDroppedOnMonth + 1) + i*7 < dateOfLastDayOfMonthBeforeDroppedOnMonth) {
                i++;
            }
            gridLocationOfDrop = (dayOfWeekOfLastDayOfMonthBeforeDroppedOnMonth + i*7 + droppedOnDate);
        }
    }

    selector = '#calendar > .fc-content table tr > td.fc-day' + gridLocationOfDrop;
    return selector;
}

Works for me!

Fullcalendar : How to reliably get reference to HTML element for date box on which external element was dropped

1 Answers1