javascript - 如何在完整日历中点击日期显示事件详细信息

Question

大家好，我有事件数组，点击当天我想在另一个面板中显示事件详细信息。我有数组格式的数组，我不知道如何渲染它以获取事件的所有详细信息，包括单击当天的子数组详细信息。请看看您是否可以帮助我解决这个问题，或者可以在其中提出一些建议。下面是我的代码。

$(window).load(function() {
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        eventRender: function(event, element, view) {
            for (var i = 0; i <= event.products.length - 1; i++) {
                element.append('<span>' + event.products[i].name + '<span>');
            };
        },
        events: [{
            title: 'EventName',
            start: '2016-05-02',
            products: [{
                name: 'ProductName'
            }]
        }, {
            title: 'Event',
            start: '2016-05-03',
            products: [{
                name: 'ProductName1'
            }, {
                name: 'ProductName2'
            }, {
                name: 'ProductName3'
            },]
        }, {
            title: 'EventName',
            start: '2016-05-13',
            products: [{
                name: 'ProductName1'
            }, {
                name: 'ProductName2'
            }]
        }, {
            title: 'Event',
            start: '2016-05-15',
            products: [{
                name: 'ProductName'
            }]
        }, {
            title: 'EventNAme',
            start: '2016-05-21',
            products: [{
                name: 'ProductName1'
            }, {
                name: 'ProductName2'
            }]
        }, {
            title: 'Event',
            start: '2016-05-23',
            products: [{
                name: 'ProductName1'
            }, {
                name: 'ProductName2'
            }]
        }, {
            title: 'Eventname',
            start: '2016-05-25',
            products: [{
                name: 'ProductName'
            }]
        }, {
            title: 'Event',
            start: '2016-05-29',
            products: [{
                name: 'ProductName'
            }]
        }],
        dayClick: function(date, allDay, jsEvent, view) {
            console.log('date' + date.format('DD/MMM/YYYY') + "allDay" + allDay.title + "jsEvent" + jsEvent + "view" + view)
        }
    });
})

如果您看到我有事件数组，每个事件都有产品数组，那么每当我点击日期时，我都想显示标题，以及产品详细信息，如产品名称。以下是我迄今为止对日历的尝试。

所以当我点击有我想要显示的事件的任何一天我不想在点击事件时显示，我现在需要全天可点击根据下面的答案它只显示点击事件。

事件标题产品名称

代码太长所以我创建了代码笔请看看你是否可以编辑这个，提前谢谢 DEMOTRIAL

Answer 1

啊哈!最后我找到了在 dayClick 上呈现事件的解决方案。有一个叫做 clientEvents 对象的东西允许我们在任何完整的日历操作(比如 dayClick、eventClick 等)中获取事件我用那个函数来呈现我的事件，这是我的工作 demo ...

下面是我急切搜索的 dayClick 代码

dayClick: function(date, allDay, jsEvent, view) {
  $('#calendar').fullCalendar('clientEvents', function(event) {
    // match the event date with clicked date if true render clicked date events
    if (moment(date).format('YYYY-MM-DD') == moment(event._start).format('YYYY-MM-DD')) {
      // do your stuff here
      console.log(event.title);

      // if you have subarray i mean array within array then 
      console.log(event.subarray[0].yoursubarrayKey);
    }
  }
}