ionic-framework - Ionic-2-Calendar 月查看事件详细信息模板 - 我如何访问有关非时间事件的任何信息？

Question

我使用 ionic2-calendar 在我的应用程序中创建日历。默认事件查看器只有时间和标题，但我也想添加描述和其他字段。由于我无法更改默认设置，因此我四处寻找一些自己制作的方法。事实证明 ionic 有一些叫做模板的东西。我正在使用月视图，所以我感兴趣的模板就是这个。

<ng-template #template let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel">
    ... 
    </ng-template>

    <calendar ... [monthviewEventDetailTemplate]="template"></calendar>

我遇到的问题是我不知道如何访问事件信息。我的事件有一个“desc”字段，其中包含事件的描述，但不知道如何在此处访问它。有谁熟悉这个？我基本上想要{{event.title}}给我活动的标题之类的东西。

标签： ionic-frameworkcalendarionic2-calendar

Answer 1

您可以通过访问所有事件详细信息selectedDate.events，也可以通过在函数上处理它来将自己的属性添加到事件中。

<ng-template #template let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel">
     <calendar-event [events]="selectedDate.events"></calendar-event>
 </ng-template>

另一方面，您可以为一个日历定义多个模板。例如，如果您想处理日历日期视图，则使用[monthviewDisplayEventTemplate]="dateTemplate"

<ng-template #dateTemplate let-view="view" let-row="row" let-col="col">
            <span class="event-label">
              {{view.dates[row*7+col].label}}
                <ion-badge *ngIf="!view.dates[row*7+col].secondary" class="event-count-badge" color="danger">{{myEventsCount[view.dates[row*7+col].label] || ""}}</ion-badge>
            </span>
</ng-template>
<ng-template #detailTemplate let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel">
            <calendar-event [events]="selectedDate.events"></calendar-event>
</ng-template>
            <calendar 
                      [monthviewDisplayEventTemplate]="dateTemplate"
                      [monthviewEventDetailTemplate]="detailTemplate"
                      [eventSource]="eventSource"
                      [calendarMode]="calendar.mode"
                      [currentDate]="calendar.currentDate"
                      [showEventDetail]="true"
                      (onCurrentDateChanged)="onCurrentDateChanged($event)"
                      (onEventSelected)="onEventSelected($event)"
                      (onTitleChanged)="onViewTitleChanged($event)"
                      (onTimeSelected)="onTimeSelected($event)">
            </calendar>