月間29,000PV達成! 収益は毎日発生中! ギランバレー症候群に関する情報を集めています

【Angular】fullcalendar環境構築手順!

【Angular】fullcalendar環境構築手順!
Advertisement

 

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

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

 

 

僕のPC環境

OS:Windows10

Angular:7

 

 

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

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

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

 

 

Advertisement

 

参考サイト

■angular2-fullcalendar の使い方

URL:「https://qiita.com/kuniatsu/items/203d5d17194b0befb189」

■ng-fullcalendar

URL:「https://www.npmjs.com/package/ng-fullcalendar」

■Stackblitz

URL:「https://stackblitz.com/edit/ng-fullcalendar-demo?file=app%2Fapp.component.ts」

 

 

おすすめ書籍

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

 

 

 

まとめ

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

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

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

ではまた!

Travelerを知らないの?