I’m encountering an issue with my calendar where all events initially displayed are visible. Each event can occur in a specific room, and I also have a sidebar that allows me to select different rooms. When I click on a room in the sidebar, the following function is triggered:

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 existingEventIds = new Set(calendar.getEvents().map(event => event.extendedProps.originalId));

        const events = roomEvents.filter(event => !existingEventIds.has(event.id)).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();
  }
}

In my initial view, I might have 100 rooms displayed, and if 20 events are scheduled in ROOM 1, clicking on ROOM 1 previously resulted in adding all 20 events again, causing duplicates. To resolve this, I now remove any existing events related to ROOM 1 (if any) before adding the events for that room. This ensures that events for ROOM 1 are not duplicated in the calendar display.

Here is how it looks before clicking ther room:

Here is how it looks after clicking the room:

I’m using Angular 15 and FullCalendar 6 for this implementation.

I’m using Angular 15 and FullCalendar 6 for this implementation.