angular-calendar - 角度日历具有显示更多选项以在月视图的日单元格中加载更多事件

Question

我正在使用带有自定义模板的角度日历，如下所示：https ://mattlewis92.github.io/angular-calendar/#/custom-templates ，

对于本月 - 视图，我希望有一个“显示更多”选项，它将在日单元格中加载更多事件。默认情况下，我只想在日单元格上列出 4 个事件。类似于谷歌日历的东西。

让我知道如果我在月视图中有一个选项，或者如果我手动需要仅填充 4 个事件并在数组中显示更多图标并单击加载其余的（eventClicked）。

我正在尝试的日历的屏幕截图：

标签： angular-calendar

Answer 1

我找到了答案，通过创建一个自定义模板并使用我设置为 4 的 EVENT_LIMIT ，所以默认情况下我将在月视图中列出 4 个事件，如果还有 3 个事件，我会得到“3 More”在月视图中。

更多弹出 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};
  }

结果的屏幕截图：

单击另外 3 个：