完整日历 - 当事件被删除时，如何找到它被删除的 DIV？

Question

我正在开发一个 FullCalendar 实现，它可以完成所有基础功能，并且运行良好（拖放、调整大小、添加、删除、编辑事件）。不过，我最近在我的日历中集成了“重复项目”功能，以纪念周年纪念日等。这也很好。

当我有一个项目（重复，假设 100 次）被拖到新位置时，问题就出现了。进行 ajax 调用来更新数据库中项目以及所有“重复”项目的日期/时间。这可能需要几秒钟 - 所以我想在事件被拖放到的日期 DIV 中显示一个“正在加载”GIF。如何获取 DIV id 或 DIV 作为对象？

编辑

如果有解决办法的话，我也愿意听到日期 div 中加载图形的其他替代方案。

$('#jMonthCalendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    editable:true,
    eventSources: [
        "/api/getCalendarItemsAll.php"
    ],

    eventDrop: function ( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ){
        updateCalendarItem( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view, true );
    },
    eventResize: function( event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ){
        updateCalendarItem( event, dayDelta, minuteDelta, null, revertFunc, jsEvent, ui, view, false );
    },

    //... Other Event Handlers

});

function updateCalendarItem( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view, isDrop ){

    var j=JSON.stringify(event);
    var url = '/api/calendarUpdateItem.php';
    var data = 'j=' + encodeURIComponent(j) + 
              '&dd=' + encodeURIComponent(dayDelta) +
              '&md=' + encodeURIComponent(minuteDelta) +  
              '&dr=' + encodeURIComponent(isDrop) +
              '&ref=' + randomString(30);

    $.getJSON(
        url, data,
        function(result) {
            refreshCalendar();
            if (result.status == "ERR"){
                showError(result.message);
            }
        }
    );          
}

Answer 1

我遇到了一些类似的问题，除了页面上有一些选项可以将不同的事件加载到日历中。不幸的是，我不确定如何仅针对事件被删除到的 div 执行此操作，因为各个 div 确实没有定义功能。

我最终做的是使用一个名为 BlockUI 的 jquery 插件在整个日历上创建一个模式，而我在加载新事件时，需要进行一些调整才能使其适合日历，但它传达了信息。这是一个小代码片段。

//this is called when the checkbox is clicked
if(this.value === 'on'){
    $('#mycalendar').fullCalendar( 'addEventSource', '--url--');
    this.disabled = true;
} else {
    $('#mycalendar').fullCalendar( 'removeEventSource', '--url--');
}

下一部分是 fullcalendar 的参数，当某些内容需要卸载或完成加载时调用。

loading: function(bool) {
    if(bool){
        $('#mycalendar').block({
            message: '<h1>Loading...</h1>',
            css: {top: '10% !important'}
        })
    } else {
         $('#mycalendar').unblock();
         $('.processCheck').removeAttr('disabled');
    }
}

我知道这并不完全是您想要的，但我希望它能有所帮助！