如何编辑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); 
      } 
}