JavaScript で月間カレンダーを作った (Bootstrap4 でデザイン)

Bootstrap4 が正式リリースされたので、JavaScript だけで月間カレンダーを生成し、Bootstrap4 でデザインしてみた。

結果は以下のデモページでご覧ください。

• デモ : Calendar Using Bootstrap 4
• コード : frontend-sandboxes/index.html at master · Neos21/frontend-sandboxes

実装詳細

現在日を基に、前月と今月、翌月の3ヶ月分のカレンダーを生成したいと考えたので、

• カレンダーを構成するためのデータオブジェクトを生成する処理
• データオブジェクトからカレンダーの HTML を生成する処理

を共通化するように作った。

まずカレンダーを構成するデータオブジェクトを作る。new Date() 時の引数で、月や日に負数を入れても上手く認識してくれる仕様を利用して、月の最終日を求めたり、当該月の範囲外の日付を上手く入れたりできた。

// 例えば以下は2018年2月の最終日を求められる
// 第2引数の月は 0 が1月なので、2 なら3月。3月0日で2月28日になる
new Date(2018, 2, 0);

データオブジェクトは、1週間 = 1行を1つの配列とし、週ごとの配列を抱えた1ヶ月分の配列として作った。つまり、要素数7つ (= 1週間) の配列を、行 (= 週) 分だけ作るようにしたのだ。

これを描画用の関数に渡し、テーブルを作っていく。土日や当月範囲外の日付などを示すクラスもココで付与。Bootstrap4 を使うために詠み込んだ jQuery で操作した。

Bootstrap4 の方だが、地味に col-xs-4 が col-4 になっていたり、クラス名の変動が多かった。常に縦スクロールバーを出すためのスタイリングも若干思っていたようにならず戸惑った。あと jQuery 以外に Popper.js というライブラリにも依存するようになったっぽい。CSS だけ見ればクラス名の変更ぐらいで、これまであったスタイルがゴッソリなくなったような例は特段なかったので、マイグレーションだけちゃんとやれば Bootstrap3 系からの以降も容易か。

本当は六曜とかも載せてみたかったのだが、プログラムからすんなり自動算出できる感じじゃなかったので諦めた。なんだこの面倒臭い仕様は…ｗ