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。此外，不是使用{em>这里有点重的parent.location.reload(this)（你可以动态添加事件，所以不需要重新加载整个页面），你可以取消onClosed()事件：

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

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

events/events_edit/

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

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);  

                      }  
                    }

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

2 个答案: