jQuery FullCalendar多个日历，在日历id上删除

Question

我正在使用Adam Shaw的jQuery FullCalendar。我正在同一页上创建多个日历，并将外部元素拖动到日历上。我需要获取元素所在的日历id，以便在数据库中进行更新。获取身份证最简单的方法是什么？

我试过使用最近的

$(this).closest('div.calendar').attr('id');
or
$(this).closest('div.fc').attr('id');
or
$(this).closest('div.fc-ltc').attr('id');

所有这些都导致CCD_ 2。

javascript（简化）

$(document).ready(function() {
    $('#external-events div.external-event').each(function() {
            var eventObject = {
                    title: $.trim($(this).text())
            };
            $(this).draggable({
                    zIndex: 999,
                    revert: true,      // will cause the event to go back to its
                    revertDuration: 0  //  original position after the drag
            });
    });
    $('.calendar').fullCalendar({
            header: {
                    left: '',
                    center: 'title',
                    right: ''
            },
            defaultView: 'agendaWeek',
            editable: true,
            droppable: true,
            drop: function(date, allDay,jsEvent, ui,) {
                    //GET calendar id                      
                    var calendarid = $(this).closest('div.calendar').attr('id');
                    var originalEventObject = $(this).data('eventObject');
                    var copiedEventObject = $.extend({}, originalEventObject);
                    copiedEventObject.start = date;
                    copiedEventObject.allDay = allDay;
                    // Using calendarid here
                    copiedEventObject.calendar = calendarid;
                    // Using calendarid here
                    $('#'+calendarid).fullCalendar('renderEvent', copiedEventObject, true);
                    $(this).hide();
            }
    });
});

html（简化）

<div id='external-events'>
    <h4>Draggable Events</h4>
    <div class='external-event'>My Event 1</div>
    <div class='external-event'>My Event 2</div>
    <div class='external-event'>My Event 3</div>
    <div class='external-event'>My Event 4</div>
    <div class='external-event'>My Event 5</div>
</div>
<div id='calendar1' class='calendar'></div>
<div id='calendar2' class='calendar'></div>
<div id='calendar3' class='calendar'></div>

那么，我该如何找到事件所在的日历（即calendar1）的div id呢？

---

更新

我发现，通过使用事件所在的.elementFromPoint()和jsEvent的screenX/screenY坐标，我可以找到父日历id。

var calendarid = $(document.elementFromPoint(jsEvent.screenX, jsEvent.screenY)).closest('div.calendar').attr('id');

更新js

    $('.calendar').fullCalendar({
            header: {
                    left: '',
                    center: 'title',
                    right: ''
            },
            defaultView: 'agendaWeek',
            editable: true,
            droppable: true,
            drop: function(date, allDay,jsEvent, ui,) {
                    //GET calendar id                      
                    var calendarid = $(document.elementFromPoint(jsEvent.screenX, jsEvent.screenY)).closest('div.calendar').attr('id');
                    var originalEventObject = $(this).data('eventObject');
                    var copiedEventObject = $.extend({}, originalEventObject);
                    copiedEventObject.start = date;
                    copiedEventObject.allDay = allDay;
                    // Using calendarid here
                    copiedEventObject.calendar = calendarid;
                    // Using calendarid here
                    $('#'+calendarid).fullCalendar('renderEvent', copiedEventObject, true);
                    $(this).hide();
            }
    });

.elementFromPoint()/document.elementFromPoint(jsEvent.screenX, jsEvent.screenY)是实现这一目标的准确和/或最佳方式吗？

Answer 1

我确实有这个解决方案，它在过去的一年里对我来说运行良好，它可能也会对您有所帮助。

initialize the calendar
-----------------------------------------------------------------*/
function initializeCalendar( calId /*pass as many custom parameters*/ ) {
    $('#calendar'+calId ).fullCalendar({
          drop: function(date, allDay,jsEvent, ui,) {
                //GET calendar id                      
                var calendarid = calId;
                var originalEventObject = $(this).data('eventObject');
                var copiedEventObject = $.extend({}, originalEventObject);
                copiedEventObject.start = date;
                copiedEventObject.allDay = allDay;
                // Using calendarid here
                copiedEventObject.calendar = calendarid;
                // Using calendarid here
                $('#'+calendarid).fullCalendar('renderEvent', copiedEventObject, true);
                $(this).hide();
          }     
    });
 }

这是迄今为止我遇到的最准确、最优化的方法。

Answer 2

似乎我们可以使用view参数来识别id。这对我很有效。创建一个函数来提取id。并从以view为参数的回调函数中调用它。

function getCalendarId(view) {
        return (view.calendar.view.el.parents('div.calendar').attr('id'))
    }

function onSelectTimeFrame(start, end, jsEvent, view) {
                let calendarId = getCalendarname(view);
                //Use calendarId.
    }