大家好我从npm以下为我们的应用程序使用角度日历 enter link description here
请参阅我的component.html代码
<div class="row justify-content-md-center">
<div class="col-md-11 setbg no-padd">
<mwl-calendar-month-view
[viewDate]="viewDate"
[events]="events"></mwl-calendar-month-view>
</div>
</div>
我的component.ts代码位于
之下@Component({
selector: 'app-book-appointment-view',
templateUrl: '../views/book-appointment-view.component.html'
})
export class BookAppointmentViewComponent implements OnInit {
bookAppointmentData: any = {};
bookAppointmentDataTemp: any[] = [];
events: any[] = [];
viewDate: Date = new Date();
@ViewChild('modalContent') modalContent: TemplateRef<any>;
constructor(
private bookService: BookAppointmentService,
private router: Router
) { }
ngOnInit() {
this.bookService.getBookAppointmentsMonth(2, { date: '2018-06' })
.subscribe(suc => {
console.log('suc', suc);
this.bookAppointmentData = suc;
for (let i = 0; i < this.bookAppointmentData.Days.length; i++) {
this.bookAppointmentDataTemp.push({
start: subDays(startOfDay(this.bookAppointmentData.Days[i].dayId), 1),
end: addDays(new Date(this.bookAppointmentData.Days[i].dayId), 1),
title: 'DoctorsCount: ' + this.bookAppointmentData.Days[i].doctorCount + '\n' + 'Total Appointments: ' + this.bookAppointmentData.Days[i].bookedCount
+ '\n' + 'Booked: ' + this.bookAppointmentData.Days[i].bookedCount + '\n' + 'Cancelled: ' + this.bookAppointmentData.Days[i].cancelledCount + '\n' +
'Missed:' + this.bookAppointmentData.Days[i].missedCount
});
}
this.showData();
}, err => { });
}
showData() {
this.events = this.bookAppointmentDataTemp;
}
}
请帮我解决这个问题
我在下面尝试过
<ng-template #customCellTemplate let-day="day" let-locale="locale">
<div class="cal-cell-top">
<span class="cal-day-badge" *ngIf="day.badgeTotal > 0">{{ day.badgeTotal }}</span>
<span class="cal-day-number">{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span>
</div>
<div *ngFor="let data of this.bookAppointmentData.Days">
<small style="margin: 2px">DoctorsCount: {{data.doctorCount}}</small>
<small style="margin: 2px">Total Appointments: {{data.bookedCount}}</small>
<small style="margin: 2px">Booked:</small>
<small style="margin: 2px">Cancelled:</small>
</div>
但它显示如下空白日历