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 回答