ionic2-calendarのデフォルトテンプレート

ionic2-calendarのテンプレートをカスタマイズ

自分の記録用として

ionicのカレンダー系ライブラリで（恐らく）一番有名であろうionic2-calendar

ionic2って書いてあるけど、それ以外のバージョンでも使えます（2019年9月の時点でionic4もサポートされてる）

そのライブラリーのテンプレートカスタマイズのヒントとして使えるであろう、デフォルトの状態のコードがこれ

home.page.html

 <ng-template #monthviewDefaultEventDetailTemplate let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel">
            <ion-list class="event-detail-container" has-bouncing="false" *ngIf="showEventDetail" overflow-scroll="false">
                <ion-item *ngFor="let event of selectedDate?.events" (click)="eventSelected(event)">
                        <span *ngIf="!event.allDay" class="monthview-eventdetail-timecolumn">{{event.startTime|date: 'HH:mm'}}
                            -
                            {{event.endTime|date: 'HH:mm'}}
                        </span>
                    <span *ngIf="event.allDay" class="monthview-eventdetail-timecolumn">{{allDayLabel}}</span>
                    <span class="event-detail">  |  {{event.title}}</span>
                </ion-item>
                <ion-item *ngIf="selectedDate?.events.length==0">
                    <div class="no-events-label">{{noEventsLabel}}</div>
                </ion-item>
            </ion-list>
        </ng-template>

これがデフォルトのコード。

よってカレンダーを配置してるページのhtmlに

home.page.html

<calendar [eventSource]="eventSource"
      [calendarMode]="calendar.mode"
      [currentDate]="calendar.currentDate"
      (onCurrentDateChanged)="onCurrentDateChanged($event)"
      (onEventSelected)="onEventSelected(dayEvent)"
      (onTitleChanged)="onViewTitleChanged($event)"
      (onTimeSelected)="onTimeSelected($event)"
      [locale]="calendar.locale"


      [monthviewEventDetailTemplate]="template"

      >
  </calendar>

<!--[monthviewEventDetailTemplate]="template"を追加 -->


<ng-template
 #template 
 let-showEventDetail="showEventDetail"
 let-selectedDate="selectedDate"
 let-noEventsLabel="noEventsLabel"
>
   <ion-list class="event-detail-container" has-bouncing="false" *ngIf="showEventDetail" overflow-scroll="false">
    <!-- もしイベントがある日なら -->
      <ion-item *ngFor="let event of selectedDate?.events" (click)="eventSelected(event)">
      <!-- もしイベントがallDay = falseなら -->
          <span *ngIf="!event.allDay" class="monthview-eventdetail-timecolumn">
               {{event.startTime|date: 'HH:mm'}}
                -
               {{event.endTime|date: 'HH:mm'}}
           </span>
      <!-- もしイベントがallDay = trueなら -->
          <span *ngIf="event.allDay" class="monthview-eventdetail-timecolumn">{{allDayLabel}}</span>
          <span class="event-detail">  |  {{event.title}}</span>
                </ion-item>
    <!-- もしイベントが無い日なら -->
       <ion-item *ngIf="selectedDate?.events.length==0">
          <div class="no-events-label">
              {{noEventsLabel}}
              </div>
             </ion-item>
           </ion-list>
        </ng-template>

あとはこのng-templateの中をカスタマイズすればOK!!

---

参考: https://github.com/twinssbc/Ionic2-Calendar/issues/386