やっほー
【Angular】fullcalendar環境構築手順!

【Angular】fullcalendar環境構築手順!

  • 2019年2月24日
  • 2021年3月19日
  • Angular
  • 177view

Angularでカレンダーを使いたい!

ということで、色々と拡張性のありそうなfullcalendarを導入してみました!

Angular×fullcalendar環境構築手順

ng-fullcalendar」をインストールします。

 

fullcalendar@3.6.1」をインストールします。

 

app.module.ts」に「FullCalendarModule」を追加します。

 

index.html」にCSSのリンクを追加します。

 

index.htmlに記載するのが嫌な方は、上記のように「style.css」へ記載します。

公式サイトだと、「@import “~/fullcalendar/dist/fullcalendar.css”;」のようにfullcalendarの前に「/」が入っていますが、この状態だとエラーが出るので注意してください。

 

jqueryのtypeをインストールします。

これを入れないとトランスパイル時に、「ERROR in node_modules/@types/jquery/index.d.ts」のようなエラーが出ます。

 

fullcalendarを使う専用のコンポーネントを作成します。

 

fullcalendar.component.ts」を上記のように編集します。

 

fullcalendar.component.html」を上記のように編集します。

 

fullcalendar

こんな感じで表示されます。お疲れ様でした!

ちょっと修正加えてます。すみません。。

参考サイト

おすすめ書籍

僕はAngularの勉強をするのに以下の書籍を購入しました。おすすめですよ!

まとめ

Angular×fullcalendarの情報って意外とないですね。

あまり需要がないということなのでしょうかねー?

結構カレンダーって使うと思うんですけど。。

ではまた!

【Angular】fullcalendar環境構築手順!
フォローしてもらえると泣いて喜びます