angular-calendar having a show more options to load more events in a day cell of the month view

Question

I'am using angular-calendar with a custom template as given here : https://mattlewis92.github.io/angular-calendar/#/custom-templates,

For the month - view i would like to have a "Show more" option which will load more events in the day cell. By default i want to have only 4 events listed on the day cell. Something similar to google calendar.

Let me know how can if i have an option for this in the month view or if i manually need to populate only 4 events and have a show more icon in the array and on click load the remaining in (eventClicked).

Screenshot of the calendar i am trying:

Answer 1

I found the answer , by creating a custom template and using a EVENT_LIMIT which i have set to 4 , so by default i will have 4 events listed in month view , and if there are 3 more events , i would get the "3 More" in the month view.

More popup html :

 <div class="more-popup scrollbar" *ngIf="moreEvents.length>0" 
[ngStyle]="{'top' : moreEventStyles.top , 'left': moreEventStyles.left}"> 
<div class="header"> 
    <button type="button" class="close close-more-popup" (click)="moreEvents=[]">&times;</button>
    <div class="header-day">{{moreEvents[0].start | date : 'E'}}</div>
    <div class="header-date">{{moreEvents[0].start | date : 'd'}}  </div>
</div>
<div class="body">
    <div  *ngFor="let e of moreEvents">
        <div class="body-events" [ngStyle]="{ backgroundColor: e.color?.primary }" 
         (click)="handleEvent('Clicked', e)">{{e.title}}</div> 
        </div>
    </div>
 </div>


 <mwl-calendar-month-view *ngSwitchCase="CalendarView.Month" [viewDate]="viewDate" 
  [events]="calEvents"  [cellTemplate]="customCellTemplate"    
  (eventClicked)="handleEvent(event, $event.event)"   
   (dayClicked)="dayClicked($event.day)">
 </mwl-calendar-month-view>
<ng-template #customCellTemplate let-day="day" let-locale="locale" 
    let-tooltipPlacement="tooltipPlacement"
    let-highlightDay="highlightDay" let-unhighlightDay="unhighlightDay" 
    let-eventClicked="eventClicked"
    let-tooltipTemplate="tooltipTemplate" 
    let-tooltipAppendToBody="tooltipAppendToBody" let-tooltipDelay="tooltipDelay">
    <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 *ngIf="day.events.length > 0">
        <div  *ngFor="let event of day.events; trackBy: trackByEventId; index as i">


            <ng-template *ngIf="i < EVENT_LIMIT; then showEventsBlock; else showMoreBlock">
            </ng-template>
            <ng-template #showEventsBlock>
                <div class="cal-events" *ngIf="i < EVENT_LIMIT" [ngStyle]="{ backgroundColor: event.color?.primary }"
                [ngClass]="event?.cssClass" (mwlClick)="eventClicked.emit({event: event})" [mwlCalendarTooltip]="event.title | calendarEventTitle: 'monthTooltip':event"
                [tooltipPlacement]="tooltipPlacement" [tooltipEvent]="event" [tooltipTemplate]="tooltipTemplate"
                [tooltipAppendToBody]="tooltipAppendToBody" [tooltipDelay]="tooltipDelay">
                    {{event.title}}
                </div>
            </ng-template>
            <ng-template #showMoreBlock>
                <ng-container *ngIf="i === EVENT_LIMIT">

                <div class="cal-events" (mwlClick)="handleMoreEvent($event,day.events)">
                    <a class="showmore"> {{day.events.length - EVENT_LIMIT}} more</a>
                </div>
            </ng-container>
            </ng-template>
        </div>
    </div>

</ng-template>

ts:

  handleMoreEvent(e: any , events: LogBookCalendarEvent[]) {
     this.moreEvents = events;

     this.moreEventStyles.top = `${e.srcElement.offsetTop}px`;
     this.moreEventStyles.left = `${e.srcElement.offsetLeft}px`;
     this.moreEventStyles = {...this.moreEventStyles};
  }

Screen shot of the result :

On click of the 3 more :

Answer 2

It's a good idea, if you want to do it without popup you can do it like this:

using angular-calendar with a custom template as given here

ts:

    import { Component, ChangeDetectionStrategy } from '@angular/core';
    import { CalendarEvent } from 'angular-calendar';
    import {
      startOfDay,
      addDays,
    } from 'date-fns';
    import { BehaviorSubject, Subject, interval } from 'rxjs';

    @Component({
      selector: 'mwl-demo-component',
      changeDetection: ChangeDetectionStrategy.OnPush,
      templateUrl: 'template.html'
    })
    export class DemoComponent {
      view: string = 'month';

      viewDate: Date = new Date();

      events: CalendarEvent[] = [
        { start: new Date(), title: 'An event' },
        { start: new Date(), title: 'An event' },
        { start: new Date(), title: 'An event' },
        { start: new Date(), title: 'An event' },
        { start: new Date(), title: 'An event' },
        { start: new Date(), title: 'An event' },
        { start: new Date(), title: 'An event' },
        { start: addDays(startOfDay(new Date()), 1), title: 'different date' },
        { start: addDays(startOfDay(new Date()), 1), title: 'different date' },
        { start: addDays(startOfDay(new Date()), 1), title: 'different date' },
        { start: addDays(startOfDay(new Date()), 1), title: 'different date' },
        { start: addDays(startOfDay(new Date()), 1), title: 'different date' },
      ];

      showMore = false;
      showMoreDate = null;

      showMoreClicked(date: Date){
        this.showMoreDate = date;
        this.showMore = ! this.showMore;
      }
    }

change html line of *ngfor to:

`*ngFor="let event of day.events | slice:0:(showMoreDate==day.date && showMore) ? undefined :3; trackBy: trackByEventId"`

change html span to:

 `Show {{ day.events.length - 3 }} {{ (showMoreDate==day.date && showMore) ? 'less' : 'more' }} ` 

result