How to extend end time of fullcalendar recurring events to the next day?

Question

How can I show a recurring event in which the end time exceeds the current day?

Here's a sample data:

const data = {
  id: 1,
  title: "ABC",
  startRecur: "2020-06-11T16:00:00.000Z",
  startTime: "23:00:00",
  endTime: "03:00:00",
  daysOfWeek: ["5"]
};

calendar.addEventSource({
  events: [data]
});

Basically the start time is 11:00 PM and should end the next day 3:00 AM . How will I let fullcalendar know that it should end the next day? Take note that this is a recurring event.

Here's what it looks like in month view:

and in week view (event not rendered because it thinks that end time is 3 AM of same day):

Here's a pen of the problem.

I want it to look like this (google calendar)

UPDATE: Got it working using the rrule plugin

Answer 1

So before, I was doing it using fullcalendar's built-in recurring events.

const data = {
  id: 1,
  title: "ABC",
  startRecur: "2020-06-11T16:00:00.000Z",
  startTime: "23:00:00",
  // endTime is 03:00:00 because I expect it to end the next day at 3 AM
  endTime: "03:00:00",
  daysOfWeek: ["5"]
};

calendar.addEventSource({
  events: [data]
});

The problem with this is that when you have an endTime that is less than the given startTime , fullcalendar will not understand it and will not render the event in the calendar.

To fix this, there is a plugin called rrule plugin which allow recurring events across days. Thanks to ADyson .

Instead of the above way of adding recurring events, we can use this instead:

const data = {
  id: 1,
  title: "my recurring event",
  rrule: {
    freq: "weekly",
    interval: 5,
    byweekday: ["fr"],
    // In the above code,
    // start date and start time are separate.
    // In the rrule plugin, dtstart
    // should contain both start date and time.
    dtstart: "2020-06-01T23:00:00"
  },

  // Duration is how long the event will run,
  // not exactly what the time it should end.
  // in our case, to end the event the next day 3 AM.
  // We should add 4 hours.
  duration: "04:00"
};

calendar.addEventSource({
  events: [data]
});

Here's a working pen .