如何在完整日历中显示点击日期的活动详情

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)
        }
    });
})

如果您看到我有事件数组并且每个事件都有产品数组,那么每当我点击日期时我想要显示标题,以及产品详细信息,如同名产品.这是我迄今为止尝试过的日历.

因此,当我点击任何有活动的日子,我想要显示我不希望在点击事件时显示,我现在需要整天点击,根据下面的答案它只在点击事件时显示.

事件标题product_name

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

Answer 1

AHAA!最后,我找到了在dayClick上呈现事件的解决方案.有一个叫做clientEvents的对象,它允许我们在任何完整的日历操作(比如dayClick,eventClick等)中获取事件.我用这个函数来渲染我的事件,这是我的工作演示 ......

和我热切搜索的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);
    }
  }
}