0

我正在开发一个 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);
            }
        }
    );          
}
4

1 回答 1

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

我知道这不是你要找的东西，但我希望它对你有帮助！

于 2011-08-02T12:47:03.723 回答