Question

我正在研究FullCalendar的基本实现。但是使用下面的代码（复制并粘贴到文件中）。我的“会议”每天在给定的时间重复一次。我应该在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'

但是，如果您实际上不希望任何复发，那有点荒谬。

如果您只想要正常的单次事件，则不要使用“重复事件”属性。只需以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>

FullCalendar-每天重复一次活动，无需告知

1 个答案: