完整日历 - 获取当天单击的背景事件

Question

我目前正在尝试在触发DayClick时获取事件(background类型(。 由于背景类型，我无法使用 EventClick 触发器(我不知道为什么，但我的情况什么也没发生，FullCalendar 出了点问题？

这是我的初始化代码：

$('#calendarRoomUnavailable').fullCalendar({
height: 'auto',
header: {
left : '',
center: 'title',
right: ''
},
defaultView: 'year',
defaultDate: getDateFilterRoomAvailable(),
lang: 'fr',
firstDay: 1,
columnFormat: 'ddd D/M',
selectable : false,
weekends: false,
navLinks : false,
events: basePath + '/agenda/datalist/room_available',
viewRender: function (view, element) {
},
eventRender: function(event,element){
if(event.rendering === "background"){
element.data(event); //store the event data inside the element
}
},
dayClick: function (date, jsEvent, view) {
console.log(jsEvent)
},
editable:false,
});

快速浏览

我想要什么：

当我点击某一天时，我想获取与该天相关的事件(背景((我的日历中每天只有一个事件(。

目前我正在使用事件渲染 + dayClick ：

eventRender: function(event,element){
if(event.rendering === "background"){
element.data(event); //store the event data inside the element
}
},
dayClick: function (date, jsEvent, view) {
console.log(jsEvent)
[...] 
}

使用控制台.log JSEvent on the DayClick，我知道它让我<td>错误： 图像

因为，当我尝试使用类fc-bgevent获取目标<td>时，没有任何反应：

dayClick: function (date, jsEvent, view) {
console.log(jsEvent)
if (jsEvent.target.classList.contains('fc-bgevent')) {
console.log($(jsEvent.target).data());
}

如果我尝试转到 HTML 元素targetjsEvent获取，它向我显示错误的<td>，我对此无能为力......

网页调试

有人知道如何绕过它吗？

谢谢！

从日期获取一个事件的代码：

function getEventFromDate(date) {
var allEvents = [];
allEvents = $('#calendarRoomUnavailable').fullCalendar('clientEvents');
var event = $.grep(allEvents, function (v) {
return +v.start === +date;
});
if (event.length > 0) {
return event[0];
} else {
return null;
}
}

Answer 1

在@ADyson注释之后，我的最后一个函数看起来像这样：

function getEventFromDate(date) {
var eventToReturn = null;
$('#calendarRoomUnavailable').fullCalendar('clientEvents', function(event) {
var event_start = formatDateYmd(new Date(date),'-');
var date_formated = formatDateYmd(new Date(event.start),'-');
if(event_start === date_formated) {
eventToReturn = event;
}
});
return eventToReturn;
}

使用一个小函数来获取格式化日期，而无需像 Moment.js或 Date.js 这样的库：

function formatDateYmd(value,$delimiter)
{
var year = value.getFullYear();
var month = (value.getMonth()+1) < 10 ? '0'+(value.getMonth()+1) : (value.getMonth()+1);
var day = value.getDate() < 10 ? '0'+value.getDate() : value.getDate();
return year  + $delimiter +
month + $delimiter +
day;
}

我希望找到性能更高的东西，但这个将执行时间除以 2。

密切关注它

再次感谢。