カラーミーのカレンダーで今日の日付に印をつける
カラーミーショップのカレンダーは、独自タグ<{$calendar}>を使うと、サーバー側でHTMLタグを生成します。
基本的には、管理画面内の「営業日カレンダー管理」で設定します。
今回は、カレンダーについての仕様を学びながら、かんたんなカスタマイズをしてみます。
カラーミーのカレンダーの仕様
カラーミーショップの管理画面＞ツール＞テンプレートプラス＞営業日カレンダー管理
管理画面内で、定休日・臨時休業の文字カラーと背景カラーの変更ができます。
最大で二ヶ月分表示できます。
テンプレートプラスの機能として、以下のような機能があります。
カラーミーショップ
のマニュアルから引用します。
営業日カレンダー管理機能を使って定休日を設定しておくことで、発送手続きやお問い合わせ対応をお休みする日程を事前に告知することができます。定休日や祝日の背景や文字にカラーを設定することも可能です。
営業日カレンダー管理
ショップの休日の設定を行うことで、お客様にどれくらいで発送できるのかお伝えすることで、お客様も安心して購入できる効果が見込めます。
お届けまでの日時とも連動しますので、なかなか便利です(詳細はマニュアル参照)。
カラーミー内のコード部分
<{$calendar}><{$calendar_memo}>という独自タグを使っています。
<{$calendar}>はカレンダーの本体部分、<{$calendar_memo}>は注意書きを入れる行です。
テンプレート Discover無料版のコード（抜粋）
<!-- カレンダー -->
<{if $calendar != ""}>
<div class="u-contents-s">
<div class="p-calendar">
<h2 class="c-ttl-sub">
CALENDAR
<span class="c-ttl-sub__ja">カレンダー</span>
</h2>
<div class="side_section side_section_cal">
<div class="side_cal">
<{$calendar}>
</div>
<{if $calendar_memo != ""}>
<div class="side_cal_memo">
<{$calendar_memo}>
</div>
<{/if}>
</div>
</div><!-- /.p-calendar -->
</div>
<{/if}>
<!-- //カレンダー --><{$calendar}>の中身
<{$calendar}>の中身はサーバー側（カラーミーショップ）で用意されます。
DOM読み込み後にjQueryでいじったりはできますが、スマートではないのでやりたくないところです。
tableタグを使っているので、CSSが効かないことも多く、微調整に苦労する箇所です。
独自タグ<{$calendar}>の中身
<table class="tbl_calendar">
<caption>2023年7月</caption>
<tbody>
<tr>
<th class="sun">日</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th class="sat">土</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="sat" style="color: #ff0000;">1</td>
</tr>
<tr>
<td class="sun" style="color: #ff0000;">2</td>
<td class="mon">3</td>
<td class="tue">4</td>
<td class="wed">5</td>
<td class="thu">6</td>
<td class="fri">7</td>
<td class="sat" style="color: #ff0000;">8</td>
</tr>
<tr>
<td class="sun" style="color: #ff0000;">9</td>
<td class="mon">10</td>
<td class="tue">11</td>
<td class="wed">12</td>
<td class="thu">13</td>
<td class="fri">14</td>
<td class="sat" style="color: #ff0000;">15</td>
</tr>
<tr>
<td class="sun" style="color: #ff0000;">16</td>
<td class="mon holiday" style="color: #ff0000;">17</td>
<td class="tue">18</td>
<td class="wed">19</td>
<td class="thu">20</td>
<td class="fri">
<div class="today_circle">
<div class="today_num">21</div>
</div>
</td>
<td class="sat" style="color: #ff0000;">22</td>
</tr>
<tr>
<td class="sun" style="color: #ff0000;">23</td>
<td class="mon">24</td>
<td class="tue">25</td>
<td class="wed">26</td>
<td class="thu">27</td>
<td class="fri">28</td>
<td class="sat" style="color: #ff0000;">29</td>
</tr>
<tr>
<td class="sun" style="color: #ff0000;">30</td>
<td class="mon">31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table class="tbl_calendar">
<caption>2023年8月</caption>
<tbody>
<tr>
<th class="sun">日</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th class="sat">土</th>
</tr>
<tr>
<td></td>
<td></td>
<td class="tue">1</td>
<td class="wed">2</td>
<td class="thu">3</td>
<td class="fri">4</td>
<td class="sat" style="color: #ff0000;">5</td>
</tr>
<tr>
<td class="sun" style="color: #ff0000;">6</td>
<td class="mon">7</td>
<td class="tue">8</td>
<td class="wed">9</td>
<td class="thu">10</td>
<td class="fri holiday" style="color: #ff0000;">11</td>
<td class="sat" style="color: #ff0000;">12</td>
</tr>
<tr>
<td class="sun" style="color: #ff0000;">13</td>
<td class="mon">14</td>
<td class="tue">15</td>
<td class="wed">16</td>
<td class="thu">17</td>
<td class="fri">18</td>
<td class="sat" style="color: #ff0000;">19</td>
</tr>
<tr>
<td class="sun" style="color: #ff0000;">20</td>
<td class="mon">21</td>
<td class="tue">22</td>
<td class="wed">23</td>
<td class="thu">24</td>
<td class="fri">25</td>
<td class="sat" style="color: #ff0000;">26</td>
</tr>
<tr>
<td class="sun" style="color: #ff0000;">27</td>
<td class="mon">28</td>
<td class="tue">29</td>
<td class="wed">30</td>
<td class="thu">31</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>今日の日付に印をつける
「今日の日付に印をつける」は元々の機能にはありませんので、コードを書いて後付けする必要があります。
予約変数<{$smarty.now}>で、サーバー日付をとってきています（マニュアル-予約変数）。
修飾子 date_formatで、日付情報を整形しています。Smartyのマニュアルによると、
『%e - 月単位の日付を10進数で表したもの。日付が1桁の場合は、前に空白を一つ付ける。('1'から'31')』
とのことで、1-9日目までは、前に空白を付けられてしまうので、置換（replace）で空白を除去します。
<{$smarty.now|date_format:"%e"|replace:" ":""}>
こんな感じで、今日の日付（'1'から'31'）を取り出します。
今日の日付に印をつけるコード
<script>
$(function() {
$('.tbl_calendar:first-of-type td').each(function() {
if($(this).text()=='<{$smarty.now|date_format:"%e"|replace:" ":""}>') $(this).html('<div class="today_circle"><{$smarty.now|date_format:"%e"|replace:" ":""}></div>');
});
});
</script>
<style>
.today_circle {
border-radius: 50%;
background: #ccc;
}
</style>
結果は、以下の通りです。7/21にグレーの丸印を付けています。
おわりに
tableタグを使っているので、CSSがうまく効かないことがしょっちゅうあります。
カレンダーは微調整するだけでも結構大変です。
執筆者
えいじ@naeco.jp この記事を書いた人
自作するのが好きですぐに試したくなる、凝り性なWebエンジニア。
カラーミーショップ、モールなどのECについて記事にしています。
ご相談・お問い合わせはこちら