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

我知道这不是你想要的，但我希望无论如何都有帮助！

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

1 个答案: