Corredor

ウェブ、プログラミングの勉強メモ。

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

HTML5+CSS3でつくる!  レスポンシブWebデザイン

HTML5+CSS3でつくる! レスポンシブWebデザイン

  • 作者: 大串肇,齋木弘樹,清野奨,嵩本康志,松尾祥子,松尾慎太郎,宮崎優太郎,吉澤富美
  • 出版社/メーカー: ソーテック社
  • 発売日: 2016/03/17
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログ (1件) を見る

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

結果は以下のとおり。このプレビューだと幅が狭いと思うので、CodePen を開いて見てもらえればと。

See the Pen JavaScript Calendar (Using Bootstrap 4) by Neos21 (@Neos21) on CodePen.

実装詳細

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

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