我正在使用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
发布于 2015-04-17 15:54:02
我已经创建了一个plunker reproducing your code。我在您的代码中看到的唯一问题是在创建事件时需要一个逗号。
所以我用一个新的moment对象创建了一个事件,-which表示现在。
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中签入它的比较as表达式,因此任何字符串(非空)都将为真。您可以在以下答案中了解更多信息:https://stackoverflow.com/a/4923684/2686163
因此,如果将第三个参数设置为:
..。始终作为粘性进行解析,并添加到stickySource
中。但是,正如@slicedtoad所评论的那样,您应该对其进行更改,以避免在未来的版本中出现问题。
发布于 2015-04-17 21:11:27
您的代码没有任何错误。但是你正在以一种非标准的方式做一些事情。试着修复它们,问题可能就会消失。
您用来添加事件的方法不正确。在FullCalendar术语中,render
是指将数据显示到日历的过程。所以当你renderEvent
的时候,你只是告诉它在屏幕上显示一个事件。然后stick
让它持久化(某种程度上)。
相反,您应该使用addEventSource
。它可用于添加任何事件源(本地或远程)。eventSource可以是任何东西,从JSON feed到一个事件的本地数组。
这应该是可行的:
$('#calendar').fullCalendar('addEventSource',[{
title : 'mytitle',
start : startDate,
allDay: false,
id: eventId,
description: 'my test event'
}]);
这将为您提供一个将持续整个会话的事件。它还有一个好处,就是可以很好地处理所有其他完整的日历选项和回调。
发布于 2015-04-22 12:15:49
我使用你的代码,在我这边做了一些修改,从而制作了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>
https://stackoverflow.com/questions/29575627
复制相似问题