カレンダー設定

設定画面：ショップデザイン / カレンダー設定

ショップページに表示する営業日カレンダーの配色・特定日の色分け・表示可否などを設定できます。

カレンダー設定について

ショップページに表示する営業日カレンダーの配色・特定日の色分け・表示可否などを設定できます。
クリエイターモードご利用の場合は、別途デザインの記述が必要な場合があります。くわしくはクリエイターモードのカレンダー表示についてをご参考ください。

日別内容設定

特定の日付に背景カラーと説明を設定します。定休日や特別日などをカレンダー上で色分けして表示できます。
1件につき同じ月の複数の日付を選択できます。

登録済みの日別内容が表示されます。列は「ステータス」「カラー」「対象年月」「対象日」「カラー説明」「編集」「削除」です。
※1ページに20件まで表示されます。
※登録がない場合は「日別内容は登録されていません。」と表示されます。

• 日別内容を追加
  押すと日別内容の追加画面が開きます。
• ステータス
  保存前の変更状態を示します。新しく追加した行は「追加」、内容を変更した行は「変更」、保存済みの行は「登録済」と表示されます。
• この日別内容を編集／この日別内容を削除
  各行の操作ボタンです。編集を押すと登録内容を変更でき、削除を押すとその行を削除します。

「日別内容を追加」「この日別内容を編集」を押すと、下記の項目を入力する画面が開きます。

• 背景カラー
  必須項目です。設定したい日の背景カラーを指定します。指定方法はカラー設定と同じです。
• 対象年月日
  必須項目です。年をプルダウンから選び、月と日をカレンダーから選択します。日付は複数選択できます。
  ※年の選択範囲は、昨年から5年先までと、既に登録されているデータの年です。
  ※1件の日別内容では同じ月の日付だけを選択できます。別の月の日付を選ぶとその月に切り替わり、選択済みの日付は外れます。
• 曜日設定
  対象日を曜日単位で一括選択できるチェックボックスです。
• 選択中の対象日
  カレンダーで選んだ日が表示されます。カンマ区切りで直接入力することもできます。入力とカレンダーは連動しており、入力した日付はすぐにカレンダーへ反映されます。
  ※全角の数字・カンマも入力できます。重複した日付は除かれ、小さい順に並び替えられます。
• カラー説明
  任意項目です。カレンダーの下に凡例として表示されます。250文字以内で入力してください。HTMLタグを使用できます。

設定の保存

設定を変更したあとは、画面下部の「更新」ボタンを押してください。確認画面が表示され、再度「更新」を押すと保存されます。

クリエイターモードのカレンダー表示について

クリエイターモードにカレンダーを表示する場合、HTML記述が必要です。
【Complete】【BRothers】【Basics】【Manabito】【&more】のテンプレートは初期値に入力されています。
そのほかのテンプレートではカレンダー表示用のHTML記述をおこなってください。

参考）サンプルショップ一覧

▼サンプルソース

（【Debut】テンプレートでお試しいただけるサンプルソースです）
※別途、cssによる調整が必要です。

HTML

<!--カレンダーここから-->
<div>
<!--今月のカレンダータイトル-->
<h2><{$calendar1.year}>年<{$calendar1.month}>月の営業日カレンダー</h2>
<!--今月のカレンダーテーブル-->
<{$calendar1.html}>

<div>
<!--今月のカレンダー下 今日テキスト-->
<span style="color:#57886C">■</span>今日
</div>
<{section name=i loop=$calendar1.date_list}>
<div>
<!--今月のカレンダー下 特定日テキスト-->
<span style="color:<{$calendar1.date_list[i].color}>;">■</span><{$calendar1.date_list[i].description}>
</div>
<{/section}>
<!--今月の特定日の設定-->
<{section name=i loop=$calendar1.date_list}>
<{section name=j loop=$calendar1.date_list[i].day_list}>
<input type="hidden" class="dayList" data-month="1" data-day="<{$calendar1.date_list[i].day_list[j]}>" data-color="<{$calendar1.date_list[i].color}>">
<{/section}>
<{/section}>
</div>

<div>
<!--翌月のカレンダータイトル-->
<h2><{$calendar2.year}>年<{$calendar2.month}>月の営業日カレンダー</h2>
<!--翌月のカレンダーテーブル-->
<{$calendar2.html}>

<{section name=i loop=$calendar2.date_list}>
<div>
<!--翌月のカレンダー下 特定日テキスト-->
<span style="color:<{$calendar2.date_list[i].color}>;">■</span><{$calendar2.date_list[i].description}>
</div>
<{/section}>
<!--翌月の特定日の設定-->
<{section name=i loop=$calendar2.date_list}>
<{section name=j loop=$calendar2.date_list[i].day_list}>
<input type="hidden" class="dayList" data-month="2" data-day="<{$calendar2.date_list[i].day_list[j]}>" data-color="<{$calendar2.date_list[i].color}>">
<{/section}>
<{/section}>
</div>
<!--カレンダーここまで-->

CSS

/* カレンダーのサイズ設定 */
.makeshop-calendar1,
.makeshop-calendar2 {
width: 100%;
margin: 0 auto 16px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

/* テキスト位置・罫線設定 */
.makeshop-calendar1 th,
.makeshop-calendar1 td,
.makeshop-calendar2 th,
.makeshop-calendar2 td {
box-sizing: border-box;
text-align: center;
border: 1px solid #e6e6e6;
}

/* 【曜日】テキストの太さ・背景設定 */
.makeshop-calendar1 th,
.makeshop-calendar2 th {
background: #dcdcdc;
font-weight: bold;
padding: 10px 0;
}

/* 【日付】テキストの太さ・背景設定 */
.makeshop-calendar1 td,
.makeshop-calendar2 td {
background: #fff;
font-weight: bold;
padding: 25px 0;
}

/* 【今日】テキストの太さ・背景設定 */
.makeshop-calendar1 td.today,
.makeshop-calendar2 td.today {
background-color: #57886C;
color: #fff;
}

/* 【日曜日】の設定 */
.makeshop-calendar1 th.sunday,
.makeshop-calendar2 th.sunday {
color: #fff;
background: #f08080;
}

/* 【日曜日】日付の設定 */
.makeshop-calendar1 tbody td.sunday,
.makeshop-calendar2 tbody td.sunday {
background: #f0808073;
}

/* 【土曜日】の設定 */
.makeshop-calendar1 th.saturday,
.makeshop-calendar2 th.saturday {
color: #fff;
background: #6495ed;
}

/* 【土曜日】日付の設定 */
.makeshop-calendar1 tbody td.saturday,
.makeshop-calendar2 tbody td.saturday {
background: #6495ed36;
}

/* 【月曜日】の設定 */
.monday {
color: black;
}

/* 【火曜日】の設定 */
.tuesday {
color: black;
}

/* 【水曜日】の設定 */
.wednesday {
color: black;
}

/* 【木曜日】の設定 */
.thursday {
color: black;
}

/* 【金曜日】の設定 */
.friday {
color: black;
}
@media screen and (max-width: 640px){
.makeshop-calendar1,
.makeshop-calendar2 {
width: 100%;
}
.makeshop-calendar1 th,
.makeshop-calendar1 td,
.makeshop-calendar2 th,
.makeshop-calendar2 td {
font-size: 14px;
}
}

JavaScript

// <!--特定日の設定-->
$(function(){
$('.dayList').each(function(){
var month = $(this).attr('data-month');
var day = $(this).attr('data-day');
var color = $(this).attr('data-color');

$('.makeshop-calendar' + month +' .day' + day).css({
'background-color': color,
'color': '#fff',
'font-weight': 'bold'
});

});
});

▼クリエイターモード【Debut】でカレンダーを表示した場合の表示例

旧デザインモード：ベーシックモードの設定

旧デザインモード：ベーシックモード適用時のみ表示される設定です。
※「カレンダー設定」は旧デザインモード：ベーシックモードのスマホページに対応しておりません。

基本設定

カレンダーの表示可否と表示方法を設定します。
※このセクションはベーシックモードのみ表示されます。

• 営業日表示カレンダー
  ショップのトップページに営業日カレンダーを表示するかを設定します。「表示する」「表示しない」から選択します。
• カレンダー表示位置
  カレンダーを左側メニューに表示するか、トップページ本体に表示するかを設定します。「左側メニュー」「トップページ本体」から選択します。
• カレンダー表示形態
  今月と来月を続けて表示するか、今月のみ表示するかを設定します。「今月と来月」「今月のみ」から選択します。

カラー設定

カレンダーの配色を設定します。
※このセクションはベーシックモードのみ表示されます。
※カラー設定（今日・土曜日・日曜日の設定）よりも日別内容設定で設定した内容が優先して表示されます。 

下記の7項目それぞれにカラーを設定できます。

• 年月の背景カラー
• 年月の文字カラー
• 日曜日の背景カラー
• 土曜日の背景カラー
• 日付の文字カラー
• 今日の背景カラー
• 今日の文字カラー

各項目の指定方法は下記の3種類です。

背景イメージ

カレンダーの曜日と日付の表示箇所に、背景画像を1枚登録できます。
※このセクションはベーシックモードのみ表示されます。

運営ノウハウ集

• 年末年始やお盆など長期休暇に入る前にやっておきたいおすすめ設定4選！
• 営業日や休業日をお客様に伝えよう！カレンダーを表示する方法【ベーシックモード】