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

#ionic2-calendarとは

ionicでカレンダーアプリを開発するのに便利なライブラリーの事。
[公式ページ](https://www.npmjs.com/package/ionic2-calendar)はこちら。

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

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

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

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

#インストール
##ionicプロジェクト作成


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

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

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

##[公式ページ](https://www.npmjs.com/package/ionic2-calendar)からインストール。
先ほど移動した**myCalendar**の階層で
`npm install ionic2-calendar --save`

インストール完了。

ちなみに[公式ページ](https://www.npmjs.com/package/ionic2-calendar)の**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

```typescript: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にも追加

```typescript: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ページを以下のようにする。

```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>
```

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

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

```typescript: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`


<img width="375" alt="スクリーンショット 2019-09-21 13.30.31.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/80bfaca5-1520-7713-3e95-6c5d8a4111ff.jpeg">




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


#参考
https://github.com/jamesonsaunders/Ionic-4-Custom-Calendar-Example