页面加载时事件未显示

Question

我正在使用通过json调用的FullCalendar，但出现了非常奇怪的问题，这让我很困扰！无法找到解决方法。

我的日历在一个选项卡下。当我点击该选项卡时，日历网格显示出来，但没有事件。如果我点击日历的下个月，然后再返回上个月，所有事件都会正确显示！

如果我导航到另一页，然后再回到日历页面，同样的情况也会发生。必须先进入下一个月和上一个月才能加载事件。

以下是我调用日历的方式：

$(document).ready(function() {
    $('#calendar').fullCalendar({
        editable: false,
        events: "../events_calendar.php",
        loading: function(bool) {
            if (bool) $('#loading').show();
            else $('#loading').hide();
        }
    }); });

有什么想法吗？谢谢。

- Bruno

---

你尝试过通过Firebug或类似工具进行调试吗？fullcalendar手册指出，当日历需要新数据时，将调用事件函数，这发生在上一个/下一个月以及视图更改时。由于日历在用户点击选项卡之前是隐藏的，因此可能无法正确更新或初始化，这种情况是否可能发生？ - gnxtech3

实际上，我刚刚注意到，在使用Firebug时，日历数据是存在的，只是不可见！现在这更奇怪了。我尝试将我的CSS移到页面顶部，将JS移到底部，正如另一个线程中有人建议的那样，但没有成功。 - Bruno

我这里也有同样的问题！使用Firebug，事件已经被接收但是没有被渲染。重新渲染也没有帮助！ - fixitagain

Answer 1

页面加载时，日历可能被隐藏了。

您可以尝试重新渲染事件http://arshaw.com/fullcalendar/docs/event_rendering/rerenderEvents/。

.fullCalendar( 'rerenderEvents' )

或者

为了确保事件正常，您应该连接一个refetchEvent http://arshaw.com/fullcalendar/docs/event_data/refetchEvents/

.fullCalendar( 'refetchEvents' )

这两个事件应该在日历显示并准备好之后才调用，例如...不要在之前调用，因为可能会出现相同的问题。

还有

我认为这个问题已经出现过了——但它可能已经在最新版本中解决了。但是我现在找不到它。尝试在支持中搜索错误。

http://code.google.com/p/fullcalendar/issues/list?can=1&q=

除此之外，您将不得不尝试调整日历加载方式等内容...

- Piotr Kula

Answer 2

你的问题可能是因为FullCalendar正在进行异步请求（这意味着日历可能在数据返回之前加载）。因此，请将其更改为进行同步请求。

而不是这样：

    $(document).ready(function() {
        $('#calendar').fullCalendar({
            editable: false,
            events: "../events_calendar.php",
            loading: function(bool) {
                if (bool) $('#loading').show();
                else $('#loading').hide();
            }    
    }); });

---

可以使用类似这样的代码：

$(document).ready(function() {
    $('#calendar').fullCalendar({
        editable: false,
        eventSources: [
        {
            url: '../events_calendar.php',
            async: false // No longer asynchronous
        }
    ],
        loading: function(bool) {
            if (bool) $('#loading').show();
            else $('#loading').hide();
        }
    }); });

与在http://arshaw.com/fullcalendar/docs/event_data/events_json_feed/找到的示例进行比较

- Shiroken11

Answer 3

我曾经遇到过同样的问题（请参见我在原始帖子中的评论），并找出了原因。我的JSON事件是这样的，如果不作为AJAX调用（即JSON是参数“events”的值），则可以完美地呈现：

 [{id:2317,title:"test",start:"2011-06-08 09:00:00.0",end:"2011-06-08 11:00:00.0",allDay:false,url:"log/show/2317",backgroundColor: 'green'}]

然而，当通过ajax调用时，它不起作用。为了使其工作，请将您的json属性名称放在双引号“…”之间。注意不要使用单引号，因为它也不起作用。我的下面提到的json变成：

[{"id":2317,"title":"test","start":"2011-06-08 09:00:00.0","end":"2011-06-08 11:00:00.0","allDay":false,"url":"log/show/2317","backgroundColor": "green"}]

希望能对你有所帮助！

- fixitagain