我正在使用带有自定义模板的角度日历,如下所示:https://mattlewis92.github.io/angular-calendar/#/custom-templates https://mattlewis92.github.io/angular-calendar/#/custom-templates,
对于月视图,我希望有一个“显示更多”选项,它将在日单元格中加载更多事件。默认情况下,我只想在当天单元格上列出 4 个事件。类似于谷歌日历的东西。
让我知道如果我在月视图中有一个选项,或者如果我只需要手动填充 4 个事件并在数组中显示更多图标,然后单击加载剩余的事件(eventClicked),该怎么办?
Screenshot of the calendar i am trying:
我找到了答案,通过创建自定义模板并使用我设置为 4 的 EVENT_LIMIT ,因此默认情况下我将在月视图中列出 4 个事件,如果还有 3 个事件,我将得到“3 个更多”在月视图中。
更多弹出 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=[]">×</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 个:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)