「タイプ１：シンプル版」のカレンダープログラムの設置方法
※ハッピーマンデーが一時的に別の日に適用された場合。（2020年）
部分的にハッピーマンデーを調整する機能はないので、カレンダーが表示される期間中だけハッピーマンデーの指定を外しておいて下さい。
もしこの期間中に別のハッピーマンデー(平常通りの)がある場合、下の、「今まで平日だった日が祝日になった場合」を行って下さい。
※今まで「平日」だった日が「祝日」になった場合
『国民の休日』などで今まで平日だった日が突然祝日になる場合があります。
そういった場合は手作業で祝日設定を行って下さい。
カレンダープログラム作成時に祝日でなかった日も平日になっていますのでチェックして下さい。
使用テンプレートを手元に準備しておいて下さい
基本的にどのテンプレートにもカレンダーは設置できます。
カレンダー用プログラムをダウンロードします
js.zip (jsフォルダ内にcalender.jsが梱包されています)
をダウンロードして解凍します。
解凍したプログラムをご利用のテンプレートに移動します
ご利用のテンプレートにすでにjsフォルダがある場合は、中身のcalender.jsファイル1枚だけをお手元のjsフォルダに移動します。jsフォルダがお手元にない場合はフォルダごと移動して下さい。
「タイプ１：シンプル版」のカレンダープログラムの設置方法
基本的に全ページにカレンダーを入れたい場合が多いと思いますが、まずトップページ(index.html)に設定してみましょう。ご利用のテンプレートのindex.htmlファイルを開き、htmlタグが見えるようにしておいて下さい。
まずはhtmlの上の方にある</head>の上の行に次の1行を入れます。
次に、カレンダーを表示させたい場所に次の２行を入れます。
最後にhtmlの下の方にある</body>の前に次の行を入れます。
カレンダー用のスタイルをcssフォルダのstyle.cssに追加します。
ファイル一式をアップロードします
カレンダーが表示されればOKです。
補足
土日祝の背景色を変更したい場合
cssファイルに追加した「.cal .off」とういうブロックにあるbackgroundの色を変更して下さい。
祝祭日と、普通の曜日(例：水曜日)を定休日にしたい場合
calender.jsの以下のパーツを以下のように変更します。
上記は水曜日(4)の設定になっていますが、
1＝日曜、2＝月曜、3＝火曜、4＝水曜、5＝木曜、6＝金曜、7＝土曜
となりますのでこの数字を自由に変更、追加などして希望の定休日に変更ができます。
休みを全て手作業で設定したい場合
通常の暦通りではなく、100％手作業で休日設定を行いたい場合は以下のように変更します。
13という数字を入力すると「月ごとの固定休日指定」で入力した休日が反映されます。
また、（0が必要）とコメントがあるように、この数字を外すとプログラムが正常に動かなくなるので必ず残して下さい。0が必要なのは、入る数字が1個のみの場合で、2個以上数字設定する場合は不要です。
後は、以下のパーツに希望の休日日を直接入力するだけです。
上から順にhd_1(1月)、hd_2(2月)、hd_3(3月)…となります。
ここでも数字が1個のみの場合は0を追加しておいて下さい。
３ヶ月分以上のカレンダーを表示したい場合
配布中のものは２ヶ月出力されるようになっていますが、３ヶ月以上出力させたい人のための解説です。
実際の出力サンプルはこちら。※４ヶ月分出力しています。
月を追加する場合、下の赤ワクをそれぞれ追加していきますが、下部のスクリプトの方は２箇所ずつ「'calXX'」という文字列があるので、ここの「XX」の数字を変えていって下さい。よく分からない場合は実際のサンプルのコードを参考にしてみて下さい。
以下のように２ブロック追加します。以上です。
↓以下のタグをコピペで使って下さい。
ずっと先のカレンダーを表示させたい場合
１年後とか、特定の年・月のカレンダーを表示させたい場合、htmlの下の方に追加したタグから以下の部分を変更して下さい。以下の例だと、2018年の9月と10月のカレンダーが表示されます。
実際のサンプルはこちら。
