@rifansi/angular-datetime-picker
Version:
Angular Date Time Picker
48 lines (47 loc) • 2.28 kB
HTML
@for (row of rows; track row; let rowIndex = $index) {
<tr role="row">
@for (item of row; track item; let colIndex = $index) {
<td
class="owl-dt-calendar-cell {{ item.cellClass }}"
[tabindex]="isActiveCell(rowIndex, colIndex) ? 0 : -1"
[class.owl-dt-calendar-cell-active]="
isActiveCell(rowIndex, colIndex)
"
[class.owl-dt-calendar-cell-disabled]="!item.enabled"
[class.owl-dt-calendar-cell-in-range]="isInRange(item.value)"
[class.owl-dt-calendar-cell-range-from]="
isRangeFrom(item.value)
"
[class.owl-dt-calendar-cell-range-to]="isRangeTo(item.value)"
[attr.aria-label]="item.ariaLabel"
[attr.aria-disabled]="!item.enabled || null"
[attr.aria-current]="item.value === todayValue ? 'date' : null"
[attr.aria-selected]="isSelected(item.value)"
[style.width.%]="100 / numCols"
[style.paddingTop.%]="(50 * cellRatio) / numCols"
[style.paddingBottom.%]="(50 * cellRatio) / numCols"
(click)="selectCell(item)"
>
<span
class="owl-dt-calendar-cell-content"
[ngClass]="{
'owl-dt-calendar-cell-out': item.out,
'owl-dt-calendar-cell-today': item.value === todayValue,
'owl-dt-calendar-cell-selected': isSelected(item.value),
}"
>
{{ item.displayValue }}
</span>
<div class="owl-dt-calendar-cell-agendas">
@for (agenda of item.agendas.slice(0, 3); track agenda; let i = $index) {
<div
class="owl-dt-calendar-cell-agenda"
[class.owl-dt-calendar-cell-agenda--more]="i === 2 && item.agendas.length > 3"
[style.width.%]="100 / (item.agendas.length > 3 ? 3 : item.agendas.length)"
></div>
}
</div>
</td>
}
</tr>
}