双击

Question

我正在摆弄JQuery完整日历，我希望借助你的帮助弄清楚是通过Double Clicking向日历中添加一个事件。我在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调用。