カレンダーUIの検討

カレンダーのUI設計

ここでは、大きな目的があってカレンダーを使う訳ではありませんので、
UIには余り手をかけたくありません。
自分で作ると、結構大変です。(時間表示のバーの表示とか)

そこで探してみると、「Fullcalendar」という javascript の UI があるようです。
ライセンスが微妙ですが、商用利用でなければまず問題ないようです。
スケジューラー・プラグインもあり、こちらは基本有料です。
(2018/10現在で、$90/siteとありますFullCalendar Scheduler)

FullCalendar の設定

ダウンロードした css と js をアプリケーション配下に置きます。
http の head でリンクします。

<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='lib/jquery.min.js'></script>
<script src='lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>

V4.x から大きな変更がありました。
一番大きいのは、jQuery、moment が不要になった事です。
ここでは、そのまま使う事にします。

パスは自分で置いた場所に変えます。
jquery　は別途読み込んでいる場合が多いと思います。
moment.js は日付変換用のライブラリです。
単体でも、javascript 標準の Date を扱うより結構便利らしいです。

初期化は、

<script>
$(function() {

  // page is now ready, initialize the calendar...

  // Ver  3.x 以前
  $('#calendar').fullCalendar({
    // put your options and callbacks here
  })

  // vaer 4.x 以降(jQueryは必須では無くなりました)
  var calendar = new FullCalendar.Calendar($('#calendar').get(0), {
    initialView: 'dayGridMonth'
  });
  calendar.render();

});
</script>

表示する場所は、

<div id='calendar'></div>

で、とりあえずカレンダーが表示されるはずです。
結構良さそうです。

« 前頁

次頁 »