複合予約カレンダー

複合予約カレンダーStudio

注：ビジネス版Ver.1.4.5以上でご利用いただけます。

１つの予約カレンダーに複数の予約品目を合わせて表示するとき、ここで説明するショートコード「multiple-calendar」を利用します。

キーワード「multiple-calendar」と同時に普通の予約カレンダーと同様、どの予約品目を表示するかを、パラメータに予約品目のIDをカンマ区切りで指定します。なお表示される予約品目の並び順は、ここで指定した順番ではありませんのでご注意下さい。

表示の順番は、古いバージョンでは予約品目の登録で「属性の順位」で指定された昇順(小さい順)、あるいは予約品目IDの昇順で表示されました。現在はショートコードに指定されたIDの並び順で表示するようになっております。

ショートコードの例

[multiple_calendar id="xx,yy"]

例の「xx」、「yy」には予約品目のIDを、半角数字とカンマ区切りで指定します。

 パラメータ

利用できるパラメータは次の通りです。パラメータを複数指定する場合は、半角の空白で区切って指定します。

  • class
    予約カレンダーを囲うdivタグのクラス属性で指定されます。デフォルトは「multiple-calendar」が指定されます。
  • year、month
    年月を固定して表示したい場合に指定します。デフォルトは現在時刻から取り出されます。
  • pagination
    前月、次月のリンク表示が不要な場合、「pagination=”0″」と指定して下さい。デフォルトは「1」が指定されています。
  • caption
    予約カレンダー上部に表示する年月を表示しない場合、「caption=”0″」と指定して下さい。デフォルトは「1」が指定されています。表示そのものを変更したい場合、以下で説明するメッセージフィルター機能が利用できます。
  • link
    予約カレンダーに表示されるマークにリンクを張りたくない場合、「link=”0″」と指定して下さい。デフォルトは「1」が指定されています。
  • weeks
    予約カレンダーのヘッダーに曜日が表示されますが、この文字列をアルファベットなどに変更したい場合に設定します。例えば「weeks=”Sun,Mon,Tue,Wed,Thr,Fri,Sat”」のようにカンマ区切りで指定します。
  • skiptime
    予約カレンダーを選択すると次に時間割の選択画面になりますが、時間割が１つしかない場合でそのまま予約入力フォームに短縮したい場合、「skiptime=”1″」と指定して下さい。
  • suppression
    予約カレンダー内で本日以前やスケジュール設定により、不可マーク「－」が表示されます。このマークを表示しないようにしたい場合、「suppression=”1″」と指定して下さい。これはCSSを利用して画像を表示するようなデザインをした場合に有効です。
  • anchor
    予約カレンダーから時間割選択へ移動したとき、時間割の先頭に指定されたアンカーに移動するようになります。これにより、表示するクロールする手間を省くことができるようになります。
  • calendar_id
    カレンダー何の表示を書き換えるための様々なメッセージフィルターが用意されていますが、予約品目ごと予約カレンダーを複数用意した場合、それぞれ別の表示がしたい場合にcalendar_idを指定します。ここで指定したcalendar_idがメッセージフィルタープログラムに渡されます。

 メッセージフィルター

複合予約カレンダーのメッセージフィルター予約カレンダーに表示されるテキストを変更したい場合や、画像を利用したデザインへ変更したい場合などにこのメッセージフィルター機能を利用すると有効です。

例えばこの複合予約カレンダーでは予約品目の名称がそのまま表示されます。しかし名称は予約品目のタイトルですので、通常は分かりやすい内容で長いことが多いでしょう。

そこでメッセージフィルターを利用して予約品目名を省略して表示するようにします。

またリンクをアイコン画像で示したい場合にも利用できます。

メッセージフィルターの作り方ですが、WordPressの機能を利用したPHPプログラムになりますので、通常はご利用のテーマディレクトリにある「functions.php」に書き込みます。

以下にサンプル例の一連を掲載します。

// キャプションの書替え
function mts_caption($str, $daytime, $cid) {
    return date_i18n('F, Y', $daytime);
}
add_filter('mtssb_caption', 'mts_caption', 10, 3);

// 日付の書替え
function mts_day($day, $cid) {
    return substr('0' . $day, -2);
}
add_filter('mtssb_day', 'mts_day', 10, 2);

//　予約品目名の書替え
function mts_multiple_calendar_name($title, $cid, $aid) {
    if ($aid == xx) {
        return 'A';
    } elseif ($aid == yy) {
        return 'B';
    }
    return $title;
}
add_filter('mtssb_multiple_calendar_name', 'mts_multiple_calendar_name', 10, 3);

// マーキングの書替え
function mts_multiple_calendar_marking($marking, $cid, $aid, $mark, $remain) {
    if ($aid == xx || $aid == yy) {
        if ($remain < 10) {
            return '残少:' . $remain;
        }
        return '空';
    }
    return $marking;
}
add_filter('mtssb_multiple_calendar_marking', 'mts_multiple_calendar_marking', 10, 5);

// 画像表示例
function mts_multiple_calendar_linktext($linktext, $cid, $aid, $mark, $remain, $name) {
    if ($mark == 'disable') {
        return $linktext;
    }

    if ($aid == xx) {
        $fname = 'acourse.jpg';
    } elseif ($aid == yy) {
        $fname = 'bcourse.jpg';
    } else {
        $fname = 'nothing.jpg';
    }

    return '<img src="http://example.com/images' . $fname . '" /><span class="article-name">' . $remain . '<span>';
}
add_filter('mtssb_multiple_calendar_link_text', 'mts_multiple_calendar_linktext', 10, 6);

// 凡例表示例
function mts_message_after($str, $cid) {
    return "<p>記号について　〇：空席有り　☆：空席有り　△：空席少　×：満席　－：予約不可</p>"
}
add_filter('mtssb_multiple_message_after', 'mts_message_after', 10, 2);

画像表示はimgタグを指定しますので、画像データを用意してご利用のサイトにリンクを張るようにして下さい。

© MTS Simple Booking 2024