我正在使用 Angular 日历https://github.com/mattlewis92/angular-calendar并且我希望每个单元格拥有多个徽章,每个徽章在柜台中用于不同类型的事件。有不同类型的事件(使用事件中的元属性)。我在使用用于一天事件的计数器时遇到了困难。
这是我想要的结果。
编辑:这是我尝试过的
我使用日历单元的这个自定义模板来添加徽章。
<ng-template #customCellTemplate let-day="day" let-locale="locale">
<div class="cal-cell-top">
<span style="background-color: grey" class="cal-day-badge" *ngIf="day.badgeTotal > 0">{{ day.badgeTotal }}</span>
<span class="cal-day-number">{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span>
</div>
<div>
<span class="cal-day-badge" *ngIf="day.badgeTotal > 0">{{countErrors()}}</span>
<span style="background-color: green" class="cal-day-badge" *ngIf="day.badgeTotal > 0">{{ countSuccesses() }}</span>
<span style="background-color: orange" class="cal-day-badge" *ngIf="day.badgeTotal > 0">{{ countWarnings() }}</span>
</div>
</ng-template>
这三个函数countErrors()
countWarnings()
并countSuccesses()
计算相同类型的事件数(错误或成功或警告)。
事件的类型由meta
属性指定:
{
start: subDays(startOfDay(new Date()), 1),
end: addDays(new Date(), 1),
title: 'A 3 day event',
color: colors.red,
actions: this.actions,
allDay: true,
resizable: {
beforeStart: true,
afterEnd: true
},
draggable: true,
meta : {
type : 0
}
},
当我运行它时,这就是我得到的:
我认为第一天做了一个计数,其他天都得到了同样的结果。
编辑:这是我在模板中调用的函数
countErrors(): number {
let count = 0;
this.events.filter(event => {
if (event.meta.type === 0) {
count++;
}
})
return count;
}
这三个功能是一样的。唯一的区别是if
条件:更改事件类型 0 1 2。