Проблемы с полным календарем и фильтрацией событий в повестке дня-просмотра (работает только один раз, тогда больше нет событий)

Question

У меня проблема с фильтрацией событий:

• Я использую полный календарь в повестке дня-просмотра
• Я использую выпадающий список, чтобы выбрать драйвер
• Я сравниваю имя (это свойство события-объекта) с выбранным значением (эта часть в порядке)

Затем,

• Я удаляю все события (.fullCalendar('removeEvents');)

• Добавить конкретные события

• (добавить с renderEvents на данный момент не работает, вероятно)

• И теперь моя проблема появляется:

• Впервые это работает, однако, когда я выбираю другой "драйвер", события исчезают из-за действия "removeEvents" ранее.

Итак, как я могу решить эту проблему, чтобы я мог только отображать отфильтрованные события и сохранять другие (фактически все события) для повторной фильтрации второй, третий раз?

$('#' + id).fullCalendar('refetchEvents');

была первая идея, однако, она возвращает все назад, а выбранные проблемы были удвоены (и так далее).

Я благодарен за каждый намек.

Answer 1

Хорошо, я думаю, что вы можете решить свою проблему с помощью функции eventRender в fullCalendar.

Функция также может возвращать false, чтобы полностью отменить рендеринг события.

Ваше событие из events.json должно иметь свойство типа 'driver_id'.

Я бы выбрал поле выбора вместо выпадающего списка с ключами опции, которые являются идентификаторами драйверов, значениями - именами или чем-то еще. Допустим, его идентификатором будет "driver_select".

Затем визуализируйте события следующим образом:

$('#calendar').fullCalendar({
    //...
    eventRender: function(event, element) {
        //driver select should have default value assigned or else no events will be rendered
        if ($("#driver_select").val() !== event.driver_id) {
             return false; //do not render other driver events
        }
    }
    //...
});

Обработка выбранных изменений для обновления

$("#driver_select").off('change').on('change', function() {
     $("#calendar").fullCalendar( 'refetchEvents' );
});

Другим подходом было бы показать всех водителей на временной шкале. Для этого вы можете использовать https://fullcalendar.io/scheduler/.