如何在完整日历中的当天点击时显示活动详细信息

How to show event details on click of day in full calendar

本文关键字：显示 详细信息 活动 日历      更新时间：2023-09-26

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

$(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

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

哈哈！最后，我找到了在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);
    }
  }
}

事件点击就是您想要的。

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

参见更新的代码笔

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

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

另一个更新的代码笔点击5月23日

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