1

大家好，我在 npm 下面为我们的应用程序使用 angular-calendar 在 此处输入链接描述

请查看我的 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>

但它显示如下空日历

在此处输入图像描述 如果我不使用显示空标签的插值

4

0 回答 0