Question

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

我要做的是编辑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);
};

Answer 1

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

通常，您有两种更新事件的选项：

在fullCalendar EventSource中重新获取事件。
直接更新修改后的事件。

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

第二种选择更直接。基本上你可以像这样处理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
    });             
}

我认为你的方法应该更加面向对象。将事件发送到您的模态并在那里进行更改。然后将更改存储在服务器端，并可能在存储之前验证更改。然后通知fullCalendar。我会避免使用#id存储jQuery值，稍后使用document.getElementById获取它们 - 只需将所需数据封装在对象中并使用这些对象。

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

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

在fullCalendar.js中搜索此内容以查看完整的原型规范。您可以对此进行扩展以提供编辑对话框。

使用Javascript在客户端更新事件

1 个答案: