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

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

1 голос
/ 09 июля 2019

Я управляю назначениями на 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();

Вот что я хочу:

enter image description here

1 Ответ

0 голосов
/ 10 июля 2019

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

В fullCalendar 4 вы можете достичь того, что вам нужно, с помощью параметра eventConstraint . Это позволяет вам ограничивать перетаскивание событий определенными окнами времени. Как сказано в документации, вы можете указать значение 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
  },

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

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

...