jQuery fullCalendar + Fancybox 弹出编辑事件

2022-01-20 00:00:00 popup jquery javascript fullcalendar fancybox

我正在使用此代码在 fullCalendar 上生成事件

I am generating events on fullCalendar with this code

<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.

现在我需要在 jQuery Fancybox 弹出窗口中进行编辑.

Now I need to edit inside a jQuery Fancybox popup.

基于 fullCalendar API，我会使用

Based on the fullCalendar API, I would use

eventClick: function(event) {
        if (event.url) {
            window.open(event.url);
            return false;
        }
    }

我在整个项目中使用这个 Fancybox 代码来成功编辑弹出窗口中的其他内容:

I am using this Fancybox code throughout the project to successfully edit other things inside popups:

$.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 脚本中.

But I haven't been able to integrate it into the fullCalendar script.

例如这不起作用:

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?

非常感谢您的帮助！

推荐答案

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

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:

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

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

Then in your .ajax()'s success method, 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 addEventSource and pass the json object over to be added on to the 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.

相关文章