完成イメージ

こんな感じ。 pic.twitter.com/CvOFjFq2th
— げんげんと (@gento34165638) November 2, 2019

はじめに

環境は以下の通り
・ionic4
・Nativeとの橋渡しにはcapacitorを使用
・カレンダーについてはionic2-calendarというライブラリーを使用

プロジェクト作成と必要なカレンダーライブラリー等のインストール

ターミナルからionicプロジェクト作成

ionic start myCalendar blank  --capacitor

ちなみに
--capacitorがあると、config.xmlの代わりにcapacitor.config.jsonが作成される。

config.xmlは従来のCordovaで使われていたファイル。

ionic2-calendarのインストール

今回使うカレンダーライブラリーionic2-calendarをインストール。

cd myCalendar

でプロジェクトフォルダに移動。

npm install ionic2-calendar

でカレンダーライブラリーをインストール。

version 0.1.x depends on Ionic 2.0.0-rc.1 ~ Ionic 2.0.0-rc.4
version 0.2.x depends on Ionic 2.0.0-rc.5 (rc.5 has breaking change on the slide API) and 2.0.0 final version onwards. version 0.2.9+ depends on Ionic 2.3.0 version onwards.
version 0.3.x depends on Ionic 3.1.1 version onwards.
version 0.4.x depends on Ionic 3.9.2 version onwards.
version 0.5.x depends on Ionic 4.0.0-rc.1 onwards.

version 0.5以上がionic4対応となる。

カレンダーを表示させてみる

app.moduleにライブラリーを追加

ついでにデフォルトだと月の名前とか全て英語なので、日本語になるようしておく。

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

// カレンダーライブラリー
import { NgCalendarModule } from 'ionic2-calendar';

// 日本語にする設定
import { registerLocaleData } from '@angular/common';
import localeJa from '@angular/common/locales/ja';

registerLocaleData(localeJa); // 追加

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    NgCalendarModule // 追加
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: LOCALE_ID, useValue: 'ja-JP' } // 追加
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

home.page.moduleにもライブラリーを追加

今回はhomeをメイン画面としてカレンダーを表示させるから、home.page.moduleにも追加。

home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { HomePage } from './home.page';

import { NgCalendarModule } from 'ionic2-calendar'; // 追加

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ]),
    NgCalendarModule // 追加
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

home.page.htmlにカレンダーのタグを追加

<calendar>内に色々なメソッドがあり、いっぱいエラーが出る。home.page.tsにまだ書いていないからだ。

また、今回はMonthView（月ごとのカレンダー）しか使わないから、ドキュメントのサンプルにはある(onRangeChanged)は使わない。

home.page.html

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      {{ viewTitle }}
    </ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="today()">Today</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <calendar
  [eventSource]="eventSource" 
  [calendarMode]="calendar.mode" 
  [currentDate]="calendar.currentDate"
    (onCurrentDateChanged)="onCurrentDateChanged($event)" 
    (onEventSelected)="onEventSelected($event)" 
    (onTitleChanged)="onViewTitleChanged($event)"
    (onTimeSelected)="onTimeSelected($event)"
     step="30">  
  </calendar>
</ion-content>

home.page.tsにカレンダーの設定を書いていく

色々と空っぽのfunctionがあるけど気にしない。

home.page.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  eventSource = [];
  viewTitle;
  selectedDate = new Date();
  calendar = {
    mode: 'month',
    currentDate: new Date(),
    locale: 'ja-JP'
  };

  constructor() { }

  onViewTitleChanged(title) {
    this.viewTitle = title;
  }

  // 選択した日付を取得&サービスのaddNewEventを設定
  onTimeSelected(ev) {
    const selected = new Date(ev.selectedTime);
    console.log(selected);
  }

  today() {
    this.calendar.currentDate = new Date();
  }

  async onEventSelected() {
    console.log('onEventSelected');
  }

  eventSelected(event) {

  }


  onCurrentDateChanged(event: Date) { }

}