FullCalendar 事件仅在月视图中显示

Question

我正在使用 FullCalendar http://fullcalendar.io/ 在网页上显示一些事件。

日历是这样创建的

$('#calendar').fullCalendar({
        header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
        },
        allDayDefault: false,
        selectable: true,
        selectHelper: true,
        editable: true,
        eventLimit: true, // allow "more" link when too many events
   });

事件是通过 renderEvent 操作创建的（不是 json 提要），如

$('#calendar').fullCalendar('renderEvent', newEvent, 'stick');

newEvent 是这样创建的

newEvent = {
                title : 'mytitle',
                start : startDate,
                allDay: false,
                id: eventId,
                description: 'my test event'
            };

问题是事件在月视图中正确显示，但在周视图或日视图中未显示。

更新

我使用的是这种日期格式：2015-02-01T01:00:00

Answer 1

我创建了一个 plunker reproducing your code。我在您的代码中看到的唯一问题是创建事件时预期的逗号。

所以我用一个新的 moment 对象创建事件 - 这意味着现在。

  var startDate = moment();
  var eventId = 123;
  var newEvent = {
                title : 'mytitle',
                start : startDate,
                allDay: false,
                id: eventId,   //Is this comma that was missing in your code
                description: 'my test event'
            };

然后我用与您相同的代码添加它：

$('#calendar').fullCalendar('renderEvent', newEvent, 'stick');

您可以在 plunker 中查看一切正常，因此您提供给我们的代码可能存在的唯一问题：

缺少逗号。
eventId变量错误
startDate变量错误

此外，如果您查看 render event you are not using the 'stick' variable properly. It should be a boolean. In your code is working because as you can check in line 9229 for version 2.3.1 its compared as expression, so any string (non empty) will be true. You can have more info about this in this answer:

的文档

所以，如果你设置第三个参数stick为：

正确
'stick'
'nonstick'
'false'
'whatever'

...总是被解析为置顶，并添加到stickySource。但是，正如@slicedtoad 所评论的那样，您应该更改它以避免在将来的版本中出现问题。

Answer 2

您的代码没有任何问题。但是您正在以非标准的方式做一些事情。尝试修复它们，问题可能会消失。

您用来添加事件的方法不正确。在 FullCalendar 术语中，render 表示将数据显示到日历的过程。因此，当您 renderEvent 时，您只是告诉它 在屏幕上显示 一个事件。然后 stick 让它持续存在（有点）。

您应该使用 addEventSource。它可用于添加任何事件源（本地或远程）。 eventSource 可以是任何东西，从 JSON 提要到一个事件的本地数组。

这应该有效：

$('#calendar').fullCalendar('addEventSource',[{
    title : 'mytitle',
    start : startDate,
    allDay: false,
    id: eventId,
    description: 'my test event'
}]);

这为您提供了一个将持续整个会话的事件。它还具有与所有其他全日历选项和回调很好地配合使用的好处。

Answer 3

我 fiddle 通过使用您的代码并从我这边进行了一些修改。它工作正常。我希望它对你有用。欢迎您的意见。

代码

HTML

<body>
    <div id='calendar'></div>
</body>

脚本

<script type='text/javascript'>
$(document).ready(function(){
    fullCalObj = $('#calendar').fullCalendar({
         header: {
             left: 'prev,next today',
             center: 'title',
             right: 'month,agendaWeek,agendaDay'
         },
         allDayDefault: false,
         selectable: true,
         selectHelper: true,
         editable: true,
         eventLimit: true, // allow "more" link when too many events
     });

    var newEvent = {
        title : 'mytitle',
        start : '2015-04-22',
        allDay: false,
        id: 1,
        description: 'my test event'
    };

    fullCalObj.fullCalendar('renderEvent', newEvent, 'stick');
});
</script>

FullCalendar 事件仅在月视图中显示

FullCalendar events shown in month view only

javascript

jquery

fullcalendar