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)哪个有点重(你可以动态添加事件,所以不需要重新加载整个页面),你可以取消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'); 
    }
});

如果不进行全部设置,很难对其进行测试,但它可能会给你一些想法,指出你正确的方向.