在angular-fullcalendar中显示数据的问题

时间:2018-06-04 15:07:19

标签: angular angular-calendar

大家好我从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;
    }
}

期望的输出 enter image description here

但我得到的输出低于错误 enter image description here

请帮我解决这个问题

我在下面尝试过

<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>

但它显示如下空白日历

enter image description here  如果我不使用显示空标签的插值

0 个答案:

没有答案