javascript jQuery fullCalendar + Fancybox 弹出来编辑事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5532377/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery fullCalendar + Fancybox popup to edit event
提问by pepe
I am generating events on fullCalendar with this code
我正在使用此代码在 fullCalendar 上生成事件
<script type="text/javascript">
$(document).ready(function() {
$('#calendar').fullCalendar({
// put your options and callbacks here
header: {
right: 'today month,agendaWeek,agendaDay prev,next'
},
events: [
<?php foreach($cal_data as $row): ?>
{
title : '<?php echo $row->plant_name . ' ' . $row->value_2; ?>',
start : '<?php echo $row->date . ' ' . $row->time; ?>',
allDay: false,
url : '<?php echo base_url() . 'events/events_edit/' . $row->record_id; ?>'
},
<?php endforeach; ?>
],
});
});
</script>
This works fine for data display. When I click on the event a new page is loaded for editing.
这适用于数据显示。当我点击事件时，会加载一个新页面进行编辑。
Now I need to edit inside a jQuery Fancybox popup.
现在我需要在 jQuery Fancybox 弹出窗口中进行编辑。
Based on the fullCalendar API, I would use
基于 fullCalendar API，我会使用
eventClick: function(event) {
if (event.url) {
window.open(event.url);
return false;
}
}
I am using this Fancybox code throughout the project to successfully edit other things inside popups:
我在整个项目中使用这个 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;
});
But I haven't been able to integrate it into the fullCalendar script.
但是我一直无法将它集成到 fullCalendar 脚本中。
For example this doesn't work:
例如，这不起作用：
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;
}
}
Any suggestions how to get this done?
任何建议如何完成这项工作？
Thanks a lot for helping!
非常感谢您的帮助！
回答by Scoobler
In theory your code looks like it would work. But you are telling your fancybox to open an undefined variable link, instead use event.url. Also, instead of using parent.location.reload(this)which is a bit heavy here (you can add events on the fly, so there is no need to reload the entire page), you could do away with the onClosed()event:
从理论上讲，您的代码看起来可以正常工作。但是你告诉你的fancybox打开一个未定义的变量link，而不是使用event.url. 此外，parent.location.reload(this)与其使用which 在这里有点重（您可以即时添加事件，因此无需重新加载整个页面），您可以取消该onClosed()事件：
eventClick: function(event) {
if (event.url) {
$.fancybox({
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'ajax',
'href': event.url
});
.....................
Then in your .ajax()'s successmethod, you could return a json string from your events/events_edit/page (containing the new event data, same style as you add when the page loads), then in the success method use fullcalendars addEventSourceand pass the json object over to be added on to the callendar:
然后在您.ajax()的success方法中，您可以从您的events/events_edit/页面返回一个 json 字符串（包含新的事件数据，与您在页面加载时添加的样式相同），然后在成功方法中使用 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');
}
});
Its difficult to test any of this without having it all setup, but it may give you some ideas to point you towards the right direction.
在没有全部设置的情况下很难测试其中的任何一个，但它可能会给您一些想法，为您指明正确的方向。
回答by pardeep
After Getting Success you just have to just render that event in the calendar.
获得成功后，您只需在日历中呈现该事件。
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);
}
}
