jQuery・Javascript jQueryを使った小技やAjax非同期通信などについて

jQueryカレンダーの選択期間を塗りつぶす

2016年7月5日
この記事は掲載から445日経過しています。
情報が古い可能性が有りますのでご了承下さい

久しぶりの更新ですハイ…

さて、とある案件で「カレンダーを表示し、開始日と終了日をクリックしたら、その期間の背景色を塗りつぶし、期間の日数を得たい」というご相談が有りました。

どこかでオープンソース等を見た記憶も有りますし、jQuery.datepickerでも出来そう?な気がしますが、カレンダーをレスポンシブデザインにするため、あえて1から作りました。

先ずはサンプル

サンプルはとりあえず今月~1年間のカレンダーを表示し、二回クリックするとその期間の背景色を変更します。また、常に過去~未来(1月1日~2月1日)へクリックする訳ではないので、未来から過去(2月1日~1月1日)をクリックしても塗りつぶすようにしています。

 

カレンダーを作る

javascriptのみでカレンダーを作るのは特に難しく有りません。

今月の日付と最終日を得て、その分だけカレンダーの日付枠を繰り返すだけです。また、複数月に渡る場合は以下のように月を加算します。

ただ、これだと年を越す場合に問題が出るので、12月を超えた場合は年を加算します。

後は前後の空白分を計算し、空の枠を追加します。

こういったものはMyライブラリ的に作成して持っておくと便利かと思います。

期間を塗りつぶす

さて、主題のクリックした期間を塗りつぶす件です。

考え方としては日付に対して何らかの形で数値を割り振っておき、クリックした日付の数値間を塗りつぶすという単純なもの。

例えば、1/1(数値:1) ~1/3(数値:3) とすると、1,2,3の数値が割り振られている枠を塗りつぶすだけ。今回は単純にidに対して数値を割り振っています。

day_numberは事前に初期化しておき、日付のループ内で+1し、それをidに設定してみました。クリックした時に、このday_numberを比較し、小~大に向けて背景色を変更します。未来から過去へクリックしている場合は逆を行います。

あとは、日付をダブルクリックすると無効として初期化し、問題が起きないように。

 

デートピッカーでフォームに日付が入るのも良いのですが、最近はタブレットやスマートフォンの対応の件も有り、タップでポンポンと選択でき、視覚的効果も含めたものが喜ばれるようです。

ちなみにこの案件では、スマートフォンはこのカレンダーを分解し、1日だけ何月かを表すJun等を小さく表記し、月の継ぎ目なく画面一杯に日付をずら~と並べるスタイルをご希望されました。確かに、小さい画面でdatepickerはタップし難いですしね。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

このカテゴリーのその他の記事

PAGE TOP