使用 Javascript 更新客户端中的事件

我想知道是否可以在 Javascript 中更新 Fullcalendar 事件而无需重新加载页面，只需单击带有角色按钮的链接即可。当我单击"保存"链接时，事件在服务器端更新，但不在客户端更新，我需要在两端更新事件。

我正在尝试做的是通过 eventClick 编辑全日历打开模态表单的事件。

这是我的javascript的代码

function drawControl(controls) {
        $('#calendar').fullCalendar({
            editable: true,
            aspectRatio: 1,
            contentHeight: 500,
            scrollTime: '24:00:00',
            minTime: '01:00:00',
            maxTime: '24:00:00',
            defaultView: 'agendaWeek',
            header:{left:"prev,next,today",
            center:"title",
            right:"month, agendaWeek, agendaDay"},

            events: allControls(controls), 
            eventRender: function(event, element) {
                var bloodLevel=event.title
                if(bloodLevel >= 180) {
                    element.css('background-color', 'red');
                }
                else if(bloodLevel < 70) {
                    element.css('background-color', 'yellow');
                }
            },
            eventClick: function(calEvent, jsEvent, view) {
                    x=calEvent.id;
                $('#modalTitle').html(calEvent.title);
                $('#control_day_edit').val(moment(calEvent.start._i).format("DD-MM-YYYY hh:mm A/PM"));
                $('#control_level').val(calEvent.title.toString());
                    console.log(calEvent)
                    console.log(calEvent.title)
                    console.log(calEvent.start._i)
                    console.log(calEvent.id)
                $('#eventUrl').attr('href',"/users/:user_id/controls/calEvent.id/edit");
                $('#fullCalModal').modal();
                y=calEvent;
            }
})
}

}）;

document.getElementById('button_edit').addEventListener("click", editControl);
 function editControl(event) {
     event.preventDefault();
     console.log(y);
     console.log(x);
     var controlEdited = {
         "level": document.getElementById('control_level').value,
         "day": document.getElementById('control_day_edit').value,
         "period": document.getElementById('control_period').value,
         "id": x
    }
    $.post("/editControls", JSON.stringify(controlEdited));
    y.title = document.getElementById('control_level').value;
    y.start = moment(document.getElementById('control_day_edit').value);
    console.log(y.start);
    console.log(y);
    $('#calendar').fullCalendar('updateEvent', y);
};

我从您的代码中看到的问题是您存储了y=calEvent但不直接更改此事件的属性。您必须对开始时刻对象（如 y.start.add(1, 'minute');）进行操作，然后使用 updateEvent 函数通知 fullCalendar 更改。

通常，有两个选项可用于更新事件：

重新获取完整日历事件源中的事件。
直接更新修改后的事件。

第一种选择是蛮力。FullCalendar 提供了从底层 fullCalendar 的所有源获取所有事件的方法.fullCalendar( 'refetchEvents' )。一种可能的实现是在通过 JSON 源访问服务器的源中提供事件，或者提供也可以向服务器发出请求的事件生成函数。首先将事件更改存储在服务器端，然后重新获取事件。

第二种选择更直接。基本上，您可以像这样处理 eventClick 函数中的更改：

eventClick = function(event, jsEvent, view) { 
    event.start.add(1, 'days'); // modify   
    // ... store server side
    $('#calendar').fullCalendar('updateEvent', event); // notify change                         
}

您可以根据需要的任何方式更改事件。但是，您必须保留事件对象或事件 ID，以便稍后通知 fullCalendar 更新。最简单的方法是保留事件对象。创建一个表示模式对话框的对象，并将事件对象作为参数提供给它。您不知道何时在模态中完成编辑（由用户完成），因此请提供一个回调机制，将更改的事件存储在服务器端并在fullCalendar中更新它：

eventClick = function(event, jsEvent, view) { 
    var myModal = new Modal(event, event.title, ...); // modify 
    var editWaitFor = myModal.getEditWaitFor();  // give a callback mechanism e.g. jQuery Deferred
    myModal.modal();
    $.when(editWaitFor).then(function() {        // wait for editing
        // ... store in database etc. 
        StoreServerSide(event, ...);    // store and maybe validate
        $('#calendar').fullCalendar('updateEvent', event); // notify change                                                         
    }, function() {
        event.Revert(); // edit not successful, or no change
    });             
}

我认为你的方法应该更加面向对象。将事件交给您的模态并在那里进行更改。然后将更改存储在服务器端，并且可以在存储更改之前对其进行验证。之后通知完整日历。我会避免通过 #id 来使用 jQuery 存储值，稍后使用 document.getElementById 获取它们 - 只需将所需的数据封装在对象中并使用此对象即可。

FullCalendar.js为您提供了一个对话框的基本javascript原型，它用于在单击"更多事件"链接后显示所有事件：

function Popover(options) {
    this.options = options || {};
}

在完整日历中搜索此内容.js以查看完整的原型规格。您可以扩展它以提供用于编辑的对话框。

相关内容

最新更新

热门标签：