「タイプ２：管理ページ版」のカレンダープログラムについて

※ハッピーマンデーが一時的に別の日に適用された場合。（2020年）
部分的にハッピーマンデーを調整する機能はないので、カレンダーが表示される期間中だけハッピーマンデーの指定を外しておいて下さい。
もしこの期間中に別のハッピーマンデー(平常通りの)がある場合、下の、「今まで平日だった日が祝日になった場合」を行って下さい。

※今まで「平日」だった日が「祝日」になった場合
『国民の休日』などで今まで平日だった日が突然祝日になる場合があります。
そういった場合は手作業で祝日設定を行って下さい。
カレンダープログラム作成時に祝日でなかった日も平日になっていますのでチェックして下さい。

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

基本的にどのテンプレートにもカレンダーは設置できます。

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

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

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

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

「タイプ２：管理ページ版」のカレンダープログラムの設置方法

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

まずはhtmlの上の方にある</head>の上の行に次の1行を入れます。
<script type="text/javascript" src="js/calender.js" charset="UTF-8"></script>

次に、カレンダーを表示させたい場所に次の２行を入れます。
<div id="cal1" style="padding:10px"></div> <div id="cal2" style="padding:10px"></div>

最後にhtmlの下の方にある</body>の前に次の行を入れます。
<script type="text/javascript"><!-- var yy, mm; // 今月 today = new Date(); // 特定の年月の表示をする場合 // today.setMonth(8); // 月-1 // today.setFullYear(2018); yy = today.getFullYear(); mm = today.getMonth() + 1; document.getElementById('cal1').innerHTML = put_calender(yy, mm, 'cal', 'hcal', '', get_days(yy, mm)); // 翌月 if (mm > 11) { mm = 0; yy += 1; today.setFullYear(yy); } today.setMonth(mm); yy = today.getFullYear(); mm = today.getMonth() + 1; document.getElementById('cal2').innerHTML = put_calender(yy, mm, 'cal', 'hcal', '', get_days(yy, mm)); //--></script>

カレンダー用のスタイルをcssフォルダのstyle.cssに追加します。
/*カレンダー用テーブル ---------------------------------------------------------------------------*/ /*テーブル全体の設定*/ .cal { border: 1px solid #a2a2a2; /*枠線の幅、線種、色*/ background: #FFF; /*テーブル内の背景色*/ font-size: 11px; /*文字サイズ*/ margin-right: auto; margin-left: auto; } .cal td, .cal th{ border: 1px solid #a2a2a2; /*枠線の幅、線種、色*/ line-height: 1; /*行間*/ text-align: center; /*文字をセンタリング*/ padding: 5px; /*ボックス内の余白*/ } /*テーブル内のth(曜日)設定*/ .cal th{ background: #ebebeb; /*背景色*/ } /*休日の設定*/ .cal .off { background: #ffced8; /*背景色*/ color: #666; /*文字色*/ } /*日曜日の設定*/ .cal .sun { color: #FF5C7F; /*文字色*/ } /*管理ページから入力した場合の設定*/ .cal .on { background: #ced8ff; /*背景色*/ color: #666; /*文字色*/ }

ファイル一式をアップロードします

カレンダーが表示されればひとまずOKです。次は専用管理ページにログインします。

専用管理ページについて

「タイプ２：管理ページタイプ」カレンダーには専用管理ページがついています。
以下のアドレスでアクセスして下さい。
http://(あなたのサイトのドメイン)/calender/calender.php?mode=form
ユーザー名：admin、パスワード：test1234でログインします。
※ユーザー名とパスワードは必ず変更して下さい。calender.phpファイル本体の冒頭で変更できます。

ログインできない、サーバーエラーが出る場合

calenderディレクトリにパーミッションの設定を行う必要があります。書き込みができる設定に変更して下さい。パーミッションの数値や設定方法はご利用のサーバー会社にお尋ね下さい。

ログインしたら

「カレンダー設定」ページが開きますので、必要に応じて定休日など入力して下さい。
最後に管理ページ一番下にある「保存」ボタンを押します。

保存が終わったらログアウトして下さい

管理ページ左上に「ログアウト」ボタンがありますので選択してログアウトして下さい。

以下の画像をクリックすると、実際の完成サンプルを見る事ができます

補足

背景色を変更したい場合

cssフォルダのstyle.cssに上のステップで追加した「.cal .on」の「background」の色を変更すればOK。

３ヶ月分以上のカレンダーを表示したい場合

配布中のものは２ヶ月出力されるようになっていますが、３ヶ月以上出力させたい人のための解説です。
実際の出力サンプルはこちら。

月を追加する場合、下の赤ワクをそれぞれ追加していきますが、下部のスクリプトの方は２箇所ずつ「'calXX'」という文字列があるので、ここの「XX」の数字を変えていって下さい。よく分からない場合は４ヶ月出力のサンプルコードを参考にしてみて下さい。

以下のように２ブロック追加します。以上です。

↓以下のタグをコピペで使って下さい。
//ここから３ヶ月目の設定 mm = today.getMonth() + 1; today.setMonth(mm); yy = today.getFullYear(); mm = today.getMonth() + 1; //document.getElementById('cal3').innerHTML = put_calender(yy, mm, 'cal', 'hcal', '', get_days(yy, mm)); document.getElementById('cal3').innerHTML = put_calender(yy, mm, 'cal', 'hcal', '', '');

ずっと先のカレンダーを表示させたい場合

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

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

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