91 lines
No EOL
2.8 KiB
HTML
91 lines
No EOL
2.8 KiB
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> |