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');

所有这些都会导致undefined。

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>

那么我怎样才能找到事件被删除的日历的div id（即calendar1）？

更新

我发现通过使用放置事件的.elementFromPoint()和jsEvent s 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.
    }

jQuery FullCalendar多个日历，在日历ID上被删除

2 个答案: