How to edit fullcalendar event content

Question

I am succeed in embedding the fullcalendar control in my asp.net mvc application. it is running perfect. But I want to edit existing event, what I have to do?

Edited: ok I have done with successfully Edit event in fullcalender control. but after edit the event, it assumes it as new event and rather replace another event it shows me one more event. and if i refreshes page, then it shows properly. So I think after I edit the event, some how i want to render / call again / refresh page.

Here is the code:

  $(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.
      });
  });

I tried here with refetchEvent, renderEvents for call back , but not worked. Is here any other issue?

Answer 1

It is Working for me and can update the event in db ..

eventClick: function (event, jsEvent, view) {
            var title = prompt('Event Title:', event.title);
          if (title){
                event.title = title;
                var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
                var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
                 $.ajax({
                        url: base_url+"calendar/edit_events",
                        data: 'title=' + title + '&start=' + start + '&end=' + end + '&id=' + event.id,
                        type: "POST",
                        success: function (response) {
                            //alert("hi");
                            displayMessage("Updated Successfully");
                            window.location.href = base_url+"calendar/events"

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

          }
           calendar.fullCalendar('unselect');
        },

Answer 2

Instead of calling renderEvent you will have to call updateEvent when you change one. Also notice that you have to provide the "real" calendar event to updateEvent, not one that you make up. So your code should go like this:

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);
          }
}