KH-WEBLOG TOP > WEBメモ > JavaScript > 自動更新されるカレンダー:javascript

自動更新されるカレンダー:javascript

最終更新日:

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

コーディング・WordPress化作業を代行します

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;

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

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

コーディング・WordPress化作業を代行します

JavaScriptのおすすめ参考書

楽天ブックス
¥2,838 (2024/03/01 11:54時点 | 楽天市場調べ)

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP RSS SEO WordPress アイキャッチ画像 アクセス解析 カスタムフィールド カテゴリー カラーミーショップ カート コメント ショートコード ソースコード テンプレートタグ ドロップダウンメニュー パーマリンク フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事