这是我的日历:
<div class="calendarWrapper mat-elevation-z1">
<mat-calendar [dateClass]="dateClass"></mat-calendar>
</div>
字符串
这是要添加的类的scss:
button.orange {
background: orange;
border-radius: 100%;
}
型
这是组件的TypeScript文件:
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { MatCalendarCellClassFunction } from '@angular/material/datepicker';
import { DateTime } from 'luxon';
import { ColorService } from 'src/app/_services/color.service';
import { AppointmentsDTO } from 'src/app/api/models';
import { WebsiteAppointmentsService } from 'src/app/api/services';
import { environment } from 'src/environments/environment';
@Component({
selector: 'bookings-element',
templateUrl: './bookings-element.component.html',
styleUrls: ['./bookings-element.component.scss'],
encapsulation: ViewEncapsulation.None,
})
export class BookingsElementComponent implements OnInit {
selectedDate: string = '';
appointments: AppointmentsDTO[] = [];
constructor(
public colorService: ColorService,
private appointmentsService: WebsiteAppointmentsService
) {}
ngOnInit(): void {}
async getBookings() {
return new Promise<void>((resolve) => {
this.appointmentsService
.getApiWebsiteAppointmentsGetAppointments({
date: this.selectedDate,
tenantid: environment.tenantId,
})
.subscribe((data: any) => {
if (data) {
this.appointments = data;
resolve();
console.log(this.appointments);
}
});
});
}
// dateClass: MatCalendarCellClassFunction<Date> = async (cellDate, view) => {
// if (view === 'month') {
// const cellISODate = DateTime.fromJSDate(new Date(cellDate), {
// zone: 'Europe/Berlin',
// }).toISODate();
// this.selectedDate = DateTime.fromJSDate(new Date(cellISODate), {
// zone: 'Europe/Berlin',
// }).toISODate();
// await this.getBookings();
// console.log('Selected Date:', cellISODate);
// console.log('Appointments:', this.appointments);
// const isBooked = this.appointments.some((appointment) => {
// const startDate = DateTime.fromJSDate(new Date(appointment.startDate), {
// zone: 'Europe/Berlin',
// }).toISODate();
// const endDate = DateTime.fromJSDate(new Date(appointment.endDate), {
// zone: 'Europe/Berlin',
// }).toISODate();
// console.log('Appointment Start Date:', startDate);
// console.log('Appointment End Date:', endDate);
// return (
// DateTime.fromJSDate(new Date(cellISODate), {
// zone: 'Europe/Berlin',
// }) >=
// DateTime.fromJSDate(new Date(startDate), {
// zone: 'Europe/Berlin',
// }) &&
// DateTime.fromJSDate(new Date(cellISODate), {
// zone: 'Europe/Berlin',
// }) <=
// DateTime.fromJSDate(new Date(endDate), {
// zone: 'Europe/Berlin',
// })
// );
// });
// console.log('isBooked:', isBooked);
// return isBooked ? 'orange' : '';
// }
// return '';
// };
dateClass: MatCalendarCellClassFunction<Date> = (cellDate, view) => {
// Only highligh dates inside the month view.
if (view === 'month') {
const date = cellDate.getDate();
// Highlight the 1st and 20th day of each month.
return date === 1 || date === 20 ? 'orange' : '';
}
return '';
};
}
型
问题是,Angular Material的原始dateClass函数一切正常,类正在被添加。但我的自定义dateClass函数却不起作用!它的逻辑像预期的那样工作,但类没有被添加到按钮中。有人知道为什么它没有添加类吗?也许是因为JavaScript,但我需要它来等待API响应。
封装不是问题,就像你在我的TS文件中看到的那样。我希望类“橙子”被添加到按钮中,当来自dateClass函数的isBooked返回true时,它现在被注解了。
1条答案
按热度按时间2o7dmzc51#
根据我的评论,
dateClass
需要是同步的,因为它在DatePicker
中没有被内部等待(参见这里的代码)。因为在你的例子中,
dateClass
依赖于getBookings
方法中设置的数据,另一方面,它似乎依赖于当前选择的日期,你可以移动逻辑。当输入的值发生变化时,运行
getBookings
方法,锁定UI直到响应出现。然后使用手头已有的逻辑。我准备了一个stackblitz here的样本。
编辑:刚刚注意到你的问题依赖于
mat-calendar
而不是mat-date-picker
。尽管如此,同样的逻辑应该是适用的。编辑2:找到了第二个准备stackblitz example的垫子日历。