FullCalendar 为单击显示的事件以及在月视图上单击日期提供 JavaScript 事件。
不过,我想要的是,如果单击某个日期,我可以触发对该日期内第一个包含的事件的单击。这是为了以防有人点击或点击(在手机上)并错过了事件本身并点击了单元格。
如果事件在单元格的 DOM 内呈现,那将是一件简单的事情,但 FullCalendar 会在月份显示之外呈现事件并将它们覆盖在月份网格上。
另一种方法是在缓存数据中搜索要触发的正确事件,但我希望有一个更优雅的解决方案。
FullCalendar 为单击显示的事件以及在月视图上单击日期提供 JavaScript 事件。
不过,我想要的是,如果单击某个日期,我可以触发对该日期内第一个包含的事件的单击。这是为了以防有人点击或点击(在手机上)并错过了事件本身并点击了单元格。
如果事件在单元格的 DOM 内呈现,那将是一件简单的事情,但 FullCalendar 会在月份显示之外呈现事件并将它们覆盖在月份网格上。
另一种方法是在缓存数据中搜索要触发的正确事件,但我希望有一个更优雅的解决方案。
FullCalendar 在将日期或事件与代表它们的 DOM 元素相关联方面似乎对我们没有任何帮助。没关系:我们可以自己做。
工作示例:http: //jsfiddle.net/nNjFb/
var $calendar = $('#calendar');
$calendar.fullCalendar({
dayClick: function (date) {
// Create a string representing just the day/month/year of the date clicked
dateString = date.getDate() + date.getMonth() + date.getFullYear();
// Grab the events for that day using a custom filter function
events = $('#calendar').fullCalendar('clientEvents', function (event) {
eventDate = event.start;
eventDateString = eventDate.getDate() + eventDate.getMonth() + eventDate.getFullYear();
return dateString === eventDateString;
});
if (events.length) {
// Find the first event's element by its class name
var $event = $calendar.find('.' + events[0]._id);
$event.trigger('click');
}
},
eventClick: function (event) {
console.log('event click!', event);
},
eventRender: function(event, element) {
// Every time an event is rendered,
// add its id as a class name so that
// we can find it later
$(element).addClass(event._id);
}
});
// Add some events
var newEvent1 = {
title: 'first event',
start: new Date('October 31 2013 4:00 PM EST'),
allDay: false
};
var newEvent2 = {
title: 'second event',
start: new Date('October 31 2013 6:00 PM EST'),
allDay: false
};
$calendar.fullCalendar('renderEvent', newEvent1);
$calendar.fullCalendar('renderEvent', newEvent2);
这里有两个键:
使用 eventRender 挂钩将有用的类名附加到与事件关联的 dom 元素。
使用 clientEvents 方法和自定义过滤器来获取与点击日期匹配的事件数组。