Search code examples
javascriptfullcalendarfullcalendar-schedulerfullcalendar-4

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

I'm playing with a basic implementation of FullCalendar. But with the code below (copy and paste into a file). My 'meeting' repeats at the given time every single day. I should have 1 event against Fred, 3pm to 6pm on March 1st. Not repeating.

This happens regardless of startRecur/endRecur properties. The only thing that had effect was daysOfWeek property. Setting a value meant it only appears on those days. What am I doing wrong?

Thanks Mick

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/[email protected]/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/locales-all.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.css">





<body onload="run()">

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


</body>

Solution

  • If you specify the startTime and endTime properties mentioned in the Recurring events documentation, then fullCalendar ignores the standard start and end properties completely for determining the placement of the event, and relies instead on the recurrence-related properties (startTime, endTime, startRecur and endRecur).

    You could specify this single event using the recurrence syntax, like this:

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

    But it's a bit nonsensical if you don't actually want any recurrence.

    If you just want a normal single-occurence event, then don't use the "recurring events" properties. Just specify the date and time in the start and end properties in the normal way which is clearly documented and shown in countless examples in the fullCalendar documentation and demos:

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

    I'm not clear how you ended up deciding to use properties which are only mentioned on the documentation page about recurrence, in order to try and define a non-recurring event.

    Anyway here's a working demo:

    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/[email protected]/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/locales-all.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.css">





<body onload="run()">

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


</body>