Recurring Events in Fullcalendar

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

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>

FullCalendar Recurring Events

As the documentation you linked to states, endRecur is exclusive; meaning the date specified will not get one of your recurring events (if it would otherwise fall there). From the page:

Note: This value is exclusive. Just like every other end-date in the
API. For all-day recurring events, make the endRecur the day after you
want your last recurrence.

Taking the advice of the above-quoted paragraph, your solution to the sample you provided might look something like the following:

{
"title" : "asdf",
"endTime" : "19:19:00.000",
"endRecur" : "2020-08-07",
"startTime" : "17:19:00.000",
"startRecur" : "2020-08-05"
}

Fullcalendar recurring event is shifted for the day before

You've specified the event to occur at 02:30:00Z every Monday and Thursday within the specified date range.

Note that that's Monday and Thursday in UTC time.

In Pacfic Time, 02:30:00Z is 18:30:00 the previous day. Therefore, an event recurring early on a Thursday morning in UTC time will actually occur on a Wednesday evening in Pacific Time.

What fullCalendar is doing is completely correct and logical according to the data it's been given.

Where I think your issue is likely to be, is that when you're receiving this recurring event request from the user and converting the date and time to UTC, you're not taking into account whether that timezone change also logically affects the recurrence days specified. e.g. I assume in the case mentioned above you'd want to shift the recurrence days one day forward, since the UTC conversion causes the time to shift into the next day.

It depends how exactly you'll want it to work, and obviously I can't see how you do the conversion process currently, so I'll have to leave the implementation details up to you.

Fullcalendar Repeating Events

If you can't generate your events on the server side as @ADyson suggested, you could do it in Javascript. This finds the first Monday of the month, between the specified start and end dates.

var id=0, event, events = [],
    start=moment('2017-08-01'),
    end=moment('2017-10-31');

while (start.isBefore(end)) {
    id++;
    if (start.day() === 'Monday') {
        day = start.format('YYYY-MM-DD');
    } else {
        day = start.add(1, 'weeks').startOf('isoWeek').format('YYYY-MM-DD');
    }
    event = {
        title:"My repeating event",
        id: id,
        start: day + ' 10:00:00', 
        end: day + ' 14:00:00', 
    }
    events.push(event);
    start.add(1, 'month').startOf('month');
}

And then use your constructed array of events in your calendar:

$('#calendar').fullCalendar({
    events: events,
    // ...

Fullcalendar RRule recurring events - renders wrong end date in timeGridWeek

When you use an rrule in a fullCalendar event, the normal start and end properties of the event are ignored (because they don't make sense any more - the event no longer has a single start or end time, instead it has a recurring pattern of times).

You need to specify a duration value for the event - as described in the RRule plugin documentation, otherwise fullCalendar will give the event the default duration of 1 hour. You may have noticed that your event B was too long as well? That's due to the same issue.

These definitions will produce the desired output:

events: [
  {
    id: 762,
    title: "Event A",
    allDay: false,
    eventColor: "#36BFD7",
    color: "#F05974",
    labelName: "TIK",
    duration: "00:40",
    rrule: {
      freq: "weekly",
      interval: 1,
      dtstart: "2021-03-01T01:20:00.000Z",
      until: "2021-04-08",
      byweekday: ["Mo"],
    },
  },
  {
    id: 763,
    title: "Event B",
    allDay: false,
    eventColor: "#36BFD7",
    color: "#9E69AF",
    labelName: "PPKN",
    duration: "00:20",
    rrule: {
      freq: "weekly",
      interval: 1,
      dtstart: "2021-03-01T02:00:00.000Z",
      until: "2021-04-08",
      byweekday: ["Mo"],
    },
  },
],

Demo: https://codepen.io/ADyson82/pen/Bapjgdd