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

Question

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/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>

ADyson · Accepted Answer · 2020-03-06T12:26:59.683

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/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>

Thanks A - I literally just worked it out. Pretty embarrassing. I'm not sure why I thought 'start' was only the date. As you say it's pretty clear in the docs that it's both. And I guess I didn't read the info on startTime. — MickCrozier, Mar 06 '20 at 11:57
OP is not wrong, I faced the exact issue and was using startTime, even though I never opened the docs for recurring event. It was this page https://fullcalendar.io/docs/event-parsing — Mustafa Hanif, Apr 03 '21 at 10:11
@MustafaHanif ok but in that page too it clearly mentions that startTime and endTime are for recurring events. I don't think it's confusing, but if you disagree you could ask the maintainers of fullCalendar to clarify the documentation - raise a ticket on their GitHub page. — ADyson, Apr 03 '21 at 10:23

score 0 · Answer 2 · answered Aug 13 '21 at 12:41

0

You can use below code to show one day, daily, weekly, every two weeks and monthly events with tooltip on mouse hover event.

Visit here- https://stackoverflow.com/a/68770685/9673996

answered Aug 13 '21 at 12:41

Nitesh S Chauhan

207
2
8

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

2 Answers2