Question

我有预约模块。我使用FullCalendar。我用“事件”设置了可用时间。我每天都有不同的可用时间

$('#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'
        },

但它不起作用。所有方框都不可选。我做错了什么..？

Answer 1

我解决了我的问题。我终于使用了Ajax

使用selectConstraint限制FullCalendar中的可选框

1 个答案: