FullCalendar -在没有被告知的情况下每天重复一个事件

Question

我正在使用FullCalendar的基本实现。但是使用下面的代码(复制并粘贴到文件中)。我的“会议”每天都会在给定的时间重复。3月1日下午3点到6点，我应该有一场对弗雷德的比赛。不要重复。

不管startRecur/endRecur属性如何，都会发生这种情况。唯一有效果的是daysOfWeek属性。设置一个值意味着它只在那些日子出现。我做错了什么？

谢谢米克

​

function run() {

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

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: ['resourceTimeline'],

    defaultView: 'resourceTimelineWeek',
    resources: [{
        id: 1,
        title: 'Fred'
      },
      {
        id: 2,
        title: 'Jane'
      }
    ],
    events: [{
      id: '1',
      resourceId: '1',
      title: 'Meeting',
      allDay: false,
      start: '2020-03-1',
      end: '2020-03-1',
      startTime: '15:00',
      endTime: '18:00'
    }]
  });

  calendar.render();
}

<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.4.0/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/resource-common@4.4.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/timeline@4.4.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/resource-timeline@4.4.0/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.4.0/locales-all.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.4.0/main.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fullcalendar/timeline@4.4.0/main.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fullcalendar/resource-timeline@4.4.0/main.min.css">





<body onload="run()">

  <div id='calendar'></div>


</body>

​

Answer 1

如果您指定了startTime和endTime属性，那么fullCalendar将完全忽略标准的start和end属性来确定事件的位置，而是依赖于与递归相关的属性(startTime、endTime、startRecur和endRecur)。

可以使用递归语法指定此单个事件，如下所示：

startRecur: '2020-03-01',
endRecur: '2020-03-02',
startTime: '15:00',
endTime: '18:00'

但如果你真的不想再发生，那就有点荒谬了。

如果您只想要一个正常的单一事件，那么就不要使用“重复事件”属性。只需以正常的方式在start和end属性中指定日期和时间，即清楚地记录，并在fullCalendar文档和演示中的无数示例中显示：

start: '2020-03-01 15:00',
end: '2020-03-01 18:00',

我不清楚您是如何决定使用仅在文档页面中提到的关于重复使用的属性的，以便尝试并定义一个非经常性事件。

无论如何，这里有一个工作演示：

​

function run() {

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

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: ['resourceTimeline'],

    defaultView: 'resourceTimelineWeek',
    resources: [{
        id: 1,
        title: 'Fred'
      },
      {
        id: 2,
        title: 'Jane'
      }
    ],
    events: [{
      id: '1',
      resourceId: '1',
      title: 'Meeting',
      allDay: false,
      start: '2020-03-01 15:00',
      end: '2020-03-01 18:00',
    }]
  });

  calendar.render();
}

<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.4.0/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/resource-common@4.4.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/timeline@4.4.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/resource-timeline@4.4.0/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.4.0/locales-all.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.4.0/main.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fullcalendar/timeline@4.4.0/main.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fullcalendar/resource-timeline@4.4.0/main.min.css">





<body onload="run()">

  <div id='calendar'></div>


</body>

​

Answer 2

您可以使用下面的代码显示的一天，每天，每周，每两周和每月的事件与工具提示鼠标悬停事件。

访问这里- https://stackoverflow.com/a/68770685/9673996