楽天ショップの営業日カレンダー、毎月更新するのめんどうだ！！とのご意見から
自動更新カレンダーを設置しようということになりました。

自動更新ということは、JavaScriptを利用する方法が考えられますが、
楽天ショップの場合、通常のRMSで作成するトップページやレフトナビには
JavaScriptが使用できません。
そこで、JavaScriptカレンダーを設置するにはGOLDサーバーを利用しなくてはなりません。

「GOLDサーバーってHTMLがわからないと無理なんでしょ！うちはムリムリ！！」と
よくショップオーナー様に言われてしまいます。

でも、JavaScriptファイルだけGOLDサーバーに置いて
通常のRMSのレフトナビから呼び出せば結構簡単に設置できます。

では、やってみましょう！

まず、JavaScriptカレンダーを用意。
とってもステキなカレンダーをお借りしてしまいました。
営業日・定休日カレンダー

最初の設定がちょっと複雑ですが、デザインや使い勝手がとっても良いのです！！

「毎週水曜日がお休み」とか「毎月10日はお休み」などといった定休日の設定ができますし、
「1月1日から1月3日まではお休み」といった臨時休業の日の設定もできます。
あっ！自動更新といっても、これだけは前もって設定しておきます。
定休日は最初に設定してしまえば更新はいりませんし、
臨時休業日は数カ月先まで設定しておけばしばらくは更新不要ですね。

ではでは、設置方法です。

まず、ダウンロードしましょう。
営業日・定休日カレンダー

ダウンロードし、解凍すると
「single」と「multi」というフォルダがありますが
とりあえず今回は「single」だけ使います。

最終的には、この「single」フォルダを丸ごとGOLDサーバーにアップします。

アップの前に少し設定をしましょう。

「single」フォルダ内の「cal」フォルダを開きます。
cal.jsをメモ帳などテキストエディタで開きます。

このファイルに定休日の設定を行います。

１．毎週●曜日が定休日という設定
————————————
21行目から以下のような記述があります。

	//毎週○曜日の場合
	calObject[cal_Id].week = new Object();
	calObject[cal_Id].week["flag"] = 1;
	calObject[cal_Id].week["Sun"] = "Sun";
	calObject[cal_Id].week["Mon"];
	calObject[cal_Id].week["Tue"];
	calObject[cal_Id].week["Wed"];
	calObject[cal_Id].week["Thu"];
	calObject[cal_Id].week["Fri"];
	calObject[cal_Id].week["Sat"] = "Sat";

たとえば、毎週水曜日が定休日の場合にはこれを以下のように変更します。

	//毎週○曜日の場合
	calObject[cal_Id].week = new Object();
	calObject[cal_Id].week["flag"] = 1;
	calObject[cal_Id].week["Sun"];
	calObject[cal_Id].week["Mon"];
	calObject[cal_Id].week["Tue"];
	calObject[cal_Id].week["Wed"] = "holyday";
	calObject[cal_Id].week["Thu"];
	calObject[cal_Id].week["Fri"];
	calObject[cal_Id].week["Sat"];

いままで、土曜日が青、日曜日が赤だった表示が消え、水曜日が定休日の色になりました。

２．1月1日から1月3日までは臨時休業などという設定
——————————————-

こちらは11行目からの以下の部分を変更します。

	//定休日などはここで設定します。
	//calObject[cal_Id].day[ここに日にちを半角で] = クラス名;
	calObject[cal_Id].day = new Object();
	calObject[cal_Id].text = new Object();
	calObject[cal_Id].day["2009/6/9"] = "holyday";

これを以下のように変更しましょう。

	//定休日などはここで設定します。
	//calObject[cal_Id].day[ここに日にちを半角で] = クラス名;
	calObject[cal_Id].day = new Object();
	calObject[cal_Id].text = new Object();
	calObject[cal_Id].day["2012/1/1"] = "holyday";
	calObject[cal_Id].day["2012/1/2"] = "holyday";
	calObject[cal_Id].day["2012/1/3"] = "holyday";

お休みの日はどんどん増やせば大丈夫そうです。
もちろん、終了した日付は削除しておきましょう。

あとは、GOLDサーバーへ「single」フォルダごとアップしましょう。

では、いよいよレフトナビから呼び出してカレンダーを表示してみます。

呼出には
<ifram>タグを使用します。

RMSからレフトナビの編集を開き、カレンダーを表示したい部分に以下を挿入してみましょう。

<!--▽カレンダーここから▽-->
<div style="text-align:center">
<iframe width="175" height="200" frameborder="0" src="http://www.rakuten.ne.jp/gold/店舗ごとに異なります/single/cal.html"></iframe>
</div>
<!--△カレンダーここまで△-->

CSSファイルでデザインも調整可能です。
これで、毎月のカレンダー更新がちょっと楽になります!!