Как сохранить отображение полного календаря при обновлении события - PullRequest
0 голосов
/ 01 октября 2018

Я работаю с FullCalendar в веб-приложении и пытаюсь сделать его максимально динамичным, чтобы пользователям не пришлось перезагружать страницу, чтобы увидеть изменения.

На данный момент,Я хочу обновить цвет события внутри поповера, не скрывая его.

Вот мой код:

<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet" />
</head>

<body>
  <div id='calendar'>

  </div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script>
<script>
  var events = [{
    id: 1,
    start: new Date(),
    end: new Date(),
    color: 'blue',
    title: 'Event 1',
  }, {
    id: 2,
    start: new Date(),
    end: new Date(),
    color: 'blue',
    title: 'Event 2',
  }, {
    id: 3,
    start: new Date(),
    end: new Date(),
    color: 'blue',
    title: 'Event 3',
  }, {
    id: 4,
    start: new Date(),
    end: new Date(),
    color: 'blue',
    title: 'Event 4',
  }, {
    id: 5,
    start: new Date(),
    end: new Date(),
    color: 'blue',
    title: 'Event 5',
  }, {
    id: 6,
    start: new Date(),
    end: new Date(),
    color: 'blue',
    title: 'Event 6',
  }]

  $('#calendar').fullCalendar({
    timeFormat: 'H(:mm)',
    header: {
      left: 'prev,next,today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    selectable: true,
    selectHelper: true,
    editable: false,
    eventLimit: true,
    events: events

  });

  var events = $("#calendar").fullCalendar('clientEvents');
  console.log(events)

  setTimeout(function() {
    var event = $("#calendar").fullCalendar('clientEvents', function(event) {
      return event.id == 6;
    });
    event[0].color = 'red';
    $('#calendar').fullCalendar('updateEvent', event[0]);
    console.log(event);
  }, 5000);
</script>

</html>

Я сделал функцию тайм-аута, которая будет запускать обновление цвета для шестого события, и это работает, но, как вы видите, всплывающее окно исчезает через 5 секунд и есть ли способ сохранитьон открывается, когда происходят какие-либо события.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...