Ionic + Firebaseで記録するカレンダーアプリを作る　その1  Hello World

#完成イメージ

<blockquote class="twitter-tweet" data-theme="dark"><p lang="ja" dir="ltr">こんな感じ。 <a href="https://t.co/CvOFjFq2th">pic.twitter.com/CvOFjFq2th</a></p>&mdash; げん げんと (@gento34165638) <a href="https://twitter.com/gento34165638/status/1190431795877007362?ref_src=twsrc%5Etfw">November 2, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>




#はじめに

環境は以下の通り
・ionic4
・Nativeとの橋渡しには[capacitor](https://capacitor.ionicframework.com)を使用
・カレンダーについては[ionic2-calendar](https://github.com/twinssbc/Ionic2-Calendar#readme)というライブラリーを使用







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


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

```
ionic start myCalendar blank  --capacitor
```

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

config.xmlは従来の[Cordova](https://cordova.apache.org)で使われていたファイル。


##ionic2-calendarのインストール

今回使うカレンダーライブラリー[ionic2-calendar](https://www.npmjs.com/package/ionic2-calendar)をインストール。

```
cd myCalendar
```

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

```
npm install ionic2-calendar
```

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

<img width="280" alt="スクリーンショット 2019-10-06 22.23.18.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/d30ef75e-562b-717e-84c8-2732231a1b86.jpeg">

>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にライブラリーを追加
ついでにデフォルトだと月の名前とか全て英語なので、日本語になるようしておく。

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

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

##home.page.htmlにカレンダーのタグを追加
`<calendar>`内に色々なメソッドがあり、いっぱいエラーが出る。home.page.tsにまだ書いていないからだ。

また、**今回はMonthView（月ごとのカレンダー）しか使わない**から、[ドキュメント](https://www.npmjs.com/package/ionic2-calendar)のサンプルにはある`(onRangeChanged)`は使わない。

```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 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があるけど気にしない。

```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;
  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) { }

}
```

##ブラウザで確認

```
ionic serve
```

で起動させてみる。

<img width="322" alt="スクリーンショット 2019-10-07 16.36.48.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/f6cb3ade-98fc-3f5d-db00-b91240339e71.jpeg">


こんな感じになっていれば、ひとまずハローワールド成功。

右上のTODAYを押せば、今日の日ずけになる。

#参考
https://www.youtube.com/watch?v=SYz-tH3XOF8

https://devdactic.com/ionic-4-calendar-app/

https://github.com/twinssbc/Ionic2-Calendar



#最後に
続き:point_down:
[その２　実機でビルド](https://qiita.com/kokogento/items/6ab47e05ea1e329ff6bc)


各ストアで配信されてます。
興味があれば使ってみてください。:relieved:

<a href="https://apps.apple.com/jp/app/%E6%80%A7%E6%B4%BB%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC/id1484151444?mt=8">Apple Store</a>

[Google Play](https://play.google.com/store/apps/details?id=com.hCalendar.app)