Разрешить перетаскивание событий только на фоновые события

Я управляю встречами на fullcalendar. У меня есть свободное время, когда я могу создавать новые встречи. Также я могу перетаскивать встречи в доступные временные интервалы, которые отображаются как фоновые события.

Мне нужна только функция перетаскивания в слотах фоновых событий.

Я пробовал метод eventOverlap, но он работает только тогда, когда событие сбрасывается на фоновое событие. Если событие сбрасывается в другом месте, я не могу определить, сбрасываю ли я событие в фоновом событии или в пустом слоте.

var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {
    defaultView: 'timeGridWeek',
    // height: 1080,
    plugins: ['dayGrid', 'timeGrid', 'interaction'],
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },

    events: {
        url: getUrl(),
        failure: function() {
            toastr.error('Unable to load calendar data, Please try later');
        },
        success: function() {

        }
    },


    loading: function(bool) {

    },
    defaultDate: Date.now(),

    editable: true,
    eventLimit: true,
    eventClick: function(info) {

        if (info.event.extendedProps.type == 'Calendar') {
            showCreateModal(info.event);
        }
        if (info.event.extendedProps.type == "Appointment") {
            showUpdateModal(info.event);
        }
    },

    eventOverlap: function(stillEvent, movingEvent) {
        return stillEvent.extendedProps != '' && stillEvent.extendedProps.type === 'Calendar' ? true : false;
    },

    eventDrop: function(info) {
        // check if event is being dropped on past date / slot
        if (moment(info.event.start) < moment()) {
            info.revert();
            return;
        }

        // check if event is being dropped on future slot
        if (moment(info.event.start) > moment()) {
            swal({
                    title: "Are you sure?",
                    text: "You are about to re-schedule this appointment!",
                    icon: "warning",
                    // buttons: true,
                    buttons: ["No", "Yes !"],
                    dangerMode: true,
                })
                .then((response) => {
                    if (response) {
                        submitForm(false, true, info.event);
                    } else {
                        info.revert();
                    }
                });
        }

    }

});

calendar.render();

Это то, что я хочу:

введите здесь описание изображения


javascript fullcalendar momentjs fullcalendar-4
person hassan khalil    schedule 09.07.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы правы в том, что eventOverlap вам здесь не поможет, потому что он срабатывает только тогда, когда событие перебрасывается на фоновое событие. Это не поможет вам, когда событие отброшено где-то еще.

В fullCalendar 4 вы можете добиться того, что вам нужно, с помощью параметра eventConstraint. Это позволяет ограничить перетаскивание событий определенными окнами времени. Как сказано в документации, вы можете указать значение groupId для этого параметра, а затем

... события, которые перетаскиваются или изменяются в размере, должны полностью содержаться по крайней мере в одном из событий, связанных с данным groupId.

Все, что вам нужно сделать, это присвоить всем вашим фоновым событиям один и тот же groupId.

Например, если вы установите:

eventConstraint: 1

а затем иметь записи, подобные этим, в ваших данных о событии:

  {
    start: "2019-07-10 09:00",
    end: "2019-07-10 12:00",
    rendering: "background",
    groupId: 1
  },
  {
    start: "2019-07-11 09:00",
    end: "2019-07-11 12:00",
    rendering: "background",
    groupId: 1
  },

Это будет означать, что вам будет разрешено перетаскивать или изменять размер существующего события календаря только в том случае, если вы перетаскиваете или изменяете его размер так, чтобы оно полностью попадало в периоды времени, охватываемые теми фоновыми событиями, у которых groupId равен 1.

Вот рабочая демонстрация: https://codepen.io/ADyson82/pen/jjdEjB.

person ADyson    schedule 10.07.2019
comment
Я решил эту проблему с помощью eventConstraint также для обновления значений в базе данных. Я добавил дополнительную проверку в php для проверки, если я отбрасываю событие в правильную дату. - person hassan khalil; 12.07.2019