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

大家好我有事件arrays，点击一天我想在另一个面板中显示事件详情。 我有数组格式的数组，我没有得到如何渲染这个以获取事件的所有细节，包括在点击日的子数组详细信息。 请查看您是否可以帮助我，或者可以在其中提出建议。 这是我的代码如下。

$(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('' + event.products[i].name + ''); }; }, 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); } } } 

Answer 2

事件点击是您正在寻找的。

 eventClick: function(calEvent, jsEvent, view) { console.log('Event: ' + calEvent.title); console.log('Event: ' + calEvent.products[0].name); } 

查看更新的codepen

这是如何循环所有产品名称：

  for (var i = 0;i < calEvent.products.length;i++){ console.log('Event: ' + calEvent.products[i].name); } 

要在面板中插入属性，您可以执行以下操作：

 eventClick: function(calEvent, jsEvent, view) { // this is a little function to manipulate the dom function insert(title, product){ var dom = $("#insert_here") var template = ''+product+''+title+'Cancel' dom.append(template); }; // this is the loop for (var i = 0;i < calEvent.products.length;i++){ //console.log('Event: ' + calEvent.products[i].name); insert(calEvent.title, calEvent.products[i].name); } } 

另一个更新的codepen点击可能，23日

Answer 3

 $(document).ready(function(){ $('.fc-button-group').click(function() { //write code here }); });