将数据传递给 FullCalendar 中的后台事件对象

Posted

技术标签:

【中文标题】将数据传递给 FullCalendar 中的后台事件对象【英文标题】:Passing data to background event object in FullCalendar 【发布时间】:2015-11-07 16:00:52 【问题描述】:

当用户点击后台事件时,有没有办法获取我传递给 eventObj 的数据? 我的示例背景事件如下所示:


 id: 'availableForMeeting',
 title: 'Test Background Event #1',
 start: '2015-08-13T07:30:00',
 end: '2015-08-13T12:30:00',
 rendering: 'background',
 sampleId: 214,
 color: 'red'

但我无法获取 sampleId 字段,因为它在 jsEvent 中不存在。

【问题讨论】:

【参考方案1】:

首先,为了真正获得背景事件的点击处理程序,您必须使用委托的 jquery .on(),因为 FullCalendar 的 eventClick 不适用于背景事件。

$("#calendar").on("click",".fc-bgevent",function(event)
    console.log($(this).data());
);

这样,您将获得一个空的控制台日志。我们需要将事件数据添加到事件元素。我们可以在eventRender中做到这一点

eventRender: function(event,element,view)
    $(element).data(event);
,

工作JSFiddle

【讨论】:

【参考方案2】:

接受的答案对我不起作用,因为由于多个问题(z-indexheight)而无法触发点击。我想我找到了一个更清洁的解决方案。

解决方法是使用fullcalendarclientEvents方法。它将使用events 的客户端副本。所以没有额外的api 电话。

selectdayClick 在选择日期时都会被触发。因此,请选择最适合您需求的那一款。我认为select 是一个不错的选择,因为如果需要,它也会在多天的选择中被解雇。

    select: function (startDate, endDate, jsEvent, view, resource) 

       //below code for passing events in bg events of fullcalender
                          var events = $('#calendar').fullCalendar('clientEvents', function (evt) 
                        //if same date as clicked date add element to events array
                          return evt.start.isSame(startDate);//must return boolean
                    );



                    console.log(events);

希望这对某人有所帮助。

【讨论】:

以上是关于将数据传递给 FullCalendar 中的后台事件对象的主要内容,如果未能解决你的问题,请参考以下文章

将数据传递给 Angular 中的其他页面/组件

如何将数据传递给BottomSheetDialogFragment [重复]

php 将数据传递给Laravel中的视图的不同方法

将数据传递给 laravel 中的引导模式

SwiftUI 将数据传递给子视图

如何将数据传递给 vue.js 中的子组件