83 lines
2.9 KiB
HTML
83 lines
2.9 KiB
HTML
<div class="calendar" role="group" [attr.aria-label]="getMonthName() + ' ' + year">
|
|
<h3>
|
|
{{ getMonthName() }} <span>{{ year }}</span>
|
|
</h3>
|
|
<div>
|
|
<div class="row header">
|
|
@if (calendarSettingsService.get('showWeekNumbers')()) {
|
|
<p class="day empty week-number"></p>
|
|
}
|
|
@for (letter of getWeekdayLetters(); track $index) {
|
|
<p class="day">{{ letter }}</p>
|
|
}
|
|
</div>
|
|
<div class="cols">
|
|
@for (week of weeksInAMonth; track $index) {
|
|
<div class="row week">
|
|
@if (calendarSettingsService.get('showWeekNumbers')()) {
|
|
<p
|
|
class="day week-number"
|
|
[class.start]="$index === 0"
|
|
[class.end]="$index === weeksInAMonth.length - 1"
|
|
>
|
|
{{ getWeekNumber(week) }}
|
|
</p>
|
|
}
|
|
@for (day of week; track $index) {
|
|
@if (day === null) {
|
|
<p class="day empty"></p>
|
|
} @else {
|
|
@let dayTooltip = getDayTooltip(day);
|
|
@let dateKey = getDateKey(day);
|
|
@let status = getStatus(day);
|
|
<button
|
|
type="button"
|
|
[attr.data-date]="dateKey"
|
|
[class.past]="day < getNow()"
|
|
[class.start]="selectedDates.isStart(day)"
|
|
[class.end]="selectedDates.isEnd(day)"
|
|
[class.selected]="selectedDates.isSelected(day)"
|
|
[class.current]="dateKey === currentDate"
|
|
[class.explained-period]="isInExplainedPeriod(day)"
|
|
[class.context-only]="!isInHorizon(day)"
|
|
[class.eligible]="status?.kind === 'eligible'"
|
|
[class.ineligible]="status?.kind === 'ineligible'"
|
|
[class.chosen]="status?.kind === 'chosen'"
|
|
[class.evaluated-rejected]="status?.kind === 'evaluated-rejected'"
|
|
[class.pruned]="status?.kind === 'pruned'"
|
|
[class.not-examined]="status?.kind === 'not-examined'"
|
|
[class.change-added]="status?.change === 'added'"
|
|
[class.change-moved-from]="status?.change === 'moved-from'"
|
|
[class.change-moved-to]="status?.change === 'moved-to'"
|
|
[class.change-removed]="status?.change === 'removed'"
|
|
[class.change-shared]="status?.change === 'shared'"
|
|
[class.change-unchanged]="status?.change === 'unchanged'"
|
|
[class]="selectedDates.getClasses(day)"
|
|
class="day number"
|
|
[disabled]="!isInHorizon(day)"
|
|
[matTooltip]="dayTooltip"
|
|
[matTooltipShowDelay]="500"
|
|
[attr.aria-label]="getDayAriaLabel(day, dayTooltip)"
|
|
[attr.aria-current]="dateKey === currentDate ? 'date' : null"
|
|
(click)="dateSelected.emit(dateKey)"
|
|
>
|
|
<span>{{ day.getDate() }}</span>
|
|
@if (status) {
|
|
<small class="status-marker" aria-hidden="true">{{
|
|
getStatusMarker(day)
|
|
}}</small>
|
|
@if (status.hypotheticalLabel) {
|
|
<small class="hypothetical-marker" aria-hidden="true">{{
|
|
getHypotheticalMarker(status)
|
|
}}</small>
|
|
}
|
|
}
|
|
</button>
|
|
}
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|