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

fullcalendar's built-in recurring events are relatively limited in their functionality, so I don't think you can do it. Try using the rrule plugin instead, rrule is more flexible. I haven't got time to check it precisely not but I suspect you could probably achieve what you want more easily with rrule. It's worth looking into, anyway. — ADyson, Jun 05 '20 at 11:50
@ADyson hey thanks very much. After spending some time with fullcalendar's built-in recurring events, looks like it can't do what I want. And checking what you suggested, I think the rrule plugin will do it. — wobsoriano, Jun 05 '20 at 11:59
That's great. Maybe you could post an answer below, so others can benefit too? — ADyson, Jun 05 '20 at 13:02

wobsoriano · Answer 1 · 2020-06-05T13:58:23.413

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.

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

1 Answers1