【Angular】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'を追加している点です。これでカレンダーが日本語表示になります。

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

次の記事→

参考サイト:

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

ブログ運営者

・関連記事







プログラミングの独学はとても難しい


プログラミングは小学校の義務教育にも導入され始めており、これから社会人として生きていく上でプログラミングはもはや出来て当たり前、出来なれば論外というエクセルレベルの必須スキルになりつつあります。そしてそういう話を聞いて参考書なりを購入して独学でプログラミング勉強しようと思っている人も少なくないでしょう。しかしプログラミングを独学で勉強し始めようと思うものの



・「分からない箇所で詰まって挫折してしまった」

・「勉強する時間が足りない」

・「ネットの記事だと情報が断片的でよくわからない」

・「コードのエラーの原因が分からない」



という壁にぶち当たって、プログラミングの勉強を止めてしまう方が少なくありません。独学でプログラミングを勉強してる時間のほとんどはつまづいている時間です。実際僕も最初のころ独学でプログラミングを勉強していた頃はエラーの原因が分からず丸1日を不意にしてしまった・・・そんな苦い経験がありました。それで僕は一度はプログラミングの学習を諦めてしまいましたが、就活で現実を知る中で



「プログラミングを勉強して、いずれフリーランスとして自由な生き方がしたい」

「エンジニアとして若いうちから高収入を得たい」



という強い気持ちから一念発起して「侍エンジニアのwebサービスコース」に申し込み、プロのエンジニアの方に対面でマンツーマンでPythonによるWebサービス作り方とWeb技術の基本を教えてもらい、ようやくプログラミングが理解でき、今ではエンジニアとしてそこそこの暮らしができるようになりました。





侍エンジニアでは、とりあえずプログラミングやインターネットの基本を知っておきたい人から、HTML・cssなどでWebサイトやWebアプリを作ってみたい人やPythonを勉強してデータサイエンティストやAIエンジニアになりたい人まで幅広いニーズに応えた様々なコースが用意されています。



IT業界と言ってもエンジニアの仕事はプログラミング言語次第でサーバーから機械学習・ディープラーニングまで多種多様ですし、侍エンジニアの無料レッスン(カウンセリング)を受けてみて、自分のやりたいITの仕事は何なのか?を見つけるのがエンジニアへの第一歩になります。ちなみに今侍エンジニアの無料レッスンを受けると1000円分のAmazonギフト券がもらえるので、試しに受けてみるだけもお得です。


自分は半端に独学やオンラインスクールで勉強して金と時間を無駄にするくらいなら、リアルのプログラミングスクールに通ってしっかりプログラミングを勉強した方がいいと思います。ちなみに今、侍エンジニアに申し込むと、25歳以下の学生の方であれば、受講料が20%OFFになるので超お得です。


そして、プログラミングは大勢で授業を受けたり漫然とオンライン学習をするよりも自分が分からない箇所をピンポイントでプロの講師に直接質問して、ちゃんと納得するというスタイルの方がお金は確かに少し掛かりますが、独学で学ぶよりも絶対にモノになります。


シェアする

  • このエントリーをはてなブックマークに追加

フォローする