jQuery fullCalendar + Fancybox弹出窗口来编辑事件

我使用此代码在fullCalendar上生成事件

 $(document).ready(function() { $('#calendar').fullCalendar({ // put your options and callbacks here header: { right: 'today month,agendaWeek,agendaDay prev,next' }, events: [  { title : 'plant_name . ' ' . $row->value_2; ?>', start : 'date . ' ' . $row->time; ?>', allDay: false, url : 'record_id; ?>' },  ], }); });  

这适用于数据显示。 当我点击该事件时，将加载一个新页面进行编辑。

现在我需要在jQuery Fancybox弹出窗口内编辑。

基于fullCalendar API，我会使用

 eventClick: function(event) { if (event.url) { window.open(event.url); return false; } } 

我在整个项目中使用这个Fancybox代码来成功编辑弹出窗口中的其他内容：

 $.fancybox({ 'transitionIn': 'none', 'transitionOut': 'none', 'type': 'ajax', 'href': link, 'onClosed': function() { parent.location.reload(true); } }); $.bind("submit", function() { $.fancybox.showActivity(); $.ajax({ type: "POST", cache: false, data: $(this).serializeArray(), success: function(data) { $.fancybox(data); } }); return false; }); 

但我无法将其集成到fullCalendar脚本中。

例如，这不起作用：

 eventClick: function(event) { if (event.url) { $.fancybox({ 'transitionIn': 'none', 'transitionOut': 'none', 'type': 'ajax', 'href': link, 'onClosed': function() { parent.location.reload(true); } }); $.bind("submit", function() { $.fancybox.showActivity(); $.ajax({ type: "POST", cache: false, data: $(this).serializeArray(), success: function(data) { $.fancybox(data); } }); return false; }); return false; } } 

有任何建议如何完成这项工作？

非常感谢您的帮助！

Answer 1

从理论上讲，您的代码看起来会起作用。 但是你告诉你的fancybox打开一个未定义的变量link ，而是使用event.url 。 此外，不是使用这里有点重的parent.location.reload(this) （你可以动态添加事件，所以不需要重新加载整个页面） ，你可以取消onClosed()事件：

 eventClick: function(event) { if (event.url) { $.fancybox({ 'transitionIn': 'none', 'transitionOut': 'none', 'type': 'ajax', 'href': event.url }); ..................... 

然后在.ajax()的success方法中，你可以从events/events_edit/ page返回一个json字符串（包含新的事件数据，与你在页面加载时添加的样式相同） ，然后在success方法中使用fullcalendars addEventSource并传递json对象以添加到callendar：

 $.ajax({ type: "POST", cache: false, data: $(this).serializeArray(), success: function(data) { // Add the event: $('#calendar').fullCalendar('addEventSource', data); // Close the fancybox window: $('#fancy_close').trigger('click'); } }); 

如果没有全部设置，很难测试任何一个，但它可能会给你一些想法指向正确的方向。

Answer 2

获得成功后，您只需在日历中呈现该事件即可。

 success:function(rep) { var response_array = rep.split('|::|'); if(response_array[0] == 'Error') { //alert(response_array[1]); $('#error').show(); $('#error').html(response_array[1]); $('#error').fadeOut(3000); } if(response_array[0] == 'Success') { //alert(response_array[1]); // Close the fancybox window: $('#fancy_close').trigger('click'); $("#calendarinfo").fullCalendar('renderEvent', { title: $('#title').val(), start: $datdata+" "+$hrsdata+":"+$mnsdata+":00 GMT+0000", },true); } }