Question

我正在尝试设置一个日历，其中businessHours可以全年变化。例如，一家冰淇淋店，营业时间为下午12：00-10：00。每年5月30日至10月1日。我已经想出如何通过ajax调用从服务器中提取营业时间;但我想确保如果用户在businessHours更改的视图之间移动，他们会更新。再次使用冰淇淋店的例子，如果用户在5月30日之前的一周开始，然后导航到5月30日这一周，那么businessHours应该会改变。

为此，我在viewRender的函数中使用了jquery的$ .post（如下所示）

viewRender: function(view, element){
               $.post("calendar_constraint_ajax.php", {start:    view.start.format(), end: view.end.format()}, function(json_bh) {
                if(json_bh != 'error')
                {
                    var bh = JSON.parse(json_bh);
                    $('#calendar').fullCalendar('option', {businessHours: bh, selectConstraint: "businessHours"});
                }
            });
        }

我得到了我期望的营业时间变化。但是有些东西反复调用服务器：view of Network in Chrome Developer Tools

当我不包含AJAX调用时，这似乎只运行一次，但是使用$ .post，它似乎陷入无限循环。

我有两个问题： 1.）为什么一直在调用服务器？ 2.）当日期范围发生变化时，是否有更好的方法来更新businessHours属性？（我仍然是fullCalendar的新手。）

Answer 1

看起来像未解决的问题 https://github.com/fullcalendar/fullcalendar/issues/3519

所以我交替地解决了这个问题。

viewRender: () => {
    if(!this.initComplte) {
        this.renderCalendarEvents();
        this.initComplte = true;
    }
})

Answer 2

viewRender多次触发，因为事件会在几种情况下触发。

以下是有关viewRender的信息：

当用户更改视图或何时更改视图时，将触发回调任何日期导航方法都被调用。

所以很有可能你在另一个函数中调用它 - 没有意识到它。

您可以尝试使用eventAfterAllEvents更新小时数以防止重复调用：

https://fullcalendar.io/docs/event_rendering/eventAfterAllRender/

Answer 3

我为prev，next和我允许的视图构建了自己的按钮，以便在呈现之前我可以做其他事情。有关我开始使用的文档中的示例，请参阅https://fullcalendar.io/docs/current_date/prev/。我把它实现为：

$('#prev').click(function(){
        $('#calendar').fullCalendar('prev');
        getBusinessHours($('#calendar').fullCalendar('getView').start.format(), $('#calendar').fullCalendar('getView').end.format());
    });

将getBusinessHours定义为：

function getBusinessHours(start_dt, end_dt)
{
    $.post("calendar_constraint_ajax.php", {start: start_dt, end: end_dt, rid: '<?=utilities::encode($rid);?>'}, function(json_bh) {
        if(json_bh != 'error')
        {
            var bh = JSON.parse(json_bh);
            //console.log(bh);
            $('#calendar').fullCalendar('option', {businessHours: bh, selectConstraint: "businessHours"});
        }
    });
}

从服务器提取给定日期范围的营业时间。

感谢所有回答此问题的人，感谢您的意见/答案。它帮助我找到了解决方案。

fullCalendar viewRender在无限循环中使用ajax

3 个答案: