Fullcalendar добавить и удалить источники событий - PullRequest
Новая
       7

Fullcalendar добавить и удалить источники событий

0 голосов
/ 20 января 2020

У меня проблема с добавлением и удалением источников событий с помощью флажков. Я загружаю Fullcalendar с целым массивом eventSources Json используя JS var. Это потому, что мне нужно создать канал в соответствии с ролью пользователя. К сожалению, это работает правильно только в первый раз. Буду благодарен за любые советы.

feed: 

    var eS;
  $.ajax({
    type: "POST",
    url: "ajax/feed.php",
  }).done(function(result){
       eS = JSON.parse(result);
  });

output: 

[{"color":"silver","editable":"1","events":[{"id":"e1","title":"Event 1","start":"2020-01-01","end":"2020-01-01"}]},{"color":"blue","editable":"1","events":[{"id":"e2","title":"Event 2","start":"2020-01-02","end":"2020-01-02"}]},{"color":"green","editable":"1","events":[{"id":"e3","title":"Event 3","start":"2020-01-03","end":"2020-01-03"}]},{"color":"yellow","editable":"1","events":[{"id":"e4","title":"Event 4","start":"2020-01-04","end":"2020-01-04"},{"id":"e5","title":"Event 5","start":"2020-01-05","end":"2020-01-05"}]},{"color":"pink","editable":"1","events":[{"id":"e6","title":"Event 6","start":"2020-01-06","end":"2020-01-06"}]}]

Fullcalendar: 

    document.addEventListener('DOMContentLoaded', function() {

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

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list', 'bootstrap'],  
      header: {
        left: 'promptResource today prev,next',
        center: 'title',
        right: 'timeGridYear,dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      },
      eventSources: eS
    });
    calendar.render();

var evS = calendar.getEventSources();
$("#allcalendars").on('change', 'input[id^="x"]', function() {
    var val = $(this).attr('id').replace('x', '');
    if (this.checked) {
        calendar.addEventSource(eS[val]);
    } else {
        evS[val].remove();
    }
    calendar.refetchEvents();
});
});

флажки 

    <ul id="allcalendars">
        <input type="checkbox"id="x0" checked="checked">
        </li>
        <li>
        <input type="checkbox" id="x1" checked="checked">
        </li>
...
</ul>

Моделирование: https://codepen.io/ketna11/pen/mdyQjxP

...