Feature Request: Support Recurring Events

[tgBryanBailes]

It would be great if recurring events were supported. A good example of this is in Outlook, where you can set events to recur daily/weekly/monthly. Other similar components support this as well, including FullCalendar and jqxScheduler

[StephenChou1017]

@tgBryanBailes
Hi, supporting recurring events is a good feature. I think we have two ways to implement this:

the first one is that we save the recurring events(or the rules to generate recurring events) in database, and return the event list (including the recurring events) in the time window when a browser requests, then browser sets the event list to the SchedulerData object to display. If this, there will be no change in the Scheduler component, what we need to do is in the back-end.

the other one is that the Scheduler component should support the rules which can generate recurring events. Before calling setEvents to the SchedulerData object, Scheduler component should generate recurring events according the rules, add them into non-recurring event list, and then call the setEvents method.

Which way should we choose, or any better idea?:-)

[tgBryanBailes]

@StephenChou1017
The issue with doing this in a DB is that recurring events often do not have an End Date. They just recur until they are cancelled. A DB would then have to regenerate events as the calendar is traversed, causing lots of unnecessary data transfers.

The Scheduler component supporting rules for recurring events would be preferable in this scenario, and can be set up with fairly limited data transfer. A great way to do this would be to accept an rrule.js object to define recurrence.

[StephenChou1017]

OK, I got you and agree with you, I'll try to add this feature in Scheduler, thank you:-)

[StephenChou1017]

@tgBryanBailes
I've added the supporting recurring events feature to Scheduler, you may download the latest repo and have a try:-)

[tgBryanBailes]

This is fantastic! I will begin testing immediately. Thank you so much!

[tgBryanBailes]

It doesn't seem to obey the UNTIL rrule command.

FREQ=WEEKLY;DTSTART=20180712T173000Z;UNTIL=20180812T233000Z;BYDAY=TU,FR
Still continues showing events after 2018-08-12

[StephenChou1017]

Oh yes, that's a bug, and I think I've fixed it:-), thanks for the feedback!

[tgBryanBailes]

This is wonderful and working great! Thanks for this! Closing the issue.

[avichovatiya67]

Is there any way to added some exceptional dates in recurrence rule to avoid displaying event on some days ?

[hbatalhaStch]

Is there any way to added some exceptional dates in recurrence rule to avoid displaying event on some days ?

I believe you can use rrule exdate to do that, the string would like this (untested):

const rruleStr = `
    DTSTART:20220501T090000
    RRULE:FREQ=DAILY;COUNT=10
    EXDATE:20220503T090000,20220505T090000
`;

Also you can pass add exdates to the event item, which takes a list of dates. Example (again, untested):

 events: [
      {
          id: 10,
          start: '2017-12-19 17:30:00',
          end: '2017-12-19 23:30:00',
          resourceId: 'r1',
          title: 'R1 has recurring tasks every week on Tuesday, Friday',
          rrule: 'FREQ=WEEKLY;DTSTART=20171219T013000Z;BYDAY=TU,FR',
          exdates: ['2023-05-05','2023-05-12','2023-05-07'],
          bgColor: '#f759ab'
      }
]

[avichovatiya67]

Is there any way to added some exceptional dates in recurrence rule to avoid displaying event on some days ?

I believe you can use rrule exdate to do that, the string would like this (untested):

const rruleStr = `
    DTSTART:20220501T090000
    RRULE:FREQ=DAILY;COUNT=10
    EXDATE:20220503T090000,20220505T090000
`;

Also you can pass add exdates to the event item, which takes a list of dates. Example (again, untested):

 events: [
      {
          id: 10,
          start: '2017-12-19 17:30:00',
          end: '2017-12-19 23:30:00',
          resourceId: 'r1',
          title: 'R1 has recurring tasks every week on Tuesday, Friday',
          rrule: 'FREQ=WEEKLY;DTSTART=20171219T013000Z;BYDAY=TU,FR',
          exdates: ['2023-05-05','2023-05-12','2023-05-07'],
          bgColor: '#f759ab'
      }
]

I tried this both but didn't got any success.. :-(

[hbatalhaStch]

I tried this both but didn't got any success.. :-(

Could you share some code?

[avichovatiya67]

//=====================Configurations============================//
const [viewModel, setViewModel] = useState(
    new SchedulerData(
      new Date().toString(),
      ViewTypes.Day,
      false,
      false,
      {
        checkConflict: true,
        endResizable: false,
        startResizable: false,
        movable: false,
        recurringEventsEnabled: true,
        defaultEventBgColor: colors.upcoming_event_3, // "#e98074",
        schedulerWidth: "75%",
        eventItemHeight: 40,
        eventItemPopoverEnabled: false,
        eventItemLineHeight: 42,
        resourceName: "Conference Rooms (Capacity)",
        minuteStep: 15,
        dayStartFrom: date_n_time.office_start,
        dayStopTo: date_n_time.office_end - 1,
        dayCellWidth: 15,
        weekResourceTableWidth: "auto",
        schedulerMaxHeight: "690",
        nonWorkingTimeHeadBgColor: "transparent",
        nonWorkingTimeBodyBgColor: "transparent",
        nonWorkingTimeHeadColor: "default",
        views: [
          {
            viewName: "Day",
            viewType: 0,
            showAgenda: false,
            isEventPerspective: false,
          },
          {
            viewName: "Week",
            viewType: 1,
            showAgenda: false,
            isEventPerspective: false,
          },
        ],
      },
      {
        getNonAgendaViewBodyCellBgColorFunc: (schedulerData, slotId, header) => {
          if (new Date(header.time) < new Date()) {
            return colors.passed_time;
          }
          return undefined;
        },
      }
    )
  );

//============================Fetch Data==============================//
   useEffect(() => {
    const fetchHistory = async () => {
      if (allBookings !== "") {
        const history = await allBookings?.map((e) => {
          const event = e;
          const weekDays = { MO: 0, TU: 1, WE: 2, TH: 3, FR: 4, SA: 5, SU: 6 };
          const rType = { 2: 3, 3: 2 };
          const rDays = event.rrule?.days?.map((e) => e.slice(0, 2).toUpperCase());
          // returns a date object with date from 2nd param and time from 3rd param
          const getEventTime = (event, date, time) => {
            return `${new Date(event[date]).getFullYear()}-${(new Date(event[date]).getMonth() + 1)
              .toString()
              .padStart(2, "0")}-${new Date(event[date]).getDate()} ${new Date(event[time]).toLocaleTimeString(
              "en-US",
              { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" }
            )}`;
          };
          const options = {
            dtstart: new Date(event?.startDate),
            until: new Date(getEventTime(event, "endDate", "end")),
          };
          event?.rrule?.type !== 1 && (options.freq = rType[event?.rrule?.type]);
          event?.rrule?.type === 3 && (options.byweekday = rDays?.map((day) => weekDays[day]));

          let rrule = event?.rrule?.type !== 1 ? new RRule(options) : "";

          return {
            id: event._id,
            organizer: event?.organizer,
            title: event.title,
            description: event.description,
            resourceId: event.resourceId,
            start: getEventTime(event, "startDate", "start"),
            end: getEventTime(event, "startDate", "end"),
            rrule: rrule.toString(),
            exclude: event?.rrule?.exclude ?? [],
            isRecurring: event.rrule.type !== 1,
            bgColor: getBackGroundColor(event),
          };
        });
        if (Boolean(history) && history[0]?.id !== undefined) {
          setEvents(() => history);
          viewModel.setEvents(history);
        }
        setUpdate(viewModel);
      }
    };
    fetchHistory();
  }, [allBookings, currentUser, viewModel]);