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 feed）创建的，如

$('#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。我在代码中看到的唯一问题是在创建事件时需要的逗号。

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

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

正如你可以检查一下，一切都工作正常，所以你提供给我们的代码唯一的问题可能是：

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

此外，如果你看一下render event的文档，你没有正确使用'stick'变量。它应该是一个布尔值。在您的代码中工作是因为您可以检查line 9229 for version 2.3.1其比较为表达式，因此任何字符串（非空）都将为true。您可以在此答案中获得有关此内容的更多信息：https://stackoverflow.com/a/4923684/2686163

因此，如果将第三个参数设置为：

真
'棒'
'不粘'
'假'
'无论'

...始终以粘性方式解析，并添加到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'
}]);

这会给你一个持续整个会话的事件。它还具有与所有其他fullcalendar选项和回调良好匹配的好处。

Answer 3

我通过使用您的代码并在我身边做了一些修改来制作fiddle。它工作正常。我希望它对你有用。欢迎您的意见。

代码

<强> HTML

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

<强> SCRIPT

<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事件仅在月视图中显示

3 个答案: