テンプレート【Minimum】でカレンダーを表示する場合は、ソースコードの追記をおこなってください。
以下はフッターの上部に追記し、すべてのページに表示する例です。
※作業前にバックアップを必ず取得してください。
ソースコードを編集する前に、デザインセットのコピーを取っておくことをおすすめします。詳しくは【クリエイターモード】デザインセット（ソースコード）をバックアップする方法を教えてください。をご参照ください。
手順1）CSSを追記する
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通「CSS」欄
こちらの末尾に下記を追記後、保存してください。
/* calendar */
section.calendar-item {
margin-bottom: 80px;
}
.calendar-item span{
margin-bottom:25px;
}
.calendar-date {
font-size: 22px;
font-weight: 500;
}
.calendar-swiper-container {
width: 100%;
height: auto;
overflow: hidden;
}
.calendar-date {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
.calendar-date i {
display: block;
margin-top: 5px;
}
.calendar-item table {
max-width: 95%;
margin: 0 auto 20px;
}
.calendar-item table thead tr th {
padding: 16px;
border-bottom: 1px solid #cfcfcf;
}
.calendar-item table tbody tr td {
padding: 16px;
border-bottom: 1px solid #cfcfcf;
text-align: center;
}
.calendar-description {
font-size: 14px;
max-width: 90%;
margin: 0 auto 10px;
}
.sunday {
color: #FF6347;
}
.saturday {
color: #1E90FF;
}
@media screen and (min-width: 768px) {
.calendar-date {
font-size: 22px;
font-weight: 500;
}
.calendar-item span{
margin-bottom:25px;
}
.calendar-description {
font-size: 14px;
max-width: 82%;
}
.calendar-swiper-wrapper {
display: flex;
justify-content: center;
gap: 4%;
align-items: flex-start;
}
.calender-swiper-slide {
width: 350px!important;
box-sizing: border-box;
}
.calendar-item table {
width: 100%;
max-width: 100%;
}
}
手順2）JavaScriptを追記する
管理画面のカレンダーの設定「日別内容入力」を反映させるためにはJavaScriptの追記が必要です。
マニュアル：カレンダーの設定
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通「JavaScript」欄
こちらの末尾に下記を追記後、保存してください。
document.addEventListener('DOMContentLoaded', function () {
$('.day-list').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',
});
});
});
手順3）フッターにカレンダー表示用のHTMLを追記する
カレンダーをすべてのページに表示させたい場合は、フッターモジュール内の先頭行に追記することで可能です。
ショップデザイン / テンプレート選択・編集 / クリエイターモード / モジュール管理「フッター」
こちらの先頭行に下記を追記してください。
<section class="calendar-item">
<div class="section-heading center">
<h2 class="section-title category-title">
<span class="section-title-deco">CALENDAR</span>
</h2>
</div>
<div class="swiper-container calendar-swiper-container">
<div class="swiper-wrapper calendar-swiper-wrapper">
<div class="swiper-slide calender-swiper-slide">
<div class="calendar-date calendar1">
<{$calendar1.year}>.<{$calendar1.month}>
<div class="calendar-swiper-button-next">
<i class="fi fi-rr-angle-circle-right flaticon-icon"></i>
</div>
</div>
<div>
<{$calendar1.html}>
<{section name=i loop=$calendar1.date_list}>
<div class="calendar-description">
<span style="color:<{$calendar1.date_list[i].color}>;">■</span>
<span><{$calendar1.date_list[i].description}></span>
</div>
<{section name=j loop=$calendar1.date_list[i].day_list}>
<input type="hidden" class="day-list" data-month="1" data-day="<{$calendar1.date_list[i].day_list[j]}>" data-color="<{$calendar1.date_list[i].color}>">
<{/section}>
<{/section}>
</div>
</div>
<div class="swiper-slide calender-swiper-slide">
<div class="calendar-date calendar2">
<{$calendar2.year}>.<{$calendar2.month}>
<div class="calendar-swiper-button-prev">
<i class="fi fi-rr-angle-circle-left flaticon-icon"></i>
</div>
</div>
<div>
<{$calendar2.html}>
<{section name=i loop=$calendar2.date_list}>
<div class="calendar-description">
<span style="color:<{$calendar2.date_list[i].color}>;">■</span>
<span><{$calendar2.date_list[i].description}></span>
</div>
<{section name=j loop=$calendar2.date_list[i].day_list}>
<input type="hidden" class="day-list" data-month="2" data-day="<{$calendar2.date_list[i].day_list[j]}>" data-color="<{$calendar2.date_list[i].color}>">
<{/section}>
<{/section}>
</div>
</div>
</div>
</div>
</section>