FullCalendar

Question

我正在玩 FullCalendar 的基本实现。但是使用下面的代码（复制并粘贴到文件中）。我的 'meeting' 每天都在给定的时间重复。我应该在 3 月 1 日下午 3 点到 6 点与弗雷德进行 1 场比赛。不再重复。

无论 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

如果您指定 Recurring events documentation 中提到的 startTime 和 endTime 属性，则 fullCalendar 会完全忽略标准的 start 和 end 属性来确定事件的位置，而是依赖于重复相关的属性（startTime、endTime、startRecur 和 endRecur）。

您可以使用重复语法指定此单个事件，如下所示：

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

但如果你真的不希望任何重复出现，那就有点荒谬了。

如果您只想要普通的单次事件，则不要使用 "recurring events" 属性。只需以 clearly documented 的正常方式在 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

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

访问这里-

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

FullCalendar - repeating a single event on every day without being told to

javascript

fullcalendar-scheduler

fullcalendar-4