I am having an issue where I have all the events that show in the inital view of the calendar, the events can be held in a specifc room, I also have a sidebar where I can choose the rooms, when click in a room this function is called:

 onRoomClick(roomId: number, isChecked: boolean): void {
    const calendar = this.fullCalendar.getApi();
    const eventTypePrefix = `room_${roomId}_`;

    const removeRoomEvents = () => {
      const eventsToRemove = calendar.getEvents().filter(event => event.id.startsWith(eventTypePrefix));
      eventsToRemove.forEach(event => event.remove());
    };

    if (isChecked) {
      removeRoomEvents();

      this._appointmentsService.getRoomEvents(roomId).subscribe({
        next: (roomEvents) => {
          const events = roomEvents.map(event => ({
            ...event,
            id: `${eventTypePrefix}${event.id}`,
            color: this.generateColor(roomId.toString()),
          }));
          calendar.addEventSource(events);
        },
        error: (error) => {
          this._snackbarService.open(error, { type: 'error' });
        }
      });
    } else {
      removeRoomEvents();
    }
  }

Lets say I have 100 rooms on inital view and 20 of them are held in ROOM 1 then when I click Room 1 it adds 20 rooms where 20 of them are duplicate, I want to remove 20 events from 100 events first and then add the 20 events of that room so they dont show as duplicate!

Is there any way I can do that because this approach doesn’t seem to exactly work as expected.

Im using Angular 15 and Full Calendar 6.