オンラインショップにカレンダーが表示されていることがありますが、「発送休業日」カレンダーという例はよく見かけます。

お客様がたまたま発送休業日の前日夜に注文した場合、発送できるのは翌々日となってしまいます。通常は午前中に注文があれば当日発送できるとしたら、このお客様にとっては「2日も放置された」ような気になって不満を感じやすくなってしまいます。

この日は「発送自体がお休み」ということが事前に分かっていればそれを防ぐことができます。

そのようなカレンダーはどのように表示するのが良いでしょうか？
単純な方法は画像でカレンダーを作ってしまうことですが、毎月カレンダー画像を作成する必要があり、またもし変更があった場合もあらためて画像を作成して掲載し直す必要があります。

ここではデザインテーマ『Retail Pro』に実装されたカレンダー機能をご紹介します。

『Retail Pro』カレンダー表示サンプル

カレンダー表示をONにすると、サイトのフッターエリアに当月と翌月の2ヶ月分が表示されます。この2つのカレンダーは画像ではなくテキストでデザインされていますので、月が変わればカレンダーの表示月は自動的に進んでいき、簡単な操作でいつでも自由に営業日や休業日を示すマーカーを移動させたり、本日を示すマーカーを表示することができます。

カレンダーの設定画面

カレンダーの基本設定

まずカレンダー表示のON/OFF、カレンダーはフッターの情報エリアにある他の要素との兼ね合いで左右を選び、色調、そしてカレンダーのタイトルをお好みで入力します。

マーカーの曜日一括指定

マーカーの曜日一括指定では、マーキングしたい曜日を「sat,sun,mon,tue,wed,thu,fri」といった「3文字の表記をコンマで区切る」というルールで設定します。

例えば「mon,tue,wed」と入力すると、毎週月、火、水曜日にマーカーが表示されます。その後はずっとその曜日にマーカーが表示されますので一度設定すれば、毎月何かをする必要はありません。
　

マーカーの個別指定

個別指定では、定期的な曜日ではなく個別にマーキングすることができます。

ルールは「月:日,日/月:日,日」となり、最大1年先まで個別指定することができます。
例えば、「10:5,6,7,8/11:1/12:25」は「10月5,6,7日　11月1日 　12月25日」にマーカーが表示されます。
カレンダーは2ヶ月表示ですが、3ヶ月以降先であっても、営業スケジュールが決まっていれば記入しておいても大丈夫です。

マーカーの色と意味を決める

最後にマーカーの色、それが何を意味するのかの表記も指定することができます。
「休業日」を表示してもよいですし、発送可能日を絞っているショップであれば「発送可能日」、またオンラインショップで休業日はないというショップでしたら「セール日」などという使い方も可能です。

カレンダーのマーカーの目的自体を自分で決めることができますので、カレンダーをより幅広い目的で使っていただけるようになっています。

「本日」の色は、サイト全体で使用している「アクセントカラー」が適用されます。
本日とマーカーが重なる場合は色が半分半分に表示され、どなたでもその意味が直感的に分かっていただけます。

以上、『Retail Pro』に搭載された高機能なカレンダー機能のご紹介でした！

『Retail Pro』はあらゆる年齢層のより多くの訪問者にとって快適なオンラインショップを構築するための理想的なBASEテンプレートとして開発しています。

デモサイトはもちろん、どんな設定項目があるかを全て解説したマニュアルも公開していますので、ぜひご検討ください。

デモサイト 1　https://designdemo02.base.ec/

デモサイト 2　https://designdemo01.base.ec/

テーマ設定マニュアル　https://basedesigninfo.notion.site/BASE-Retail-Pro-7ad28b30eb4b49bbbfc7fe8b17dc5243