*

ネットショップの営業日カレンダーを自動更新にして手間を省く

公開日: : 最終更新日:2014/11/27 ネットショップ

カレンダー

ネットショップと言えば必ずと言っていいほどありますよね。休業日と営業日をお客様に知らせる為の営業日カレンダー。お店によって実装方法は様々です。カレンダーは画像であったり、table タグでカレンダーを html で直打ちしたり…。これを毎月更新となると結構面倒で手間もかかります。複数ショップを運営していたら尚更です。

この営業日カレンダーが自動で更新出来たら、どんなに楽なものか。今回はカレンダーを自動で更新してくれるツールを紹介します。

営業日カレンダーを自動更新

シンクグラフィカさんで公開されているフリーのスクリプト素材です。下記ページからダウンロードしましょう。

calendar2

デフォルトだと上図のような状態になっています。お休みの日は背景が赤くなり、マウスカーソルを合わせると何のお休みか(定休日)などをポップアップで表示してくれます。カレンダーのサイズなどは付属の CSS で編集が可能です。

このまま使ってもいいのですが、真ん中の大きい予定表がいらなかったので消しました。

まず付属の html ファイルを開きます。以下の部分をサクッと消します。

<div class="schedule_wrapper">
  <h3>予定表</h3>
  <!-- 0番目の予定リストを表示する場合は以下のタグを配置 -->
  <div id="schedule0" class="schedule_list">
    <ol>
      <li value="210">テスト</li>
    </ol>
  </div>
</div>

定休日などの設定方法

各自店舗のお休みを入力しないことにはそのまま使えません。定休日を設定するには付属の「cal.js」を開きます。

なかなか難しいソースコードですが、上の方は設定になっています。「// (○月) 第× △曜日の場合」というコメントがあるのでその下を編集します。

calObj[0].month["0-1"] = 'Holyday;定休日';

上記は定休日設定の例です。肝となるのは["0-1"]という部分です。まず最初の数字は0が日曜日、次の数字は第何週目という意味になっています。つまり、第一日曜日を定休日とする設定です。0は日曜、1は月曜というように数字が増えていきます。これに習って、毎週土日を定休日とするには以下のように設定します。

calObj[0].month["0-1"] = 'Holyday;定休日';
calObj[0].month["0-2"] = 'Holyday;定休日';
calObj[0].month["0-3"] = 'Holyday;定休日';
calObj[0].month["0-4"] = 'Holyday;定休日';
calObj[0].month["0-5"] = 'Holyday;定休日';
calObj[0].month["6-1"] = 'Holyday;定休日';
calObj[0].month["6-2"] = 'Holyday;定休日';
calObj[0].month["6-3"] = 'Holyday;定休日';
calObj[0].month["6-4"] = 'Holyday;定休日';
calObj[0].month["6-5"] = 'Holyday;定休日';

holyday というのは、日付の背景を赤くする為に必要なもので変えられません。後ろの「定休日」はポップアップに表示する文字列なので自由に変えても問題ありません。

夏季休業日などの設定方法

夏季休業日などは、毎月第○曜日という設定ではできません。その場合は、以下のようにします。

calObj[0].month["8-3-2"] = 'Holyday;夏季休暇';

3つの数字に着目してください。これは8月の第二水曜日を夏季休暇にする設定です。何日かある場合は、その分行数を追加して設定します。

休日以外の設定をしたい場合

休日設定だと日付の背景が赤くなりますが、赤以外で休日以外の設定をしたい場合もあると思います。その場合は、付属の CSS を開いて設定します。

div.cal_wrapper table.cal tr td div.任意の文字列 {
	font-weight: bolder;
	color: #F00;
	background-color: #FEE;
}

「…div.Holyday」という箇所が休日設定の CSS となているので、これを丸々コピーします。.Holyday の箇所を任意の文字列に変更し、「background-color」の箇所で任意のカラーコードを入力します。

前述の定休日設定で「Holyday」の部分を今回決めた任意の文字列に変えると、背景が違う色で設定が可能です。

運用中のメンテナンス

年が変わると、夏季休業日や冬季休業日の日が変わるのでその部分は設定変更する必要があります。

おわりに

これで毎月のカレンダー更新作業が無くなってかなり時短に繋がりました。是非店舗運営にお役立てください。

  • Pocket

おすすめトピックス

関連記事

ダンボール
楽天の商品ページの納期情報の文字色やサイズを変更する方法

「楽天商品ページにある納期情報の文字色変えれる?」 突如放たれるその言葉。全く無茶を言ってくれますねと思いつつも、試行錯誤を始めます。試しに google で検索しても特に情報はありません。しかし、google の検索予 […]

偽サイト蔓延、早期対策を!楽天偽サイトの探し方

楽天ショップを丸々コピーした偽サイトや、楽天市場を装った偽メールが蔓延していると楽天が注意を促しています。 楽天市場を装う偽サイトやメール出現 楽天が注意呼びかけ – ねとらぼ 私からすると今更?という印象で […]

電話応対
お客様の注文間違いは転換率アップのチャンスです

ネットショップ、EC サイトを運営していれば日々お客様からのお電話を頂くかと思います。それは、商品に対する質問であったりクレームであったり内容は様々。その問い合わせ、受けただけで終わりにしてませんか? お客様からの問い合 […]

ガラケーとスマホ
楽天スマホ商品ページで制限なく画像説明を載せる方法

楽天に限らずネットショッピング界隈ではスマートフォンでのアクセスが PC を上回るなど年々スマートフォン比率が上昇してきています。今まではスマートフォンは後回し~にしてきた所もあるかと思いますが、パソコン版もスマートフォ […]

線画に変換
写真や画像から綺麗なベクター線画に変換してくれるツールが便利

「この画像から線画にできる?」 この前そんな事を言われました。その画像とはある物の設計図のようなものでした。線画に出来るか?と問われれば出来ます。Adobe Illustrator で縁をなぞって線を書けばいいわけです。 […]

アウトレットセール
アウトレット品はこれからの時代を生き抜く為の重要なファクターとなるだろう

よく巷でアウトレットセール、訳ありセールなど催されている所を見かける事もあると思います。そのアウトレットセールって何のセールかご存知でしょうか? 目次1 アウトレットとは2 商品は毎日捨てられている3 商品を安く買う方法 […]

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

       
Googleフォトにアップした写真がどこで撮影したのか確認する方法

あなたのスマートフォンの中にもたくさんの写真があるのではないで

長浜IC前「らーめん専家味噌壱」癖になる濃厚味噌ラーメン

北陸自動車道の長浜インターチェンジ前に、2018年にラーメン屋

WordPressのWP_Queryでカスタムフィールドで絞り込み今日の日付以前の記事は表示しない

WordPress で条件に応じた記事を一覧で表示したいという

電子レンジで冷凍食品のあたため500W/600Wってどこで判別?地域によって違いは?

冷凍食品を温めるのには電子レンジを使用しますが、冷凍食品の裏側

Premiere Elementsで動画の一部を切り抜きトリミングする方法

せっかく動画を撮影したけど、肝心な部分は動画の中央部分だけでま

→もっと見る