可能是一个显而易见的问题,但我在FullCalendar API,SO和谷歌搜索没有结果。我想知道是否可以将每个事件的默认单元格视图更改为FullCalendar?
例如,我的当前事件单元格仅显示我从数据对象解析的时间和标题。当我尝试解析对象中的更多数据时,我无法将它们显示在日历单元格中
events: [
{
title: 'All Day Event',
start: '2015-02-01'
morecontent : 'MORE CONTENT' // How to display this??
},
{
title: 'Long Event',
start: '2015-02-07',
end: '2015-02-10'
morecontent : 'MORE CONTENT' // and this??
}
];
答案 0 :(得分:1)
您可以在eventRender
期间更改单元格,这是在呈现事件时触发的(docs)。
下面的代码会找到该特定事件的标题,并将html替换为标题+更多内容:
eventRender: function(event, element) {
$(element).find('.fc-title').html(event.title + ', ' + event.morecontent);
}
这是一个有效的版本:
$('#fullCal').fullCalendar({
events: [{
title: 'Random Event 1',
start: moment().add(-4, 'h'),
end: moment().add(-2, 'h'),
morecontent: 'Eat Pizza',
allDay: false
}, {
title: 'Random Event 2',
start: moment().add(1, 'd'),
end: moment().add(2, 'd'),
morecontent: 'Drink Coffee',
allDay: false
}, {
title: 'Random Event 3',
start: moment().add(6, 'd'),
end: moment().add(8, 'd'),
morecontent: 'Hackathon',
allDay: false
}],
header: {
left: '',
center: 'prev title next today',
right: ''
},
eventRender: function(event, element) {
$(element).find('.fc-title').html(event.title + ', ' + event.morecontent);
},
timezone: 'local'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>
<div id="fullCal"></div>
答案 1 :(得分:0)
似乎到目前为止,您的JSON(来自数据库)正在创建您在上面提供的代码。如果是这样,那么morecontent
中的任何内容都应该已经作为结果传递给你的fullcalendar对象。
测试用途:
eventClick: function(calEvent, jsEvent, view) {
console.log(calEvent);
}