[初心者向け] ionic2-calendarでカレンダーアプリ 準備編

ionic2-calendarとは

ionicでカレンダーアプリを開発するのに便利なライブラリーの事。
公式ページはこちら。

「ライブラリー」とは
便利なプログラムの部品をいっぱい集めて、ひとまとめにしたファイルのこと

ionic2-calendarを使うと、「カレンダーでクリックした所の日付を取得」や「カレンダーにイベントを追加」等が、比較的かんたんに実装できる。

ちなみに

「ionic2-caledar」って名前だが、ionic 2 でしか使えない訳じゃないです！

ったく、ややこしいライブラリー名にしやがって、、、

インストール

ionicプロジェクト作成

ターミナルでプロジェクトを作りたい場所へ移動（この場合はデスクトップ）
ターミナル起動時はuserの階層にいると思うので、
cd Desktop/

ionicプロジェクト作成
ionic start myCalendar blank

作成したプロジェクトに移動
cd myCalendar

公式ページからインストール。

先ほど移動したmyCalendarの階層で
npm install ionic2-calendar --save

インストール完了。

ちなみに公式ページのDependencyの項目で、以下のような情報があります。

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.

ionic4なら「version 0.5.x depends on Ionic 4.0.0-rc.1 onwards.」ってことで、version 0.5という事です。

カレンダーを表示させる

モジュールをimport

app.module.ts

import { NgModule, LOCALE_ID } 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 { HttpClientModule } from '@angular/common/http';

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

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

home.page.htmlに表示したいので、home.module.tsにも追加

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 {}

htmlページを以下のようにする。

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>

  <calendar [eventSource]="eventSource"
        [calendarMode]="calendar.mode"
        [currentDate]="calendar.currentDate"
        (onCurrentDateChanged)="onCurrentDateChanged($event)"
        (onRangeChanged)="reloadSource(startTime, endTime)"
        (onEventSelected)="onEventSelected($event)"
        (onTitleChanged)="onViewTitleChanged($event)"
        (onTimeSelected)="onTimeSelected($event)"
        step="30">
  </calendar>

</ion-content>

の中で色々とエラーが発生。
functionを呼び出そうにも、何もありませんよーっと言われる。

って訳でhome.page.tsにそれらを定義して行こう。

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;

  calendar = {
    mode: 'month',
    currentDate: new Date(),
  };
  selectedDate = new Date();

  constructor() { }

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

  onEventSelected(event) {
    console.log('Event selected:' + event.startTime + '-' + event.endTime + ',' + event.title);
  }

  onTimeSelected(ev) {
    console.log('Selected time: ' + ev.selectedTime + ', hasEvents: ' +
      (ev.events !== undefined && ev.events.length !== 0) + ', disabled: ' + ev.disabled);
    this.selectedDate = ev.selectedTime;
  }

  onCurrentDateChanged(event: Date) {
    console.log('current date change: ' + event);
  }

  onRangeChanged(ev) {
    console.log('range changed: startTime: ' + ev.startTime + ', endTime: ' + ev.endTime);
  }

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

}

ここまでできたら

ionic serve

これでカレンダーを表示する事はできたかと。

参考