【问题标题】:How to edit fullcalendar event content如何编辑全日历活动内容
【发布时间】:2010-12-09 07:15:11
【问题描述】:

我成功地将 fullcalendar 控件嵌入到我的 asp.net mvc 应用程序中。它运行完美。但是我想编辑现有的活动,我该怎么办?

已编辑: 好的,我已经成功完成了 fullcalender 控件中的 Edit 事件。但是在编辑事件之后,它会将其假定为新事件,而是替换另一个事件,它会向我显示另一个事件。如果我刷新页面,那么它会正确显示。所以我想在我编辑事件之后,我想如何渲染/再次调用/刷新页面。

代码如下:

  $(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 进行回调,但没有成功。还有其他问题吗?

【问题讨论】:

    标签: jquery fullcalendar


    【解决方案1】:

    当你更换一个时,你必须调用updateEvent,而不是调用renderEvent。另请注意,您必须向 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);
              }
    }
    

    【讨论】:

    • 谢谢,但这对我不起作用。我不仅在页面上更新,还在数据库中更新它。我以前试过这个,但对我不起作用。
    • @Lalit:对我有用,请参见此处:jsfiddle.net/ryleyb/8hNGJ 我的示例和您的代码之间唯一有意义的区别是我在调用updateEvent 时使用$('#calendar') 而不是calendar
    • @Ryley ,我在查看您的代码后同意。它也对我有用,但它没有呈现更新的内容。否则,如果我再次单击同一事件,则会提示我得到更新的值。但在这一行之后: calendar.fullCalendar('updateEvent',calEvent);它不是执行任何事情。我试着把 alert('hi');在这条线之后,但它没有被执行......这个功能的所有旋律都在这条线之后......所以,这条线应该是什么问题?
    • 很好,现在可以正常工作了,拼写中有愚蠢的错误。现在完美运行...谢谢
    • @Lalit,如果我的答案不正确,也许您可​​以添加一个答案来解释有效的方法?即使只是拼写错误,以后也可能对其他人有所帮助!
    【解决方案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');
            },
    

    【讨论】:

    • 你能指出与OP的代码有什么区别吗?我看到了,但你的工作是要准确,以便其他人可以轻松理解。
    猜你喜欢
    • 1970-01-01
    • 2014-06-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-09-03
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多