Более одного значка на ячейку - угловой календарь - PullRequest
Новая
       12

Более одного значка на ячейку - угловой календарь

0 голосов
/ 30 октября 2018

Я использую Angular Calendar https://github.com/mattlewis92/angular-calendar и хочу, чтобы в каждой ячейке было больше одного значка, каждый значок в счетчике для события различного типа. Существуют разные типы событий (использование мета-свойства в событии). У меня трудное время со счетчиком событий дня.

Это результат, который я хочу получить.

result i want

РЕДАКТИРОВАТЬ : вот что я пробовал

Я использовал этот пользовательский шаблон ячейки календаря для добавления значков. 

<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
  }
},

Когда я запускаю это, вот что я получаю:

result i have

Я думаю, что один подсчет был выполнен за первый день, и все остальные дни получили тот же результат.

РЕДАКТИРОВАТЬ : вот функция, которую я вызываю внутри шаблона 

countErrors(): number {
let count = 0;
this.events.filter(event => {
  if (event.meta.type === 0) {
    count++;
  }
})
return count;
}

Три функции одинаковы. Единственное отличие заключается в условии if: изменение типа события 0 1 2.

1 Ответ

0 голосов
/ 05 декабря 2018

Я вернулся, просто чтобы сказать, что то, что я искал, уже имело пример в демонстрации Angular Calendar как Групповое представление событий месяца . Смотрите здесь: 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>

И это отображается как: Скриншот

...