使用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搜索此看到完整的原型規格。你可以擴展它來給出一個編輯對話框。