title: More than one badge on a cell - Angular Calendar
body: <p>I am using Angular Calendar <a href="https://github.com/mattlewis92/angular-calendar" rel="nofollow noreferrer">https://github.com/mattlewis92/angular-calendar</a> 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.</p>
  
  <p>This is the result i want to have.</p>
  
  <p><img src="https://i.stack.imgur.com/5y6ai.png" alt="result i want"> </p>
  
  <p><strong>EDIT</strong> : here's what i have tried</p>
  
  <p>I used this custom template of the calendar cell to add the badges.</p>
  
  <pre><code>&lt;ng-template #customCellTemplate let-day="day" let-locale="locale"&gt;
    &lt;div class="cal-cell-top"&gt;
      &lt;span style="background-color: grey" class="cal-day-badge" *ngIf="day.badgeTotal &gt; 0"&gt;{{ day.badgeTotal }}&lt;/span&gt;
      &lt;span class="cal-day-number"&gt;{{ day.date | calendarDate:'monthViewDayNumber':locale }}&lt;/span&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;span class="cal-day-badge" *ngIf="day.badgeTotal &gt; 0"&gt;{{countErrors()}}&lt;/span&gt;
      &lt;span style="background-color: green" class="cal-day-badge" *ngIf="day.badgeTotal &gt; 0"&gt;{{ countSuccesses() }}&lt;/span&gt;
      &lt;span style="background-color: orange" class="cal-day-badge" *ngIf="day.badgeTotal &gt; 0"&gt;{{ countWarnings() }}&lt;/span&gt;
    &lt;/div&gt;
  &lt;/ng-template&gt;
  </code></pre>
  
  <p>The three functions <code>countErrors()</code> <code>countWarnings()</code> and <code>countSuccesses()</code> count the number of events of the same type ( error or success or warning ).</p>
  
  <p>The type of event is specified with the <code>meta</code> property :</p>
  
  <pre><code>{
    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
    }
  },
  </code></pre>
  
  <p>When i run this, this is what i get :</p>
  
  <p><img src="https://i.stack.imgur.com/IyO3R.png" alt="result i have"></p>
  
  <p>I think one count was done for the first day, and all the other days got this same result.</p>
  
  <p><strong>EDIT</strong> : here's the function i call inside the template</p>
  
  <pre><code>countErrors(): number {
  let count = 0;
  this.events.filter(event =&gt; {
    if (event.meta.type === 0) {
      count++;
    }
  })
  return count;
  }
  </code></pre>
  
  <p>The three functions are same. The only difference is the <code>if</code> condition : changing the event type 0 1 2.</p>