在 jQuery Fullcalendar 中，如何在日历下方显示当前月份视图的事件列表

Question

我的全日历在月视图中运行良好，但我也想要当月的事件列表(由导航日历月触发(。

这是我当前的日历：

jQuery( document ).ready(function() {
jQuery('#cwcalendar').fullCalendar({
events: 'http://xxxxx.com/json-page.php',
color: '#d81f59',
eventColor: '#d81f59',
theme: true,
firstDay: 1,
height: 400,
columnFormat: {
month: 'dd' 
},
header: {
left:   'prev',
center: 'title',
right:  'next'
},
buttonIcons: {
prev: 'left-single-arrow',
next: 'right-single-arrow',
prevYear: 'left-double-arrow',
nextYear: 'right-double-arrow'
},
views: {
month: {
titleFormat: 'MMMM YYYY'
}
},
eventRender: function (event, element) {
var dataToFind = moment(event.start).format('YYYY-MM-DD');
jQuery("td[data-date='"+dataToFind+"']").addClass('activeDay');
},
eventMouseover: function(calEvent, jsEvent) {
var tooltip = '<div class="tooltipevent" style="width:100px;height:60px;padding:8px;background:#fff;position:absolute;z-index:10001;border-style:solid;border-width:1px;border-radius:5px;border-color:#d81f59;">' + calEvent.title + '</div>';
jQuery("body").append(tooltip);
jQuery(this).mouseover(function(e) {
jQuery(this).css('z-index', 10000);
jQuery('.tooltipevent').fadeIn('500');
jQuery('.tooltipevent').fadeTo('10', 1.9);
}).mousemove(function(e) {
jQuery('.tooltipevent').css('top', e.pageY + 10);
jQuery('.tooltipevent').css('left', e.pageX + 20);
});
},
});

可用的视图是 listMonth，但在单独的日历中像这样使用时不会显示：

defaultView: 'listMonth'

问题是，我是否致力于在列表视图中创建一个单独的日历，如果是，我该如何集成它，以便列表根据日历中的月份选择进行更改。还是有其他方法可以做到这一点？

非常感谢任何帮助

Answer 1

使用 clientEvents，您可以获取当前视图的事件数组。使用 viewRender，您可以在视图更改时收到通知。

演示 @ https://jsfiddle.net/smcnma7j/

$(document).ready(function() {
var event_list = $('#event_list');
$('#calendar').fullCalendar({
// mock events for demo
events: function(start, end, tz, callback) {
var events = [];
var num_events = Math.floor(Math.random() * 25) + 10;
for (var i = 0; i < num_events; i++) {
events.push({
start: moment(start).add(Math.random() * 30, 'days'),
title: 'Event that starts on'
});
}
callback(events);
},
// every time the view updates, update the event list
viewRender: function(view, element) {
var events = $('#calendar').fullCalendar('clientEvents');
handleViewChange(events);
}
});
function handleViewChange(events) {
event_list.html('');
var ul = $('<ul/>');
$.each(events, function(index, event) {
var li = $('<li/>');
li.text(event.title + ' ' + event.start.format());
ul.append(li);
});
event_list.html(ul);
}
});