ホームページテンプレートを無料配布中
商用利用もWEB制作業者様利用も全て無料

テンプレートパーティー

「タイプ1:シンプル版」のカレンダープログラムの設置方法

※カレンダープログラムを利用される方へ
『国民の休日』などで今まで平日だった日が突然祝日になる場合があります。
そういった場合は手作業で祝日設定を行って下さい

使用テンプレートを手元に準備しておいて下さい

今回の例題では、tp_shop4テンプレートを使いますが、基本的にどのテンプレートにもカレンダーは設置できます。

カレンダー用プログラムをダウンロードします

js.zip (jsフォルダ内にcalender.jsが梱包されています)
をダウンロードして解凍します。

解凍したプログラムをご利用のテンプレートに移動します

ご利用のテンプレートにすでにjsフォルダがある場合は、中身のcalender.jsファイル1枚だけをお手元のjsフォルダに移動します。jsフォルダがお手元にない場合はフォルダごと移動して下さい。

「タイプ1:シンプル版」のカレンダープログラムの設置方法

基本的に全ページにカレンダーを入れたい場合が多いと思いますが、まずトップページ(index.html)に設定してみましょう。ご利用のテンプレートのindex.htmlファイルを開き、htmlタグが見えるようにしておいて下さい。

まずはhtmlの上の方にある</head>の上の行に次の1行を入れます。

次に、カレンダーを表示させたい場所に次の2行を入れます。

最後に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を追加しておいて下さい。

その他の使い方:ずっと先のカレンダーを表示させたい場合

1年後とか、特定の年・月のカレンダーを表示させたい場合、htmlの下の方に追加したタグから以下の部分を変更して下さい。以下の例だと、2018年の9月と10月のカレンダーが表示されます。
実際のサンプルはこちら。

マニュアル通りにやったけど、うまくいかない!という場合は

サポート掲示板をご利用下さい。

↑ PAGE TOP