【Angular】fullcalendarのカレンダー表示を日本語化してみる

前回のあらすじ

【Angular】fullcalendarでGoogleカレンダーライクな画面を実装する

https://tkstock.site/2020/04/18/angular-fullcalendar-googleカレンダー-スケジューラ

Angularでgoogleカレンダーを実装する Angularで無料でGoogleカレンダーライクな画面を実装するライブラリはざっとググった結果有名なのは以下の2つかなと思います Fullcalendar Angular-calendar スケジューラーが無料で使えるAngular-calendar、スケジューラーが有料であるものの利用者が多く困った時に情報の多いfullcalendarと一長一短ではありますが、今回はとりあえず有名なfullcalendarの方で実装していきたいと思います。作業環境 OS：Windows10 Angular：8.23 fullcalendar...

↑前回の記事でfullcalendarの導入方法について解説しましたが、これだけだと、Googleカレンダーのようなスケジューラーとして使うことは無理なので、いろいろとカスタマイズしていくと共に仕様とかについて自分が現時点で知っている限り解説していきたいと思います。

fullcalendarの日本語化する

まずfullcalendarを日本語化します。これはhtmlに引数localesを追加するだけでできます。最初はtsの方に記述していてなぜか反映されず苦労しました。(ファイル構成とかは前回の記事に書いてあるのでそちらを参照してください)

スケジュール追加機能を実装する

まずはカスタム用のコンポーネントを作成します。

# コンポーネントの作成
$ ng generate component custom-fullcalendar-sample

<app.module.ts>

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
~~~~
~~~~
import { CustomFullcalendarSampleComponent } from './custom-fullcalendar-sample/custom-fullcalendar-sample.component'; // これを追加!

declarations: [
    AppComponent,
    ~~~~
    ~~~~
    CustomFullcalendarSampleComponent //これを追加
    ]
~~~~

モジュールの次にルーティングの設定もしておきます。

<app-routing.module.ts>

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
~~~~
~~~~
import { CustomFullcalendarSampleComponent } from "./custom-fullcalendar-sample/custom-fullcalendar-sample.component"; // これを追加!

const routes: Routes = [
    ~~~~
    ~~~~
  {
    path: "custom-fullcalendar-sample",
    component: CustomFullcalendarSampleComponent,
  }, //これを追加!,
];

モジュールとルーティングの設定が終わったらコンポーネントに追記していきます。

<custom-fullcalendar-sample.component.ts>

import { Component, OnInit } from "@angular/core";
import dayGridPlugin from "@fullcalendar/daygrid";//これを追加!

@Component({
  selector: "app-custom-fullcalendar-sample",
  templateUrl: "./custom-fullcalendar-sample.component.html",
  styleUrls: ["./custom-fullcalendar-sample.component.css"],
})
export class CustomFullcalendarSampleComponent implements OnInit {
  calendarPlugins = [dayGridPlugin]; //これを追加!

  constructor() {}

  ngOnInit() {}
}

<custom-fullcalendar-sample.component.html>

<full-calendar defaultView="dayGridMonth" [plugins]="calendarPlugins" locale='ja'></full-calendar>

前回との違いはhtmlのfullcalendarタグにlocale='ja'を追加している点です。これでカレンダーが日本語表示になります。

次はここに予定登録機能を追加していきます。

Angular超入門

掌田津耶乃秀和システム 2019年06月18日

参考サイト：

https://therichpost.com/how-to-implement-fullcalendar-in-angular-8/

https://stackoverflow.com/questions/56667429/loading-events-on-init-with-fullcalendar-4-and-angular-8

https://qiita.com/kcnao37/items/dcbdd6a098cdecbfe5cc