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

Question

我正在使用 angular-calendar 和此处给出的自定义模板：https://mattlewis92.github.io/angular-calendar/#/custom-templates,

对于月 - 查看我想要一个 "Show more" 选项，它将在日单元格中加载更多事件。默认情况下，我只想在日期单元格中列出 4 个事件。类似于 google 日历。

让我知道如果我在月视图中有这个选项，或者如果我手动只需要填充 4 个事件并在数组中显示更多图标并单击加载剩余的 (eventClicked) .

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

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 个：

Answer 2

这是个好主意，如果你想在没有弹出窗口的情况下做到这一点，你可以这样做：

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

将 *ngfor 的 html 行更改为：

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

将 html 跨度更改为：

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

result

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

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

angular-calendar