85 lines
3.1 KiB
HTML
85 lines
3.1 KiB
HTML
<div class="calendar-layout flex flex-col gap-5">
|
||
<header class="calendar-header">
|
||
<div class="calendar-header__top flex items-center justify-between gap-4">
|
||
<p class="calendar-header__label text-xs font-semibold uppercase tracking-[0.35em] text-text-muted">CALENDRIER</p>
|
||
<span class="calendar-header__month text-lg font-semibold text-text-main">
|
||
{{ viewDate() | calendarDate: 'monthViewTitle' : 'fr' | titlecase }}
|
||
</span>
|
||
</div>
|
||
<div class="calendar-header__controls grid">
|
||
<button
|
||
type="button"
|
||
(click)="shiftMonth(-1)"
|
||
aria-label="Mois précédent"
|
||
class="btn btn-sm btn-icon calendar-header__control calendar-header__control--back"
|
||
>
|
||
‹
|
||
</button>
|
||
<button
|
||
type="button"
|
||
(click)="goToToday()"
|
||
aria-label="Revenir à aujourd'hui"
|
||
class="btn btn-sm btn-secondary calendar-header__control calendar-header__control--today"
|
||
>
|
||
Aujourd'hui
|
||
</button>
|
||
<button
|
||
type="button"
|
||
(click)="shiftMonth(1)"
|
||
aria-label="Mois suivant"
|
||
class="btn btn-sm btn-icon calendar-header__control calendar-header__control--forward"
|
||
>
|
||
›
|
||
</button>
|
||
</div>
|
||
@if (selectionLabel(); as label) {
|
||
<span class="calendar-header__selection inline-flex items-center rounded-full border border-border bg-bg-muted px-2 py-0.5 text-xs font-medium text-text-muted">
|
||
{{ label }}
|
||
</span>
|
||
}
|
||
</header>
|
||
|
||
<div class="calendar-frame flex flex-col gap-4 rounded-2xl border border-border bg-card p-5 shadow-surface backdrop-blur-xs">
|
||
<mwl-calendar-month-view
|
||
class="calendar-compact"
|
||
[viewDate]="viewDate()"
|
||
[refresh]="refresh$"
|
||
[cellTemplate]="dayCellTemplate"
|
||
[weekStartsOn]="1"
|
||
[events]="[]"
|
||
></mwl-calendar-month-view>
|
||
</div>
|
||
|
||
<div class="calendar-legend flex flex-wrap items-center justify-center gap-4 text-xs text-text-muted">
|
||
<span class="calendar-legend__item inline-flex items-center gap-2 rounded-full border border-border bg-bg-muted px-3 py-1">
|
||
<span class="calendar-legend__dot calendar-legend__dot--created"></span>
|
||
Création
|
||
</span>
|
||
<span class="calendar-legend__item inline-flex items-center gap-2 rounded-full border border-border bg-bg-muted px-3 py-1">
|
||
<span class="calendar-legend__dot calendar-legend__dot--updated"></span>
|
||
Modification
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<ng-template #dayCellTemplate let-day="day">
|
||
<button
|
||
type="button"
|
||
class="day-cell"
|
||
[ngClass]="getCellClasses(day)"
|
||
(pointerdown)="onDatePointerDown(day, $event)"
|
||
(pointerenter)="onDatePointerEnter(day, $event)"
|
||
(pointerup)="onDatePointerUp(day, $event)"
|
||
>
|
||
<span class="day-number">{{ day.date | date: 'd' }}</span>
|
||
<div class="indicators">
|
||
@if (hasCreated(day.date)) {
|
||
<span class="indicator cal-event-created" aria-hidden="true"></span>
|
||
}
|
||
@if (hasUpdated(day.date)) {
|
||
<span class="indicator cal-event-updated" aria-hidden="true"></span>
|
||
}
|
||
</div>
|
||
</button>
|
||
</ng-template>
|