カレンダー

説明はPHPプログラムを含みます。関連する操作はPHPプログラムを理解する技術者が対象となります。

フロントエンドで表示するカレンダーは、固定ページ、または、投稿のコンテンツにショートコード「booking-calendar」を指定する事で表示されます。このときショートコードには、表示を制御するための様々なパラメータを設定する事ができます。

本節は設定可能な各種パラメータの動作内容、及び、出力されるHTMLについて詳細を説明します。

カレンダー表示のショートコードで「room_plan」は必須パラメータになります。必ず「客室ID」と「宿泊プランID」をハイフンで対にして指定して下さい。

例:[booking-calendar room_plan=”xx-yy”]

xxは客室ID、yyは宿泊プランIDを示します。

カレンダー表示のHTMLの構成

コンテンツに出力されるカレンダーのHTMLは、次のような構成で出力されます。

<div id="mtsab-calendar" class="mtsab-month-calendar">
    <table>
        <caption>
            対象年月タイトルと月切替リンクの表示
        </caption>
        <thead>
            曜日タイトルの表示
        </thead>
        <tr class="week-row-1">
            <td class="日付 曜日 スケジュール">日付内の表示</td>
            :
        </tr>
        :
    </table>
</div>

カレンダー表示はtableタグを利用した出力で、id属性(mtsab-calendar)を設定したdivタグ内に含まれて出力されます。

同じページ内に複数のカレンダーを表示する場合はdivタグのid属性の値が重複しないように、ショートコードのパラメータに「div_id」を利用して異なるidを設定して下さい。

divタグのclass属性を変更する場合は、パラメータ「div_class」を利用して下さい。

例:div_id=”mtsab-calendar” div_class=”mtsab-month-calendar”

またtableタグのid属性、class属性はそれぞれ「tbl_id」、「tbl_class」を利用して設定する事ができます。

例:tbl_id=”calendar-table” tbl_class=”month-table”

1.captionについて

カレンダーキャプションには表示対象年月と左側に前々月・前月のリンク、右側に翌月・翌々月のリンクが以下のようなHTMLで配置されます。

<caption>
    <div class="caption-prev">
        <span class="caption-item">前々月のリンク</span>
        <span class="caption-item">前月のリンク</span>
    </div>
    <div class="caption-title">
        <span class="caption-item">対象年月</span>
    </div>
    <div class="caption-next">
        <span class="caption-item">翌月のリンク</span>
        <span class="caption-item">翌々月のリンク</span>
    </div>
</caption>

キャプションに表示されるリンクや記号を変更したい場合、DataResource.phpファイルの設定を修正します。例えば前々月のリンクは次のように定義されています。

// カレンダーキャプション表示
public static $tCaption = array(
    'PREV_PREV' => array(
        'CLASS' => 'item',
        'MARK' => array(
            'ja' => '&laquo;',
            'en' => '&laquo;',
        ),
        'DATE' => array(),
    ),
    :

配列は多次元で、「PREV_PREV」キーは前々月を定義した配列データになります。

「CLASS」キーの値は、spanタグのクラス属性「caption-CLASS」に挿入されます。

「MARK」と「DATE」は当該箇所のリンク文字列を記号で表示するか、年月で表示するかの判定に利用されます。どちらか一方は必ず空配列を指定して下さい。また表示は他言語対応するため、言語毎指定して下さい。

「DATE」を指定する場合は、WordPressのdate_i18n()に渡す表示フォーマットを文字列で指定して下さい。以下前月「PREV」の定義データ例です。

    'PREV' => array(
        'CLASS' => 'item',
        'MARK' => array(),
        'DATE' => array(
            'ja' => 'Y-n',
            'en' => 'Y-n',
        ),
    ),

DataResource.phpファイルの修正は、全てのカレンダー表示に影響を与えます。一方ショートコードのパラメータは、表示するカレンダーに対しての設定です。影響する範囲が異なりますので留意して下さい。

2.曜日タイトル

曜日はtheadタグを利用して、次のHTMLで出力されます。

<thead>
    <tr class="week-row-thead">
        <th class="mon">月</th>
        :
        <th class="sun">日</th>
    </tr>
</thead>

曜日表示は、日本語の場合「月 火 水 木 金 土 日」、日本語以外「Mon Tue Wed Thu Fri Sat Sun」となり、現在のVer.1.0において表記を変更する方法は用意されておりません。

週の始まりを何曜日にするか、は、WordPressの一般設定にある「週の始まり」で指定して下さい。

3.日の表示

1週間を単位としてtrタグ、それに含まれる7日をtdタグで、月末まで以下のようなHTMLで出力されます。

<tr class="week-row-1">
    <td class="no-day mon">
    <td class="day-1 tue today high">予約状況の表示</td>
    <td class="day-2 wed high">予約状況の表示</td>
    <td class="day-3 thu high">予約状況の表示</td>
    <td class="day-4 fri high">予約状況の表示</td>
    <td class="day-5 sat high">予約状況の表示</td>
    <td class="day-6 sun high">予約状況の表示</td> 
</tr>
: (月末まで一週間のtrを繰り返す)

trタグはclass属性に「week-row-数字」が設定されます。数字はtrの行番号が1から順番に与えられます。

tdタグは当該日の予約状況の表示で、class属性に「day-日付」と「曜日」と「シーズン」が設定されます。当月に含まれない前後の曜日には「day-日付」の代わりに「no-day」が設定されます。

tdタグのclass属性はその他、操作している日付と同じとき「today」が追加で設定されます。またスケジューラでclass項目に値が設定された場合、それも追加設定されます。なお祝祭日を指定するとデフォルトで「holiday」が追加設定されます。

4.予約状況の表示

次のHTMLは、日付に表示される予約状況の出力例です。

<td class="day-11 fri holiday high">;
    <div class="day-number">;
        <span class="day-number-str">11</span>
    </div>
    <div class="room-daily">
        <span class="room-name room-id-xx">客室名</span>;
        <span class="room-status empty">予約フォームリンク</span>
    </div>
    <div class="plan-price">設定料金</div>
    <div class="room-note">コメント</div>
</td>

tdタグ内の表示は「日付、予約状況、料金、コメント」ですが、料金はショートコードのデフォルトパラメータ設定で非表示になっています。

ショートコードのパラメータ

パラメータとその動作の一覧です。

キー 機能 説明 デフォルト
div_id divセグメントid カレンダー表示のtableをラップするdivに設定するidの値です。アンカーで利用されます。 mtsab-calendar
div_class divセグメントclass div_idと同様、classの値です。 mtsab-month-calendar
tbl_id tableセグメントid カレンダー表示のtableに設定するidの値です。 なし
tbl_class tableセグメントclass tbl_idと同様、classの値です。 なし
caption caption表示 カレンダー表示のtableに含まれるcaptionの表示位置指定です。 top
months カレンダー表示月数 カレンダーを表示する月数です。何ヶ月先の予約を受け付けるかにより表示月数を決めて下さい。 6
date カレンダー表示開始月 カレンダーを表示する期間を固定したい場合、開始月の年月日を「date=”2017-04-01″」の形式で設定して下さい。期間は「months」で指定された月数になります。 なし
past 過去の予約状況表示 通常、過去は予約対象になりませんので「不可」表示です。過去の予約状況も表示したい場合は「1」を設定して下さい。過去の表示は、スケジュールデータの未登録エラーとなるまで表示されます。 0
anchor カレンダー表示アンカー指定 カレンダー表示を切り替える際、リンクにdiv_idの値を追加するようになり、カレンダーが画面上部に表示されるようになります。 0
bform 予約フォームページリンク表示 カレンダー表示下の予約フォームページへのリンクを消去したい場合は、「0」を指定して下さい。 1
unavailable カレンダー利用不可メッセージ カレンダーの設定が「表示しない」場合メッセージを表示しますが、「1」を設定すると表示しないようになります。 0
room_plan 客室タイプー宿泊プランの指定 カレンダー1日の枠に複数表示したい場合はカンマ区切りで宿泊プランと客室タイプの対を追加して下さい。 必須
room_name 客室名を表示 予約状況表示の前へ客室名を表示します。「0」を設定すると表示されません。 1
plan_name 宿泊プラン名の表示 予約状況表示の前へ宿泊プラン名を表示します。「0」を設定すると表示されません。 0
marking 予約状況の記号表示 客室の予約空き数を表示したい場合は「0」を設定します。 1
link 予約フォームリンク 予約フォームへリンクさせたくない場合は「0」を設定します。 1
price 予約料金の表示 料金を明示したい場合「1」を設定します。料金はプランで設定した「掲載金額」の内容が表示されます。 0
note スケジュール注記の表示 表示しない場合は「0」を設定します。 1
lang 表記言語 英語表記する場合は「en」を設定します。宿泊プラン・客室タイプ・カレンダー・予約フォーム・メール全てのデータで多言語対応している必要があります。多言語対応については別途詳細を参照して下さい。 ja