カレンダー

説明は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”

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

２．曜日タイトル

曜日は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の一般設定にある「週の始まり」で指定して下さい。

３．日の表示

１週間を単位としてtrタグ、それに含まれる７日を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」が追加設定されます。

４．予約状況の表示

次の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	客室タイプー宿泊プランの指定	カレンダー１日の枠に複数表示したい場合はカンマ区切りで宿泊プランと客室タイプの対を追加して下さい。	必須
room_name	客室名を表示	予約状況表示の前へ客室名を表示します。「0」を設定すると表示されません。	1
plan_name	宿泊プラン名の表示	予約状況表示の前へ宿泊プラン名を表示します。「0」を設定すると表示されません。	0
marking	予約状況の記号表示	客室の予約空き数を表示したい場合は「0」を設定します。	1
link	予約フォームリンク	予約フォームへリンクさせたくない場合は「0」を設定します。	1
price	予約料金の表示	料金を明示したい場合「1」を設定します。料金はプランで設定した「掲載金額」の内容が表示されます。	0
note	スケジュール注記の表示	表示しない場合は「0」を設定します。	1
lang	表記言語	英語表記する場合は「en」を設定します。宿泊プラン・客室タイプ・カレンダー・予約フォーム・メール全てのデータで多言語対応している必要があります。多言語対応については別途詳細を参照して下さい。	ja

導入前

インストール

管理画面

活　用

機能追加

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

１．captionについて

２．曜日タイトル

３．日の表示

４．予約状況の表示

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

導入前

インストール

管理画面

活 用

機能追加

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

１．captionについて

２．曜日タイトル

３．日の表示

４．予約状況の表示

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

活　用