使用选择约束限制全日历中的可选框
Limit selectable boxes in FullCalendar with selectConstraint
我有一个预约模块。我使用完整日历。我用"事件"设置可用时间。每天,我都有不同的可用时间
$('#calendar').fullCalendar({
header: {
left: 'prev',
center: 'title',
right: 'agendaWeek agendaDay next'
},
defaultView: 'agendaWeek',
events:
[
{
start: '00:00:00+02:00',
end: '08:00:00+02:00',
color: 'gray',
rendering: 'background',
dow: [1]
},
{
start: '12:00:00+02:00',
end: '14:00:00+02:00',
color: 'gray',
rendering: 'background',
dow: [4]
},
{
start: '12:00:00+02:00',
end: '23:59:59+02:00',
color: 'gray',
rendering: 'background',
dow: [3]
},
{
start: '17:00:00+02:00',
end: '23:59:59+02:00',
color: 'gray',
rendering: 'background',
dow: [2]
},
],
defaultTimedEventDuration: '01:00:00',
height: 'auto',
handleWindowResize: true,
allDaySlot: false,
slotDuration: '01:00:00',
minTime: "07:00:00",
maxTime: "22:00:00",
slotEventOverlap: false,
nowIndicator: true,
columnFormat: 'dddd DD MMM',
titleFormat: 'D MMMM YYYY',
displayEventTime: true,
displayEventEnd: true,
eventLimitText: "Détails",
eventClick: function (event, jsEvent, view) {
$('#modalTitle').html(event.title);
$('#modalBody').html(event.start.format('D-MM-YYYY'));
$('#modalStart').html(event.start.format('HH:mm'));
$('#modalMotif').html(event.motif);
$('#modalInfo').html(event.info);
$('#modalEtat').html(event.etat);
$('#modalTel').html(event.tel);
$('#modalAdresse').html(event.adresse);
$('#calendarModal').modal();
},
selectable: true,
selectHelper: true,
select: function (start, end, allDay) {
endtime = moment(end).format('DD/MM/YYYY HH:mm');
starttime = moment(start).format('DD/MM/YYYY à HH:mm');
starttime2 = moment(start).format('YYYY-MM-DD HH:mm:ss');
var mywhen = starttime;
var mywhen2 = starttime2;
$('#createEventModal #apptStartTime').val(mywhen2);
$('#createEventModal #apptEndTime').val(end);
$('#createEventModal #apptAllDay').val(allDay);
$('#createEventModal #when').text(mywhen);
$('#createEventModal').modal();
}
});
现在我需要定义哪些插槽是可选的。我试过这个:
selectConstraint: function (event) {
return event.rendering !== 'background'
},
但它不起作用。所有框都不可选择。我做错了什么..?
我解决了我的问题。我终于用了阿贾克斯
相关文章:
- 如何在下拉列表中选择完整的日历月份和年份
- 如何在JQuery全日历周模式中选择多天
- 使用选择约束限制全日历中的可选框
- 如何让日历视图在 html 页面中选择时间段
- Javascript+HTML中的日期选择器准备好了吗?(需要:DD、MM、YY的单独字段加上日历选择器)
- 有没有一个日历可以在谷歌关闭库中选择一系列日期
- 如何使用可点击按钮在Datepicker日历中选择用户在其他月份的当前日期
- jQuery-克隆的日期选择器日历未显示在日期选择器字段旁边
- 日期选择器使用所有字段的下拉菜单JavaScript和JQuery W/O日历
- Jqueryui日期选择器不显示日历
- 如何在日历控件中自动选择当前日期
- 完整日历选择时间未正确显示
- 在“完整日历”中选择并拖动整周
- 在一天内选择完整日历
- Ajax 日历扩展器不选择上一个日期
- 引导日期时间选择器 - 覆盖单击日历图标事件
- Javascript下拉菜单和验证日历选择器
- 停止传播在全日历选择回调
- DHTMLX日历选择时间不改变输入字段
- Datepicker可以用作月份日历选择器吗?