FullCalendar - selectOverlap предотвращает создание всех дневных событий

Поскольку функция selectOverlap проходит только через перекрывающееся событие, а не через выделение, сложно настроить, как для обработки создания события.

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

На этом этапе, кроме фоновых событий, абсолютно никакие события не должны перекрывать друг друга.

Однако ... вдобавок к этому - затем мы накладываем "события на весь день" - что может быть любым количеством вещей, но для примера, скажем, это "дни рождения сотрудников" - поэтому у вас может быть несколько события сегодня, но в разделе всего дня будет мероприятие, показывающее чей-то день рождения.

Я проверяю eventOverlap и делаю некоторые другие проверки для eventDrop и eventResize, которые обрабатывают разные конфликты, но они работают только для существующих событий, перемещаемых или изменяемых в размере. Я хотел бы сделать то же самое при создании события, которое происходит во время выбора. Чтобы запретить выбор пробелов, в которых уже есть события, я использую пример функции из документации selectOverlap:

function(event) {
    return event.rendering === 'background';
}

Это работает фантастически. Однако, если я попытаюсь создать новое мероприятие на весь день, оно будет «перекрывать» любые другие события, существующие в этот день, и не пройдет эту проверку. Я надеялся, что смогу использовать объект выбора, чтобы проверить его на allDay=true, но функция передает только существующее событие, и нет возможности проверить выбранный раздел.

Здесь вы можете увидеть очень упрощенную демонстрацию:

https://codepen.io/anon/pen/NQrxOO

Попробуйте создать мероприятие на весь день в день, в котором уже есть события.

Есть лучший способ сделать это? Вместо этого я могу полностью удалить selectOverlap и делать все в select callback, но мне нужно по сути, дублируйте проверки на перекрытие только для того, чтобы эта работа работала, и я чувствую, что это кажется излишним для чего-то, что должно быть относительно простым.

Возможно ли получить не только перекрывающийся объект события, но и объект выбора при выполнении функции selectOverlap?


fullcalendar fullcalendar-4
person Warren Sergent    schedule 24.07.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Текущий обходной путь - удалить проверку selectOverlap и сделать это самостоятельно в select callback.

Ниже приведена упрощенная версия быстрой функции, которую я написал для вызова при использовании select={this.handleEventCreate}:

class Diary extends React.Component {

    //additional functions, state definitions, etc etc etc here.

    //Define calendarRef as it will be needed in the function below
    calendarRef = React.createRef();


    handleEventCreate = (info) => {
        // Get the Calendar API to allow unselection
        let calendarApi = this.calendarRef.current.getApi();

        // Get all Events
        let checkEvents = calendarApi.getEvents();
        // Loop through them
        checkEvents.forEach(function(event){
            // If it's not a background element, check whether the new element contains the existing, or vice versa.
            if(event.rendering !== "inverse-background" && 
                    (
                        (event.start >= info.start && event.start <= info.end) ||
                        (event.end >= info.start && event.end <= info.end) ||
                        (info.start >= event.start && info.start <= event.end) ||
                        (info.end >= event.start && info.end <= event.end)
                    )
                ){
                    // It is an overlapping event, so we reject it.
                    return calendarApi.unselect();
                }
        });

        alert('All good here to create the event.');
        //extra event creation code to fire here.
    }
person Warren Sergent    schedule 25.07.2019
comment
По состоянию на июль 2019 года это рекомендуемый способ сделать это (обработка selectOverlap в select callback. Я поднял запрос функции, чтобы функция selectOverlap получила новое событие, а также перекрывающееся событие, чтобы упростить это в будущем. : github.com/fullcalendar/fullcalendar/issues/4792 - person Warren Sergent; 29.07.2019
comment
Есть идеи о том, как получить this.calendarRef при вызове метода с использованием FullCalendar Vue? Та - person raison; 23.08.2019
comment
Привет, @raison - я не знаю, так как я использую для этого ReactJS, но он может быть очень похожим - this.calendarRef определен внутри класса, а также просто calendarRef = React.createRef(); - обновит ответ выше, чтобы показать немного больше деталей. - person Warren Sergent; 28.08.2019
comment
Также обратите внимание, что calendarRef - это переменная, которую я назвал сам - вы не найдете ее в fullCalendar - но в моем случае она ссылается на React.createRef(). - person Warren Sergent; 28.08.2019