2

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

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

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

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

4

2 回答 2

4

我找到了答案，通过创建一个自定义模板并使用我设置为 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 个：

在此处输入图像描述

于 2019-07-29T10:09:12.917 回答
2

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

使用带有自定义模板的角度日历，如此处给出

ts：

    从'@angular/core'导入{组件，ChangeDetectionStrategy}；
    从“角度日历”导入 { CalendarEvent }；
    进口 {
      开始日，
      添加天数，
    } 来自“日期-fns”；
    从'rxjs'导入{ BehaviorSubject，主题，间隔}；

    @零件（{
      选择器：'mwl-demo-component',
      changeDetection：ChangeDetectionStrategy.OnPush，
      模板网址：'模板.html'
    })
    导出类 DemoComponent {
      视图：字符串 = '月';

      查看日期：日期 = 新日期（）；

      事件：日历事件[] = [
        { start: new Date(), title: '一个事件' },
        { start: new Date(), title: '一个事件' },
        { start: new Date(), title: '一个事件' },
        { start: new Date(), title: '一个事件' },
        { start: new Date(), title: '一个事件' },
        { start: new Date(), title: '一个事件' },
        { start: new Date(), title: '一个事件' },
        { start: addDays(startOfDay(new Date()), 1), title: '不同的日期' },
        { start: addDays(startOfDay(new Date()), 1), title: '不同的日期' },
        { start: addDays(startOfDay(new Date()), 1), title: '不同的日期' },
        { start: addDays(startOfDay(new Date()), 1), title: '不同的日期' },
        { start: addDays(startOfDay(new Date()), 1), title: '不同的日期' },
      ];

      显示更多 = 假；
      显示更多日期 = 空；

      showMoreClicked（日期：日期）{
        this.showMoreDate = 日期；
        this.showMore = ! this.showMore;
      }
    }

将 *ngfor 的 html 行更改为：

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

将html跨度更改为：

`显示 {{ day.events.length - 3 }} {{ (showMoreDate==day.date && showMore) ? '少' : '更多' }} `

结果

于 2020-04-04T09:09:24.790 回答