javascript - 双击在 JQuery FullCalendar 上添加约会

Question

我正在摆弄 JQuery Full Calendar，我想在您的帮助下找出通过双击向日历添加事件的方法。我在 JQuery 中连接了双击事件，但是我不确定如何处理它。当我双击日历时，它确实会显示一个弹出窗口，这很好。我知道如何将事件的详细信息发送到后面的代码。我想我的大问题是当人们双击时，我如何调出表格供他们填写？我只有四个字段和全天选项可以通过 EWS 传递到 Exchange。那一面工作得很好。所以我需要帮助弄清楚如何做两件事。

1. 当他们双击时，会弹出一个表单供他们添加详细信息

2. 将信息发送到后面的代码 - 重新使用ajax调用？创建一个新的？

       $(document).ready(function () {
       initThemeChooser({
           init: function (themeSystem) {
               $('#calendar').fullCalendar({
                   themeSystem: themeSystem,
                   header: {
                       left: 'prev,next today',
                       center: 'title',
                       right: 'month,agendaWeek,agendaDay,listMonth'
                   },
                   selectable: true,
                   selectHelper: true,
                   weekNumbers: true,
                   navLinks: true,
                   editable: true,
                   eventLimit: true,
                   events:  <% =JsonEvent %>,
                   eventDrop: function (event, delta, revertFunc) {
                       if (!confirm("Are you sure about this change?"))     {
                           revertFunc();
                       } else {
                           UpdateEvent(event);
                           $(this).fullCalendar( 'refetchEvents' );
                       }
                   },
                   eventResize: function(event, delta, revertFunc) {
                       alert(event.title + " changed end is now " + event.end.format());
                       if (!confirm("is this okay?")) {
                           revertFunc();
                       }
                       else
                       {
                           UpdateEvent(event);
                           $(this).fullCalendar( 'refetchEvents' );
                       }
                   },
                   eventClick: function(calEvent, jsEvent, view) {
   
                       alert('Event: ' + calEvent.title + '\nDate: ' + moment(calEvent.Start).format("MM-DD-YYYY") + '\nStart: ' + moment(calEvent.start).format("hh:mm:ss A") + '\nEnd: ' + moment(calEvent.end).format("hh:mm:ss A"));
                       $(this).fullCalendar( 'refetchEvents' );
                       // change the border color just for fun
                       $(this).css('border-color', 'red');
   
                   },
                   eventDoubleClick: function(calEvent, jsEvent, view) {
   
                       alert('Event: ' + calEvent.title);
                       alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
                       alert('View: ' + view.name);
   
                       // change the border color just for fun
                       $(this).css('border-color', 'red');
                   }
               });
   
               function UpdateEvent(event)
               {
                   var data = {};
                   data.id = event.id;
                   data.starts = event.start;
                   data.ends = event.end;
                   data.subject = event.title;
   
                   $.ajax({
                       url: 'Calendar.aspx/UpdateEvent',
                       method: 'POST',
                       dataType: 'JSON',
                       contentType: 'application/json; charset=utf-8',
                       data: JSON.stringify(data),
                       success: function (response, type, xhr) {
                           var retVal = JSON.stringify(response);
                       },
                       error: function (xhr) {
                           window.alert('error: ' + xhr.statusText);
                       }
   
                   });
   
               }
           },
           change: function (themeSystem) {
               $('#calendar').fullCalendar('option', 'themeSystem', themeSystem);
           }
   
       });
   });
   

Answer 1

这是您应该采取的方法:

1) 显示一个包含表单的新 div(可能使用 CSS 样式等使其成为有效的模式对话框)，而不是警报。

2) 我认为 Create 的行为需要与 Update 略有不同，因此我猜您也需要稍微不同的 ajax 调用。