Как редактировать содержимое события fullcalendar

Question

Мне удалось встроить элемент управления fullcalendar в мое приложение asp.net mvc.это работает отлично.Но я хочу отредактировать существующее событие, что мне нужно сделать?

Отредактировано: ОК. Я успешно завершил редактирование события в полнокаландерном управлении.но после редактирования события оно принимает его как новое событие и, вместо того, чтобы заменить другое событие, показывает еще одно событие.и если я обновляю страницу, то она показывает правильно.Поэтому я думаю, что после того, как я отредактировал событие, каким-то образом я хочу визуализировать / снова вызвать / обновить страницу.

Вот код:

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

Answer 2

Это работает для меня и может обновить событие в дБ ..

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