I am using an Api of events to show on the app using angular-calendar library and I am a bit confused in making recurring events.

Here are the events for example

const eventData = {
      "code": 200,
      "message": "Fetched all events between Sun Jan 26 23:25:15 EAT 2020 to Mon Jan 27 23:25:15 EAT 2020 successfully",
      "events": [
          {
              "id": "6202a38779a0fb3f748ab159",
              "name": "Tlugzz",
              "startTime": null,
              "endTime": "2024-05-27T11:56:28.789+00:00",
              "startDate": "2024-05-24T11:56:28.789+00:00",
              "endDate": "2024-05-31T11:56:28.789+00:00",
              "message": "Off day ",
              "allDay": false,
              "type": "HOLIDAY",
              "recurrence": "DTSTART;TZID=America/New_York:19970902T090000;FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR"

              "validityPeriod": null,
              "validityPeriodEndDate": null,
              "timeZone": "Africa/Nairobi",
              "calendar": null,
              "eventColor": "#7E25CB",
              "shifts": null
          },
          {
              "id": "6202a38779a0fb3f748ab15a",
              "name": "Tabu",
              "startTime": null,
              "endTime": null,
              "startDate": "2024-05-27T11:56:28.789+00:00",
              "endDate": "2024-06-27T11:56:28.789+00:00",
              "message": "Off day ",
              "allDay": true,
              "type": "HOLIDAY",
              "recurrence": "DTSTART;TZID=America/New_York:19970902T090000 ;FREQ=DAILY;INTERVAL=1",
              "validityPeriod": null,
              "validityPeriodEndDate": null,
              "timeZone": "Africa/Nairobi",
              "calendar": null,
              "eventColor": "#CB2572",
              "shifts": null
          }
          
      ]
  }

Here are two events for example that are coming through the api and below is the function that first conver the recurrence into the rrule to make it compatible with the angular-library.

private parseEventData(data: any[]): CalendarEvent[] {
  const events: CalendarEvent[] = [];

  data.forEach(event => {
    if(event.recurrence) {
      const startDate = new Date(event.startDate);
      const endDate = event.endDate ? new Date(event.endDate) : new Date(); // Ensure end date is a valid Date object
      let calendarEvent: CalendarEvent;
      
      const rruleOptions = RRule.parseString(event.recurrence);
      rruleOptions.dtstart = startDate;
      rruleOptions.until = endDate;

      const rrule = new RRule(rruleOptions);
      const recurringEvent: RecurringEvent = {
        title: event.name,
        start: startDate,
        end: endDate,
        color: { primary: event.eventColor, secondary: event.eventColor },
        rrule: {
          freq: rrule.options.freq,
          bymonth: rrule.options.bymonth ? rrule.options.bymonth[0] : undefined,
          bymonthday: rrule.options.bymonthday ? rrule.options.bymonthday[0] : undefined,
          byweekday: rrule.options.byweekday,
          dtstart: rrule.options.dtstart,
          until: rrule.options.until,
          interval: rrule.options.interval,
        }
      };


      console.log("here is the event made", recurringEvent)
      this.recurringEvents.push(recurringEvent);
    } else {
      // Handle non-recurring events if needed
    }
  });

  return events;
}

Problem Statement : If you see at the first event. The recurrent event should not be visible on Weekends but the events is seen from startDate to endDate. Is it because I have set the startDate and endDate in rrule key dstart and until.

How can I improve it and here is the function of the library that is handling the events such as regular and recurring events.

updateCalendarEvents(
    viewRender:
      | CalendarMonthViewBeforeRenderEvent
      | CalendarWeekViewBeforeRenderEvent
      | CalendarDayViewBeforeRenderEvent
  ): void {
    if (
      !this.viewPeriod ||
      !moment(this.viewPeriod.start).isSame(viewRender.period.start) ||
      !moment(this.viewPeriod.end).isSame(viewRender.period.end)
    ) {
      this.viewPeriod = viewRender.period;
      let calendar = [];
      this.calendarEvents = [];

      this.recurringEvents.forEach((event) => {
       
        const rule: RRule = new RRule({
          ...event.rrule,
          dtstart: event?.start,
          until: event?.end,
          interval: 1,
        });
        const { title, color, end, start } = event;

        rule.all().forEach((date, index) => {
          // console.log("index==>", index);
          calendar.push({
            title,
            color,
            start: start,
            end: end,
          });
        });
      });
      

      this.calendarEvents = [...calendar];
      console.log("calendar==>", this.calendarEvents);
      this.cd.detectChanges();
    }
  }

I want to understand this part as well as last event is shown on multiple times and even sometimes events are set out of the startDate and endDate.
Let me know in detail about the rrule ass well how can i convert and make it effiecient in terms of recurrence events.

I want to know about the rrule and angular-calendar library and how can I convert the recurrence into the rrule. Wha is the efficient way of handling it.