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

Question

我正在使用此代码在 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>

这对于数据显示效果很好。当我单击该事件时，会加载一个新页面以供编辑。

现在我需要在 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) （您可以动态添加事件，因此无需重新加载整个页面）< /em>，您可以取消 onClosed() 事件：

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

然后在 .ajax() 的 success 方法中，您可以从您的 events/events_edit/ 页面返回一个 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);  

                      }  
                    }