如何触发对完整日历日单元格中第一个包含的事件的点击答案

【问题标题】：how to trigger a click on first contained event in a fullcalendar day cell如何触发对完整日历日单元格中第一个包含的事件的点击
【发布时间】：2013-10-31 23:50:05
【问题描述】：

FullCalendar 为单击显示的事件以及在月视图上单击日期提供 JavaScript 事件。

不过，我想要的是，如果单击某个日期，我可以触发对该日期内第一个包含的事件的单击。这是为了防止有人点击或点击（在手机上）并错过了事件本身并点击了单元格。

如果事件在单元格的 DOM 中呈现，那将是一件简单的事情，但 FullCalendar 会在月份显示之外呈现事件并将它们覆盖在月份网格上。

另一种方法是在缓存数据中搜索要触发的正确事件，但我希望有一个更优雅的解决方案。

【问题讨论】：

您有机会查看我对您问题的回答吗？

标签： jquery fullcalendar

【解决方案1】：

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 方法和自定义过滤器获取与点击日期匹配的事件数组。

【讨论】：