I am using Angular Calendar https://github.com/mattlewis92/angular-calendar and i want to have more than one badge per cell, each badge in a counter for a different type of event. There is different types of events (using the meta property in event). I am having a difficult time with the counter used for the events of a day.
This is the result i want to have.
EDIT : here's what i have tried
I used this custom template of the calendar cell to add the badges.
<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>
The three functions countErrors()
countWarnings()
and countSuccesses()
count the number of events of the same type ( error or success or warning ).
The type of event is specified with the meta
property :
{
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
}
},
When i run this, this is what i get :
I think one count was done for the first day, and all the other days got this same result.
EDIT : here's the function i call inside the template
countErrors(): number {
let count = 0;
this.events.filter(event => {
if (event.meta.type === 0) {
count++;
}
})
return count;
}
The three functions are same. The only difference is the if
condition : changing the event type 0 1 2.
I came back just to say that the thing i was looking for had already an example in the Angular Calendar demo as the Group month view events. See here : https://mattlewis92.github.io/angular-calendar/#/group-month-view-events I still had to custom the cell template using the provided css :
And then i passed this customized template like :
And it's being displayed like : screenshot