oedb-backend/frontend/src/app/pages/agenda/agenda.html

<div class="agenda-container">
  <div class="agenda-header">
    <h1>Agenda des événements</h1>
    <p>Événements des 20 derniers jours (10 jours avant et 10 jours après aujourd'hui)</p>
    
    <div class="calendar-controls">
      <button 
        class="btn btn-sm" 
        [class.btn-primary]="view === CalendarView.Month"
        (click)="setView(CalendarView.Month)">
        Mois
      </button>
      <button 
        class="btn btn-sm" 
        [class.btn-primary]="view === CalendarView.Week"
        (click)="setView(CalendarView.Week)">
        Semaine
      </button>
      <button 
        class="btn btn-sm" 
        [class.btn-primary]="view === CalendarView.Day"
        (click)="setView(CalendarView.Day)">
        Jour
      </button>
    </div>
  </div>

  <div class="agenda-content">
    <mwl-calendar-month-view
      *ngIf="view === CalendarView.Month"
      [viewDate]="viewDate"
      [events]="calendarEvents"
      (eventClicked)="onEventClicked($event)"
      (dayClicked)="dayClicked($event)"
      [locale]="'fr'"
      [eventTitleTemplate]="eventTitleTemplate">
    </mwl-calendar-month-view>

    <mwl-calendar-week-view
      *ngIf="view === CalendarView.Week"
      [viewDate]="viewDate"
      [events]="calendarEvents"
      (eventClicked)="onEventClicked($event)"
      (dayClicked)="dayClicked($event)"
      [locale]="'fr'"
      [eventTitleTemplate]="eventTitleTemplate">
    </mwl-calendar-week-view>

    <mwl-calendar-day-view
      *ngIf="view === CalendarView.Day"
      [viewDate]="viewDate"
      [events]="calendarEvents"
      (eventClicked)="onEventClicked($event)"
      (dayClicked)="dayClicked($event)"
      [locale]="'fr'"
      [eventTitleTemplate]="eventTitleTemplate">
    </mwl-calendar-day-view>
  </div>

  <!-- Panneau latéral pour les détails de l'événement -->
  @if (showSidePanel && selectedEvent) {
    <div class="side-panel">
      <div class="side-panel-header">
        <h2>Détails de l'événement</h2>
        <button class="close-btn" (click)="closeSidePanel()">×</button>
      </div>
      
      <div class="side-panel-content">
        <app-edit-form 
          [selected]="selectedEvent" 
          (saved)="onEventSaved($event)" 
          (created)="onEventCreated($event)" 
          (deleted)="onEventDeleted($event)">
        </app-edit-form>
      </div>
    </div>
  }

  <!-- Overlay pour fermer le panneau latéral -->
  @if (showSidePanel) {
    <div class="overlay" (click)="closeSidePanel()"></div>
  }
</div>

<!-- Template personnalisé pour les événements du calendrier -->
<ng-template #eventTitleTemplate let-event="event">
  <div class="custom-event">
    <span class="event-emoji">{{ getEventIcon(event.meta?.preset) }}</span>
    <span class="event-title">{{ event.title }}</span>
  </div>
</ng-template>