37 lines
1.1 KiB
HTML
37 lines
1.1 KiB
HTML
<div class="calendar-container">
|
|
<div class="calendar-header">
|
|
<div class="time-column-header"></div>
|
|
<div *ngFor="let day of days" class="day-header">
|
|
{{ getDayLabel(day) }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="calendar-body">
|
|
<div class="time-column">
|
|
<div *ngFor="let hour of hours" class="hour-label">{{ hour }}</div>
|
|
</div>
|
|
<div class="week-grid">
|
|
|
|
|
|
<div *ngFor="let day of days" class="day-column">
|
|
<div *ngFor="let hour of hours" class="hour-cell">
|
|
<div *ngIf="searchAppointments(day, hour) as appointmentDtos">
|
|
<div
|
|
class="appointments-wrapper"
|
|
[ngClass]="{ 'multiple': searchAppointments(day, hour).length > 1 }">
|
|
|
|
<component-appointment
|
|
*ngFor="let appointment of appointmentDtos"
|
|
[appointment]="appointment"
|
|
size="medium"
|
|
[width]="100 / appointmentDtos.length"
|
|
(onClick)="emitAppointment($event)">
|
|
</component-appointment>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|