可以通过以下步骤实现:
import { Component } from '@angular/core';
import { CalendarEvent, CalendarMonthViewDay } from 'angular-bootstrap-calendar';
MyComponent
的组件,并定义一个名为events
的数组来存储日历事件:@Component({
selector: 'app-my-component',
template: `
<mwl-calendar-month-view
[viewDate]="viewDate"
[events]="events"
[activeDayIsOpen]="true"
(dayClicked)="dayClicked($event.day)">
</mwl-calendar-month-view>
`
})
export class MyComponent {
viewDate: Date = new Date();
events: CalendarEvent[] = [
{
start: new Date(), // 事件开始日期
title: '选定日期', // 事件标题
color: { // 事件背景色
primary: '#ad2121',
secondary: '#FAE3E3'
}
}
];
dayClicked(day: CalendarMonthViewDay): void {
// 处理日期点击事件
console.log(day);
}
}
mwl-calendar-month-view
组件来显示日历,并将events
数组传递给它。设置activeDayIsOpen
为true
以确保选定日期的背景色保持可见。events
数组中定义一个事件对象,其中包含开始日期、标题和背景色。在这个例子中,我们使用了红色背景色。dayClicked
方法中,你可以处理日期点击事件。你可以在这个方法中执行任何你想要的操作,比如更新选定日期的背景色。这样,当你在日历中点击选定日期时,它的背景色将保持为红色。
领取专属 10元无门槛券
手把手带您无忧上云