Jquery 如何在fullcalendar day单元格中触发单击第一个包含的事件

Jquery 如何在fullcalendar day单元格中触发单击第一个包含的事件,jquery,fullcalendar,Jquery,Fullcalendar,FullCalendar为单击显示的事件和在月视图上单击日期提供JavaScript事件 不过,我希望,如果单击某个日期,我可以触发该日期内包含的第一个事件的单击。这是为了防止有人点击或轻触(电话)而错过了活动本身,而是点击手机 如果事件是在单元格的DOM中呈现的,这将是一件简单的事情,但是FullCalendar会在月份显示之外呈现事件,并将其覆盖在月份网格上 另一种方法是在缓存数据中搜索要触发的正确事件,但我希望有一个更优雅的解决方案。FullCalendar在将日期或事件与表示它们的DOM

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

不过,我希望,如果单击某个日期,我可以触发该日期内包含的第一个事件的单击。这是为了防止有人点击或轻触(电话)而错过了活动本身,而是点击手机

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


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

FullCalendar在将日期或事件与表示它们的DOM元素关联方面似乎对我们没有任何帮助。没关系,我们可以自己做

工作示例:

这里有两个关键点:

  • 使用eventRender钩子将有用的类名附加到与事件关联的dom元素

  • 使用clientEvents方法和自定义筛选器获取与单击的日期匹配的事件数组


  • 你有机会看看我对你问题的回答吗?
    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);