自動で更新されて翌月分まで表示される
javascriptのカレンダーを作ってみたので
使い方をメモ。

サンプル

calender.jsの使い方

まず、calender.js
コピーするなどしてcalender.jsとして保存します。

次に保存したcalender.jsを読み込むためにhead内に

<script type="text/javascript" src="calender.js"></script>

と記述し準備完了!

あとはカレンダーを表示したい箇所に

<div class="cal">
<!--今月のカレンダー-->
<script type="text/javascript">
	setCalender();
</script>
</div>

<div class="cal2">
<!--翌月のカレンダー-->
<script type="text/javascript">
	setCalender2();
</script>

と記述すればOK。

calender.jsのカスタマイズ

calender.js内の

// 祝日3:独自の祝日設定
var Holidays3 = new Array(8,12, 8,13, 8,14, 8,15, 月,日);

(月,日, 月,日)と「例」(8,12, 8,13)記述すれば
その日を祝日にできます。

また、土日・祝日を営業日にしたい場合は

// 営業日:休日で営業する日の設定
var Workdays1 = new Array(月,日);

の部分を同じように何月何日かを指定すればOKです。

デザイン等を変更したい場合はCSSでテキトーにいじればOK

calender.jsの注意点

今月のカレンダーだけを表示する場合は問題ありませんが
翌月のカレンダーを表示する際は、
毎月1日等に
calender.jsの翌月カレンダー部分の

//最初の曜日 0 1 2 3 4 5 6
var startDay = 0;

というところを指定しないと表示がおかしくなってしまいます。
上記の指定は翌月カレンダーの1日を何曜日からはじめるか
という部分で、

  • 0:日曜日
  • 1:月曜日
  • 2:火曜日
  • 3:水曜日
  • 4:木曜日
  • 5:金曜日
  • 6:土曜日

のように例えば1日が火曜日から始まるのであれば

//最初の曜日 0 1 2 3 4 5 6
var startDay = 2;

のように指定しないといけません。

なので完全に自動更新されるカレンダーというわけではないです・・・