【JavaScript】JQueryプラグインの「FullCalendar」を使ってカレンダーをサクッと表示してみる

Javascript, 開発

おはようございます。

ふと、WEBでスケジュール管理できる何かを作りたいと思い立ち
色々調べてみたら「FullCalendar」というJQueryプラグインがとても便利そうだったので試しに使ってみました。

ダウンロード

https://fullcalendar.io/download

ダウンロードサイト
ダウンロードサイト

(執筆時点の最新バージョン)
fullcalendar-3.9.0.zip リンクをクリックしてソースをダウンロードします。

スポンサーリンク

サンプルの作成

フォルダ構成

ダウンロードしたファイルを解凍し、次の構成で配置します。

│ index.html
├─css
│     fullcalendar.min.css
│     fullcalendar.print.min.css
│     style.css
├─js
│     fullcalendar.min.js
│     moment.min.js
└─lang
ja.js

index.html、style.css は今回作成するファイルです。

プログラムの記述

画面
index.html

スタイル
style.css

起動してみる

index.html をブラウザで開きます。

初期表示
初期表示

簡単にカレンダーが表示できました。

予定入力プロンプト
予定入力プロンプト

 

 

 

 

 

予定表示
予定表示

しかも日付をクリック、またはドラッグ(複数日)し、表示されるプロンプトにタイトルを入力すると簡単にカレンダーに予定が反映されます。

まとめ

WEBで何かサービスを作る場合、
カレンダーが必要であれば利用を検討してみるといいですね。

解凍したファイルにデモのソースも色々入っているので、
次回はもう少し掘り下げて触ってみたいと思います。

スポンサーリンク


関連するコンテンツ