カレンダー表示の月送りをページ遷移せずに実装
2017年12月18日(月)
※当ページのリンクには広告が含まれています
こちらは a-blog cms Advent Calender 2017の18日目の記事になります。
a-blog cmsでは、カレンダーで予定や記事リンクを表示させるモジュールがいくつかあります。
「この日書いた記事」をブログ等で表示させることはもちろん、店舗などの営業日のお知らせやイベントなどのスケジュールを掲載することもあると思います。
その時、「次の月、前の月を見たいな」と思ってリンクをクリックすると、通常ならページごと遷移するようになっていますが、今回は、これをページ遷移せずに月送りできるカスタマイズをご紹介します。a-blog cmsの「ポストインクルード」という機能を使いました。
サンプル
カレンダー月送りサンプル
「前月」「次月」をクリックすると、ページ遷移せずにカレンダーが切り替わるようになっています。
1.テンプレートHTMLファイルを作成
まず、カレンダーモジュール自体を記述するHTMLファイルを作成します。
今回は「/sample/calendar/tpl_cal.html」としましょう。
作成したファイルに以下のコードを貼り付けてください。モジュールID設定やCSS表示の設定は適宜行っておきます。
<div id="jsChangeContents">
<!-- BEGIN_MODULE Plugin_Schedule id="schedule_sample" --><!-- BEGIN unit:loop -->
<div class="unit"><!-- BEGIN month:loop -->
<p class="acms-text-center"><a href="{url}"><strong>{year}年 {month}月</strong></a></p>
<!-- BEGIN monthly -->
<div class="acms-text-center cal-btn-wrap">
<form action="" method="post" class="js-post_include cal-btn" target="#jsChangeContents">
<input type="hidden" name="tpl" value="/sample/calendar/tpl_cal.html" />
<input type="hidden" name="date" value="{prevUrl}[split('/', 6)]/{prevUrl}[split('/', 7)]">
<input type="hidden" name="bid" value="%{BID}" />
<input type="submit" name="ACMS_POST_2GET" value="前月" />
</form>
<form action="" method="post" class="js-post_include cal-btn" target="#jsChangeContents">
<input type="hidden" name="tpl" value="/sample/calendar/tpl_cal.html" />
<input type="hidden" name="date" value="{nextUrl}[split('/', 6)]/{nextUrl}[split('/', 7)]">
<input type="hidden" name="bid" value="%{BID}" />
<input type="submit" name="ACMS_POST_2GET" value="次月" />
</form>
</div>
<!-- END monthly -->
<div class="month">
<table class="{mode} otoya">
<tr style="display:none;">
<th>{w#0}</th>
<th>{w#1}</th>
<th>{w#2}</th>
<th>{w#3}</th>
<th>{w#4}</th>
<th>{w#5}</th>
<th>{w#6}</th>
</tr>
<!-- BEGIN week:loop -->
<tr class="week{weekRowNo}">
<!-- BEGIN day:loop -->
<td class="day{weekNo}<!-- BEGIN dayClass:veil --> {dayClass}<!-- END dayClass:veil -->">
<!-- BEGIN day:veil -->
<div class="week"><strong>{day} </strong><small>({week})</small></div>
<div class="item">
{dayLabel}
{dayItem}
</div>
<!-- END day:veil -->
</td>
<!-- END day:loop -->
</tr><!-- END week:loop -->
</table>
</div><!-- END month:loop -->
</div><!-- END unit:loop -->
<!-- END_MODULE Plugin_Schedule -->
</div>
各コードについて詳しく説明していきます。
ページ送り部分をポストインクルードに書き換え
上記のソースの6〜22行目は、通常は以下のコードが書かれています。それをポストインクルードの記述に書き換えました。
ポストインクルードについてはこちらをご覧ください。
<!-- BEGIN monthly --><p><a href="{prevUrl}">≪前月</a> | <a href="{nextUrl}">次月≫</a></p><!-- END monthly -->ポストインクルード設定：テンプレートHTMLファイルを指定
<input type="hidden" name="tpl" value="/sample/calendar/tpl_cal.html" />
ここで、作成したHTMLファイルのパスを指定します。
ポストインクルード設定：前月や次月の月を抽出
ポストインクルードで年月を指定する際は、name属性を「date」として、年月を指定します。
通常、ポストインクルード無しの場合は {prevUrl} や {nextUrl} がリンク先URLとして指定されており、 「https://aogiri.net/sample/schedule/schedule.html/2018/01/」という文字列が格納されています。
しかし、ポストインクルードの指定で欲しいのは「/2018/01」の文字のみです。
そこで、以下のように校正オプションを使って必要な文字のみを取り出します。
<input type="hidden" name="date" value="{prevUrl}[split('/', 6)]/{prevUrl}[split('/', 7)]">このとき、6や7は設置したURLの階層により異なるので、適宜設定してください。
ポストインクルード設定：周りをdivで囲み、IDを指定
作成したHTMLファイルの一番外側をdivで囲み、任意のIDを指定します（サンプルではjsChangeContents）。 このIDは、
<form action="" method="post" class="js-post_include cal-btn" target="#jsChangeContents">
のtarget属性と同じものを指定してください。
このdivで囲ったエリアが、まるっと書き換わるようになります。
2.読み込み元HTMLファイルから作成したファイルを読み込む
カレンダーを読み込みたいHTMLファイル（今回は/sample/calendar/calendar.html）から、1で作成したファイルをインクルードします。
<!--#include file="/sample/calendar/tpl_cal.html" -->
これで、https://aogiri.net/sample/calendar/calendar.htmlにアクセスすると、ページ遷移しないカレンダーが表示されるようになりました。
サンプルページでは、スケジュールプラグインの他にカレンダーモジュールのサンプルも掲載しています。
こちらも考え方は全く同じで、ページ送り部分をポストインクルードに変え、外側をdivで囲うことにより実現させています。
