使用Javascript更新客户端事件

Question

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

我想要做的是编辑通过eventClick打开模式窗体的Fullcalendar事件。

这是我的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',"https://stackoverflow.com/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

1. 重新访存事件。
2. 直接更新修改的事件。

第一个选项是蛮力。 FullCalendar提供方法.fullCalendar('refetchEvents')，该方法从底层fullCalendar的所有源中提取所有事件。一种可能的实现方式是提供events in a source通过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 
    });    
} 

我觉得你的做法应该是多目标导向。将活动提供给你的模态并在那里改变它。然后将更改存储在服务器端，并在存储之前验证更改。之后通知fullCalendar。 我会避免通过#id存储jQuery的值，并在稍后使用document.getElementById获取它们 - 只需将所需的数据封装在对象中并使用此对象。

FullCalendar.js为您提供了一个基本的JavaScript原型的对话，它使用以显示所有事件的“多个事件”链接点击后：

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

在fullCalendar.js搜索此看到完整的原型规格。你可以扩展它来给出一个编辑对话框。