*

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

公開日: : 最終更新日: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

おすすめトピックス

関連記事

ショッピングカート付近にバナーを
楽天商品ページのカート付近、商品名の下にバナーを貼る方法

ネットショップのショッピングカート付近といえば、商品を見たり買ったりする人なら誰でも目を通す一等地です。そんな所にお知らせやバナーなんかを貼る事が出来たら便利ですよね。 楽天の商品ページでは標準機能では用意されていません […]

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

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

5のつく日キャンペーン
Yahoo!ショッピング5のつく日だけ自動でバナーを切り替えてキャンペーンに誘導する

Yahoo!ショッピングでは5のつく日キャンペーンを継続的に実施しています。すなわち毎月5日、15日、25日にキャンペーンにエントリーして Yahoo!ショッピングで買い物をすると誰でもTポイントが5倍となるキャンペーン […]

楽天のスマホ商品ページにPC版で見るボタンを追加するカスタマイズ

Freepikによるデザイン スマートフォンでウェブサイトを見ていたり、ネットショッピングをしている時に PC 版のサイトを見たいと思った事はありませんか? 大抵のウェブサイトやネットショッピングサイトでもスマートフォン […]

CSV
重くて開けないCSVをExcelで開くには分割するべし

CSV ファイルと言えば IT系の業務に携わっている人なら一度は使った事があるファイル形式だと思います。 目次1 CSVファイルとは2 重いCSVをExcelで開くには2.1 重いCSVを分割する方法3 おわりに CSV […]

プライスダウン
楽天ショップのカテゴリページの価格を赤文字にするには

商品の価格表記って何色なイメージですか? 実際のお店に陳列された商品の値札、折込広告、Amazon などのネットショップを想像してみてください。商品には価格は付き物です。お客様に買ってもらう為に価格を提示しなくてはいけま […]

上部広告

著者について

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

フォローはこちら

       

上部広告

       
宇佐美
ガソリンスタンドENEOSの看板にある「宇佐美」とは何か?

普段何気なしに利用しているガソリンスタンドですが、ふと気になっ

中部国際空港のプレミアムラウンジセントレアに入るための条件や必要な物

空港には特別な待合室(ラウンジ)があります。中部国際空港も例外

厚さ4cmの封筒が入る郵便ポストは存在するか?

郵便物をポストに投函する場合、投函できる厚みのボーダーラインとしてよく

潮騒そば
こだわりの魚介スープが織り成すラーメン、彦根市の「らー麺潮騒」

滋賀県彦根市の彦根駅周辺の国道8号線を通っている時に、何か新し

超人気のラーメン店銀座篝がsitatte sapporo(シタッテ札幌)に上陸

2017年3月4日に札幌駅前に新たなランドマークとしてオープン

→もっと見る