▼サンプルソース

（【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】でカレンダーを表示した場合の表示例

運営ノウハウ集