单元格上有多个徽章-Angular日历

Question

我正在使用Angular日历https://github.com/mattlewis92/angular-calendar，并且我希望每个单元格具有多个徽章，计数器中的每个徽章用于不同类型的事件。有不同类型的事件（在事件中使用meta属性）。 我在一天的活动中使用柜台的时间很麻烦。

这是我想要的结果。

编辑：这是我尝试过的

我使用了日历单元格的自定义模板来添加徽章。

$this

三个功能<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; } 条件：更改事件类型0 1 2。

Answer 1

我回来只是想说我正在寻找的东西已经在Angular Calendar演示中作为 Group month view events 了。 看到这里：https://mattlewis92.github.io/angular-calendar/#/group-month-view-events 我仍然必须使用提供的css自定义单元格模板：

<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 class="cell-totals">
    <span
      *ngFor="let group of day.eventGroups"
      class="badge badge-{{ group[0] }}">
      {{ group[1].length }}
    </span>
  </div>
</ng-template>

然后我通过了这样的自定义模板：

<mwl-calendar-month-view
    *ngSwitchCase="'month'"
    [viewDate]="viewDate"
    [events]="events"
    [cellTemplate]="customCellTemplate"
    (beforeViewRender)="beforeMonthViewRender($event)"
    [activeDayIsOpen]="true">
  </mwl-calendar-month-view>

它的显示方式如下： screenshot