132 lines
4.3 KiB
HTML
132 lines
4.3 KiB
HTML
<div class="calendar-container">
|
||
<!-- En-tête du calendrier -->
|
||
<div class="calendar-header">
|
||
<div class="calendar-controls">
|
||
<button class="btn btn-nav" (click)="previousMonth()">‹</button>
|
||
<h2 class="calendar-title">{{getMonthName()}} {{currentYear}}</h2>
|
||
<button class="btn btn-nav" (click)="nextMonth()">›</button>
|
||
</div>
|
||
<button class="btn btn-today" (click)="goToToday()">Aujourd'hui</button>
|
||
</div>
|
||
|
||
<!-- Statistiques -->
|
||
<div class="calendar-stats">
|
||
<div class="stat-item">
|
||
<span class="stat-number">{{getTotalEventsCount()}}</span>
|
||
<span class="stat-label">Total événements</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-number">{{getEventsThisMonth()}}</span>
|
||
<span class="stat-label">Ce mois</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Grille du calendrier -->
|
||
<div class="calendar-grid">
|
||
<!-- En-têtes des jours -->
|
||
<div class="calendar-weekdays">
|
||
@for (day of weekDays; track day) {
|
||
<div class="weekday-header">{{day}}</div>
|
||
}
|
||
</div>
|
||
|
||
<!-- Jours du calendrier -->
|
||
<div class="calendar-days">
|
||
@for (day of calendarDays; track day.getTime()) {
|
||
<div
|
||
class="calendar-day"
|
||
[class.today]="isToday(day)"
|
||
[class.other-month]="!isCurrentMonth(day)"
|
||
[class.weekend]="isWeekend(day)"
|
||
[class.selected]="selectedDate?.toDateString() === day.toDateString()"
|
||
(click)="onDateClick(day)">
|
||
|
||
<div class="day-number">{{day.getDate()}}</div>
|
||
|
||
@if (getEventCountForDate(day) > 0) {
|
||
<div class="event-indicator">
|
||
<span class="event-count">{{getEventCountForDate(day)}}</span>
|
||
</div>
|
||
}
|
||
|
||
<div class="day-events">
|
||
@for (event of getEventsForDate(day).slice(0, 3); track event.id) {
|
||
<div
|
||
class="event-preview"
|
||
[class]="'event-type-' + (event.type || 'default')"
|
||
(click)="onEventClick(event, $event)"
|
||
[title]="event.title">
|
||
{{event.title}}
|
||
</div>
|
||
}
|
||
@if (getEventsForDate(day).length > 3) {
|
||
<div class="more-events">+{{getEventsForDate(day).length - 3}} autres</div>
|
||
}
|
||
</div>
|
||
</div>
|
||
}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Panel de détails de l'événement -->
|
||
@if (showEventDetails && selectedEvent) {
|
||
<div class="event-details-panel">
|
||
<div class="panel-header">
|
||
<h3>Détails de l'événement</h3>
|
||
<button class="btn-close" (click)="closeEventDetails()">×</button>
|
||
</div>
|
||
|
||
<div class="panel-content">
|
||
<div class="event-title">{{selectedEvent.title}}</div>
|
||
|
||
@if (selectedEvent.description) {
|
||
<div class="event-description">
|
||
<strong>Description :</strong>
|
||
<p>{{selectedEvent.description}}</p>
|
||
</div>
|
||
}
|
||
|
||
@if (selectedEvent.location) {
|
||
<div class="event-location">
|
||
<strong>📍 Lieu :</strong>
|
||
<span>{{selectedEvent.location}}</span>
|
||
</div>
|
||
}
|
||
|
||
<div class="event-datetime">
|
||
<strong>📅 Date :</strong>
|
||
<span>{{selectedEvent.start | date:'dd/MM/yyyy à HH:mm'}}</span>
|
||
</div>
|
||
|
||
@if (selectedEvent.end) {
|
||
<div class="event-end">
|
||
<strong>⏰ Fin :</strong>
|
||
<span>{{selectedEvent.end | date:'dd/MM/yyyy à HH:mm'}}</span>
|
||
</div>
|
||
}
|
||
|
||
@if (selectedEvent.type) {
|
||
<div class="event-type">
|
||
<strong>Type :</strong>
|
||
<span class="type-badge">{{selectedEvent.type}}</span>
|
||
</div>
|
||
}
|
||
|
||
@if (selectedEvent.properties) {
|
||
<div class="event-properties">
|
||
<strong>Propriétés :</strong>
|
||
<div class="properties-list">
|
||
@for (prop of getObjectKeys(selectedEvent.properties); track prop) {
|
||
<div class="property-item">
|
||
<span class="property-key">{{prop}} :</span>
|
||
<span class="property-value">{{selectedEvent.properties[prop]}}</span>
|
||
</div>
|
||
}
|
||
</div>
|
||
</div>
|
||
}
|
||
</div>
|
||
</div>
|
||
}
|
||
</div>
|
||
|