Question

我正在Web应用程序中使用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秒钟后消失，并且当事件发生某些变化时，有什么方法可以使它保持打开状态。

更新事件时如何保持全日历弹出窗口显示

0 个答案: