如何編輯fullcalender事件內容

Question

我成功地將fullcalender控件嵌入到我的asp.net mvc應用程序中。它運行完美。但我想編輯現有活動，我必須做些什麼？

編輯： 好的我已經在fullcalender控件中成功編輯事件。但在編輯事件後，它將其視爲新事件，而不是替換另一個事件，它會向我顯示另一個事件。如果我刷新頁面，那麼它顯示正確。所以我想在編輯事件之後，我想再次渲染/調用/刷新頁面。

下面是代碼：

$(document).ready(function() { 
     var date = new Date(); 
     var d = date.getDate(); 
     var m = date.getMonth(); 
     var y = date.getFullYear(); 
     var officerid = document.getElementById('officerid').value; 
     url = "/TasksToOfficer/Calender/" + officerid; 


     var calendar = $('#calendar').fullCalendar({ 
      header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'month,agendaWeek,agendaDay', 
       border: 0 
      }, 
     eventClick: function(calEvent, jsEvent, view) { 

       var title = prompt('Event Title:', calEvent.title, { buttons: { Ok: true, Cancel: false} }); 

       if (title) { 
        var st = calEvent.start; 
        var ed = calEvent.end; 
        var aldy = calEvent.allDay; 
        var dt = calEvent.date; 
        var iden = calEvent.id; 

        calendar.fullCalendar('renderEvent', 
              { 
               title: title, 
               start: st, 
               end: ed, 
               allDay: aldy 
              }, 
              true); 


        var date = new Date(st); 
        var NextMonth = date.getMonth() + 1; 
        var dateString = (date.getDate()) + '/' + NextMonth + '/' + date.getFullYear(); 



        if (officerid) { 
         $.ajax(
                { 

                 type: "POST", 
                 url: "/TasksToOfficer/Create", 
                 data: "officerid=" + officerid + "&description=" + title + "&date=" + dateString + "&IsForUpdate=true&EventId=" + iden, 
                 success: function(result) { 

                  if (result.success) $("#feedback input").attr("value", ""); // clear all the input fields on success 

                 }, 
                 error: function(req, status, error) { 

                 } 
                }); 


        } 
       } 

      } 

       , 

      selectable: true, 
      selectHelper: true, 
      select: function(start, end, allDay) { 
       var title = prompt('Event Title:', { buttons: { Ok: true, Cancel: false } 

       }); 
       if (title) { 
        calendar.fullCalendar('renderEvent', 
                   { 
                    title: title, 
                    start: start, 
                    end: end, 
                    allDay: allDay 
                   }, 
               false); // This is false , because do not show same event on same date after render from server side. 
        var date = new Date(start); 

        var NextMonth = date.getMonth() + 1; // Reason: it is bacause of month array it starts from 0 

        var dateString = (date.getDate()) + '/' + NextMonth + '/' + date.getFullYear(); 

        if (officerid) { 
         $.ajax(
                    { 

                     type: "POST", 
                     url: "/TasksToOfficer/Create", 
                     data: "officerid=" + officerid + "&description=" + title + "&date=" + dateString + "&IsForUpdate=false", 
                     success: function(result) { 

                      if (result.success) $("#feedback input").attr("value", ""); // clear all the input fields on success 
                      //$("#feedback_status").slideDown(250).text(result.message); // show status message with animation 
                     }, 
                     error: function(req, status, error) { 

                     } 
                    }); 
        } 
       } 
       calendar.fullCalendar('unselect'); 
      }, 
      editable: true, 
      lazyFetching: true, 
      events: url //this will call the action from controller and show the saved events in db, the result of the action should be in proper formate. 
     }); 
    }); 

我想在這裏與refetchEvent，呼叫renderEvents回來，但沒有奏效。這裏有其他問題嗎？

Answer 1

而不是調用renderEvent當你改變一個，你將不得不打電話updateEvent。另外請注意，你必須提供「真正的」日曆事件updateEvent，而不是你組成的。所以你的代碼應該是這樣的：

eventClick: function(calEvent, jsEvent, view) { 
      var title = prompt('Event Title:', calEvent.title, { buttons: { Ok: true, Cancel: false} }); 

      if (title){ 
       calEvent.title = title; 
       calendar.fullCalendar('updateEvent',calEvent); 
      } 
}