一个单元格上有多个徽章 - Angular Calendar答案

【问题标题】：More than one badge on a cell - Angular Calendar一个单元格上有多个徽章 - Angular Calendar
【发布时间】：2018-10-30 11:42:55
【问题描述】：

我正在使用 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。

【问题讨论】：

到目前为止您尝试过做什么？您可以在问题中包含任何代码吗？
您好，请向stackoverflow.com/help/how-to-ask介绍自己并纠正您的问题。
@jmdavalos 我目前正在研究它。它不像应该那样工作，但我会编辑我的问题并添加它。
@jmdavalos 代码和结果添加问题

标签： angular angular-calendar

【解决方案1】：

我回来只是说我正在寻找的东西已经在 Angular 日历演示中作为组月视图事件的示例。见这里：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

【讨论】：