Javascript 无法使用fullcalendar选择所有的\u day \u插槽
我正在使用创建一个日历,我的用户可以在其中指出他的争议。我已经设置了日历,因此有所有可用的日时段。它们在日历上显示正确,但我无法选择它们。在select回调中有什么特殊的指定吗 是否也可以设置fullcalendar,以便当用户选择allDaySlot时,与该天相关的整行显示为选中Javascript 无法使用fullcalendar选择所有的\u day \u插槽,javascript,jquery,fullcalendar,Javascript,Jquery,Fullcalendar,我正在使用创建一个日历,我的用户可以在其中指出他的争议。我已经设置了日历,因此有所有可用的日时段。它们在日历上显示正确,但我无法选择它们。在select回调中有什么特殊的指定吗 是否也可以设置fullcalendar,以便当用户选择allDaySlot时,与该天相关的整行显示为选中 $(document).ready(function() { // page is now ready, initialize the calendar... var array_dispo = [];
$(document).ready(function() {
// page is now ready, initialize the calendar...
var array_dispo = [];
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
lang: "fr",
header: false,
timezone: 'local',
minTime: "08:00:00",
columnFormat: 'dddd',
selectHelper: true,
selectable: true,
allDaySlot: true,
select: function(start, end, allDay) {
var eventData = {
// allDay: allDay,
start: start,
end: end,
block: true,
editable: true,
backgroundColor: "#469278"
};
var mEnd = $.fullCalendar.moment(end);
var mStart = $.fullCalendar.moment(start);
if (mEnd.isAfter(mStart, 'day')) {
$('#calendar').fullCalendar('unselect');
} else {
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
console.log(eventData);
var array_all_events = [];
var all_events = $('#calendar').fullCalendar('clientEvents');
$.each(all_events, function(index, value) {
var day = moment(value.start["_d"]).format('dddd');
var start_time = moment(value.start["_d"]).format("HH:mm");
var end_time = moment(value.end["_d"]).format("HH:mm");
var slot = {
day: day,
start_time: start_time,
end_time: end_time,
};
array_all_events.push(slot);
$("#dispo_array").val(JSON.stringify(array_all_events));
});
$('#calendar').fullCalendar('unselect');
}
},
eventClick: function(event, element) {
if(confirm('Voulez-vous supprimer cette dispo?')) {
$('#calendar').fullCalendar('removeEvents', event._id);
var array_all_events = [];
var all_events = $('#calendar').fullCalendar('clientEvents');
// console.log(all_events);
$.each(all_events, function(index, value) {
// console.log(value.start["_d"]);
// console.log(index);
var day = moment(value.start["_d"]).format('dddd');
var start_time = moment(value.start["_d"]).format("HH:mm");
var end_time = moment(value.end["_d"]).format("HH:mm");
// var id = value.unique_id["_i"];
var slot = {
day: day,
start_time: start_time,
end_time: end_time,
};
array_all_events.push(slot);
console.log(array_all_events.length);
if (array_all_events.length == 0) {
$("#dispo_array").val("");
}
else {
$("#dispo_array").val(JSON.stringify(array_all_events));
}
});
}
},
eventDragStop: function( event, jsEvent, ui, view ) {
// console.log(event);
var all_events = $('#calendar').fullCalendar('clientEvents');
},
selectOverlap: function(event) {
return ! event.block;
}
});
});
我犯了一个错误
下面是一段:
...
var mEnd = $.fullCalendar.moment(end);
var mStart = $.fullCalendar.moment(start);
if (mEnd.isAfter(mStart, 'day')) {
$('#calendar').fullCalendar('unselect');
} else {
...
导致全天事件立即取消选择,因为这些事件的条件mEnd>mStart
始终为真
如果你换成
...
var mEnd = $.fullCalendar.moment(end);
var mStart = $.fullCalendar.moment(start);
// just uncommented this:
/*if (mEnd.isAfter(mStart, 'day')) {
$('#calendar').fullCalendar('unselect');
} else*/
{
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
...
全天事件得到正确渲染<代码>标题是必需的,所以我添加了这个
另一种方法是将默认事件持续时间设置为0
,但我还没有对此进行测试,请参见此处
编辑
看看这把小提琴:
多方面:
- 瞬间事件是可变的,因此在修改它们之前需要克隆
- 当时间为UTC时,时区设置为“本地”,这导致所有事件的第二天都有2小时的轮班时间。将其设置为“UTC”将重叠时间固定到第二天
- 取消选择的逻辑被完全删除,因为它是不必要的
从我的角度来看,它现在的行为符合我的要求:单击全天时段或选择任何时间框架总是“选择”全天并阻止它ok,那么相关的问题就是如何设置全天事件以我的最小时间开始,以我的最大时间结束全天事件都是未计时事件。从最小时间开始到最大时间结束的事件不是全天的事件,这是一个矛盾。您有一个全天事件,或者您有一个特定的开始和结束时间。但正如您所说:“这会导致在全天事件上立即取消选择,因为条件
mEnd>mStart
对于这些事件始终为真。”当我在控制台中检查对象时,mStart&mEnd指定开始和结束时间是,真,但是你可以看文件。如果属性“allDay”设置为true,则视为未设置这些开始和结束时间。这确实有点让人困惑:而且当用户选择一个全天时段时,我们并不完全清楚您想要实现什么,我只是在我的示例中将其设置为“可选择”。可能是一个定义问题:从00:00到23:59的事件正好持续一天,但它不是“全天”了解fullcalendar(甚至不是outlook和Google Calendar)中的事件。“全天活动”是指在给定日期“没有特定开始或结束时间”的活动。