ラック
Home > ブログ > 記事 > 2016年10月 > モーダルウインドウでカレンダーを表示

モーダルウインドウでカレンダーを表示

カテゴリ: Web自作

Webサイトにカレンダーを表示させたくなること、ありますよね。きちんと曜日ごとに7列の表形式になっているもの。

しかし、表形式ですと場所を取ってしまうのでモーダルウインドウで表示させたい、ということもあります。混雑状況も付けたいですね。…などなど、必要な機能をリストアップしていたらどうにもニーズにマッチしたプラグインを探すのが面倒になってきたので、自分で作ってしまうことにしました。

jQueryで、混雑状況をjsonで日ごとに指定できるようにして、ついでにtableタグではなく、Flexboxで実装してみました。

色々やりたいことがあったので、その辺りをまるっと専用ページを作りまして、特徴・機能・使い方・デモなどをまとめました。

ついでに使い回しができるようにjQueryプラグインの形にしました。折角なのでソースを公開しておきます(MITライセンスの方式ってこれで良いのでしょうか?)。元々自分用なので痒いところに手が届かなかったり、バグがあったりすることは十分考えられますが、誰かの助けになれば…。ただし、使用は自己責任でお願いします。

それと、デモページではBootstrapやらFont Awesomeやら使っていますがその辺りは適宜カスタマイズで。

以下、参考サイトとつまづいたポイントをメモしておきます。

Flexboxを使ってカレンダー、という発想

あるよねー、と思ったらやっぱりあった。でも数は少ない。

jQueryでのプラグインの作り方

Flexboxの注意点

jQueryでのjsonの取得方法

単純な$.getJSONだとjsonデータの内容がキャッシュされてしまう。これを回避するには$.postに変更するのが一番変更が少なくて済む。しかし、古いサーバでは文字コードの影響なのか、$.postで取得したjsonデータを一続きの文字列として認識してしまう模様。


var i = 0;
for(var key in json) {
    i++;
}

としても、jsonの中のkeyの個数ではなく、文字列長を拾ってくるのかべらぼうに大きな数を返して来て上手く処理できないので、やむなく


$.getJSON(url, {ts: new Date().getTime()}, function (data) {
    //処理
});

としてタイムスタンプで強制的にキャッシュさせない方法を採用せざるを得なかった。

$.getJSONのエラー処理

オブジェクト型かどうか判定

ライセンス(特にMIT)

タグ: javascript,jQuery,カレンダー

 



関連する記事一覧