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等）我用这个函数来渲染我的事件，这是我的工作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);
    }
  }
}

Answer 2

event click是您正在寻找的。

eventClick: function(calEvent, jsEvent, view) {

      console.log('Event: ' + calEvent.title);
      console.log('Event: ' + calEvent.products[0].name);
}

请参阅updated 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 = '<tr><td class="o-box-name">'+product+'</td><td><a href="" class="postpone-del-text">'+title+'</a></td><td><a href="" class="cancel-del-text">Cancel</a></td></tr>' 
        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);
      }
}

Another updated codepen 点击5月23日，

Answer 3

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

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

3 个答案: