【クリエイターモード】カレンダーで祝日の背景色を指定する方法はありますか。 – makeshop よくある質問

ショップデザイン / 機能・設定 / トップページ / カレンダー設定　の下部「日別内容入力」にて休日などをご設定ください。

■makeshopサポート
営業日や休業日をお客様に伝えよう！カレンダーを表示する方法
https://www.support.makeshop.jp/design/?p=6798

年末年始やお盆など長期休暇に入る前にやっておきたいおすすめ設定4選！
https://www.support.makeshop.jp/design/?p=10646

関連リンク：
makeshopサポート記事で紹介している日時指定で表示内容を切り替える方法を応用して、各月に合わせて祝日のカレンダー背景色を変更することもできます。

クリエイターモードではmakeshopのカレンダーの機能は、
今月のカレンダーに .makeshop-calendar1 、
来月のカレンダーに .makeshop-calendar2 とclassが出力されるため、
月ごとに指定のclass名を変える必要がございます。

各月ごとに対応する
.makeshop-calendar1 ,
.makeshop-calendar2 と、
それぞれの祝日の曜日を指定することでカレンダーの背景色を時間指定の記述により表示することは可能です。

■makeshopサポート
「クリエイターモードで『日時指定』して表示内容を切り替える方法」
https://www.support.makeshop.jp/design/?p=19777

表示例）

テンプレート【Complete】でのご対処例

ショップデザイン / テンプレート選択・編集 / クリエイターモード / モジュール管理

モジュール名「サイドナビ」のエディタ内末尾などに下記を追記してください。

記述例）2024年1月～2月に表示されるカレンダーに対する祝日（および振替休日）指定の場合

<!-- 2024年1月1日から1月31日までの期間適用されるCSS -->
<{if strtotime('2024-01-01 00:00:00') < time() && time() < strtotime('2024-01-31 23:59:59')}>
<style type="text/css">
/* 元旦、成人の日 */
.makeshop-calendar1 td.day1,
.makeshop-calendar1 td.day8{
background: #fe5a74;
color: #fff;
}
/* 建国記念日(振替休日の12日も同様に指定)、天皇誕生日 */
.makeshop-calendar2 td.day11,
.makeshop-calendar2 td.day12,
.makeshop-calendar2 td.day23{
background: #ffbaba;
color: #fff;
}
</style>
<{/if}>

<!-- 2024年2月1日から2月29日までの期間適用されるCSS -->
<{if strtotime('2024-02-01 00:00:00') < time() && time() < strtotime('2024-02-29 23:59:59')}>
<style type="text/css">
/* 建国記念日(振替休日の12日も同様に指定)、天皇誕生日 */
.makeshop-calendar1 td.day11,
.makeshop-calendar1 td.day12,
.makeshop-calendar1 td.day23{
background: #fe5a74;
color: #fff;
}
/* 春分の日 */
.makeshop-calendar2 td.day20{
background: #fe5a74;
color: #fff;
}
</style>
<{/if}>

同様の形式で上記以降の祝日（および振替休日）に対する指定などは、月ごとの日時指定の分岐を記述し、対応する日付に対して背景色の指定をお試しください。

【Complete】以外では、カレンダーの記述がされているモジュール内に記述してください。

祝日につきましては、内閣府のページをご参照ください。

https://www8.cao.go.jp/chosei/shukujitsu/gaiyou.html

関連記事