[Javascript] カレンダーのソースコードを記載

january-2290045_1280
LINEで送る
Share on GREE
Share on LinkedIn

サイト構築の際に、javascriptでカレンダーを作成する事があったので、ソースコードを載せておきます。
 

システム構築の際にカレンダーライブラリがあると非常に便利なんですが、OSSライブラリを使うよりも、この程度のカレンダーであれば、自分で書いたほうが早かったので、作っただけです。
 

結果、他の人には分かりにくい事には変わりませんが、全く同じ仕様でよければ、コピペでできるスニペットって有難くないですか?
 

スクリーンショット 2017-11-23 19.31.40
 

ソースコード

使い方

事前に上記ライブラリを読み込んで、下記タグ構造をページに記載すると、カレンダーが現れるようになります。
 

解説

HTMLタグのclass名などを基準にコーディングしているので、HTMLのタグ箇所は変更しないでご使用ください。
 

デザインに関しては、CSSファイルを変更するのは、問題なさそうなので、現状を壊さないように、カラーリングなどを変更してください。
 

とりあえず、機能としては、「月の移動」「当日のカラーリング」ぐらいを用意しているので、日付切り替えで、inputタグのtype=dateを使うよりは便利なはずです。
 

ついでに、スマホで使うことも考慮しているので、便利に使えるはずです。
 

日付箇所をクリックした際のイベントについては、JSコードの「$$CALENDAR.prototype.dayClick」関数を書き換えれば、それだけで挙動するはずです。
 

ちなみに、今回のコピペで行った場合は、「date=YYYYMMDD」クエリを付けてURL遷移するようになります。
 

後は、煮るなり焼くなり、自己責任にてお願いいたします。
 

尚、要望などがあれば、コメントで受け付けます。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です