CODEWITHSUNDEEP
javascriptfullcalendarfullcalendar-5rrule
Abdul Malik
Abdul Malik

Reputation: 559

Fullcalendar RRule recurring events - renders wrong end date in timeGridWeek

the two events Event A and Event B in actual data do not overlap in timings:

Event A:- start:2021-03-01T01:20:00.000Z, end: 2021-03-01T02:00:00.000Z

Event B:- start:2021-03-01T02:00:00.000Z, end: 2021-03-01T02:20:00.000Z

But this is how they appear on the calendar:

two events overlapping but not in actual

Event definitions:

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

Demo: https://codepen.io/abdul007malik/pen/rNjxRwP

Upvotes: 1

Views: 2028

Answers (1)

ADyson
ADyson

Reputation: 61914

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

Upvotes: 4

Related Questions