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

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

有什么建议如何完成这项工作吗？

非常感谢您的帮助！

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

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

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

$.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'); 
    }
});

在没有完成所有设置的情况下很难测试其中的任何一个，但它可能会给您一些想法来引导您走向正确的方向。