Ver.1.12 異なる予約品目を表示するミックスカレンダー

ミックスカレンダー

Notice: A non well formed numeric value encountered in /home/buttress/www/tm.mt-systems.jp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/buttress/www/tm.mt-systems.jp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/buttress/www/tm.mt-systems.jp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/buttress/www/tm.mt-systems.jp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/buttress/www/tm.mt-systems.jp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/buttress/www/tm.mt-systems.jp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/buttress/www/tm.mt-systems.jp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/buttress/www/tm.mt-systems.jp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/buttress/www/tm.mt-systems.jp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/buttress/www/tm.mt-systems.jp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/buttress/www/tm.mt-systems.jp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/buttress/www/tm.mt-systems.jp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/buttress/www/tm.mt-systems.jp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/buttress/www/tm.mt-systems.jp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/buttress/www/tm.mt-systems.jp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/buttress/www/tm.mt-systems.jp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/buttress/www/tm.mt-systems.jp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/buttress/www/tm.mt-systems.jp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/buttress/www/tm.mt-systems.jp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/buttress/www/tm.mt-systems.jp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/buttress/www/tm.mt-systems.jp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/buttress/www/tm.mt-systems.jp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/buttress/www/tm.mt-systems.jp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/buttress/www/tm.mt-systems.jp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/buttress/www/tm.mt-systems.jp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/buttress/www/tm.mt-systems.jp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/buttress/www/tm.mt-systems.jp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/buttress/www/tm.mt-systems.jp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/buttress/www/tm.mt-systems.jp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/buttress/www/tm.mt-systems.jp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

複数の予約品目を同時に表示する新しい予約カレンダー、「ミックスカレンダー」機能を追加しました。このカレンダー機能は同じく新しく追加したウィジェットと連携させることで、より良いUI(ユーザーインターフェース)をご提供いただくことが可能となります。

新しい「ミックスカレンダー」の機能は次の通りです。

  • 時間割の異なる予約品目をまとめて1つの月間カレンダーで表示できます。
  • 日付選択後の時間割カレンダーでは、指定予約品目を全て表示します。
  • 時間割カレンダーでは時間割を横方向の他、縦方向指定ができます。
  • ウィジェットの月間カレンダーから時間割カレンダーページを表示できます。
  • ウィジェットの日付指定で時間割カレンダー表示が切り替わります。
パラメータの指定

ここではショートコード「mix_calendar」で指定可能なパラメータについて、後に紹介する特殊なパラメータ以外について説明します。

  • id
    まとめて表示する予約品目のIDをカンマ区切りで指定します。

    指定可能数に制限はありません。表示ページに合わせて指定して下さい。
  • 時間割縦のカレンダーtime
    右図のように時間割を縦軸で表したい場合、「time=”col”」とパラメータを追加して下さい。
  • pagination
    前月・翌月のリンク表示を月間カレンダーに対してどのように表示するか数字で指定します。
    0:非表示
    1:下(デフォルト)
    2:上
    3:上下
  • caption
    カレンダーのキャプション表示(年月日)を抑止します。デフォルトは「1」。
  • year、month、day
    特定日の時間割カレンダーを表示します。
  • time_cell
    時間割の時間表示行を除きたい場合に設定します。デフォルトは「1」。
  • space_line
    時間割が横のデフォルト表示では予約品目の間にスペース1行が加えられますが、このスペースを除きたい場合に設定します。デフォルトは「1」。
  • calendar_id
    メッセージフィルターを利用する場合でどのページのショートコードか判別する必要がある場合は、ここで指定した名前がメッセージフィルターに渡されます。
  • drop_off (Ver.1.15以降)
    時間割の表示で予約不可状態の予約品目の表示をしないように設定します。デフォルトは「0」。

その他「class」と「anchor」があります。

「class」はtableタグで表されたカレンダー表示を囲むdivタグに設定されるclass属性の値で、デフォルトは「mix-calendar」です。デザインの関係でどうしても変更する必要がある場合にご利用下さい。

「anchor」は上記のdivタグに設定されるid属性の値で、当該ページを表示する際のアンカーとして利用されています。

表示の順番とカレンダーに表示するスケジュールの注記

予約品目の表示の順番は、予約品目の設定画面で属性ブロックに「順序」という項目があります。並びはここで指定された数字の昇順で表示します。

また月間カレンダー上に表示される注記は、表示の順番で指定された先頭の予約品目のスケジュールに設定された注記が表示されます。

ミックスカレンダー用ウィジェット

このウィジェットを利用すると、カレンダー上の日付の予約状況クリックで時間割カレンダーの表示ページに移動することができるようになります。また別の日付をクリックすると時間割カレンダーの表示も指定した日時で表示されます。

利用者はこの機能により、ウィジェットの予約状況を見ながら指定日を容易に確認できるようになります。

ミックスカレンダーウィジェットの設定ウィジェットの設定は右図の通りです。

この機能を利用するために、先ずはミックスカレンダーを表示するためにショートコードを保存した固定ページ(あるいは投稿)のIDをメモして下さい。

ミックスカレンダーの時間割表示はそのページ上にされるので、ウィジェットにそのIDをセットすることになります。

それぞれの項目は次の通りです。

  • ID
    ミックスカレンダーを表示するために設定したショートコードを含むページのPost IDです。
  • タイトル
    ウィジェット表示のタイトルです。表示の仕方は、通常テンプレートで設定されます。
  • キャプション表示
    年月日を表示するtableタグのキャプション表示をしない場合はチェックを外して下さい。
  • 月リンク表示
    前月・翌月のリンク表示場所を指定します。
  • class名
    ウィジェット上に表示されるtableタグを囲むdivタグのclass属性に指定される値です。

表示のデザインはCSSを利用して変更して下さい。

 メッセージフィルター

月間予約カレンダーで定義されているメッセージフィルターは次の図の通りです。

ミックスカレンダー月カレンダーのメッセージフィルター使用例は次の通りです。

次は時間割カレンダーです。

ミックスカレンダー時間割カレンダーのメッセージフィルター

時間割カレンダー上の予約状況をマークではなく予約残数を表示したい場合、上記のメッセージフィルター例の中の「mtssb_mixday_marking」フィルターを参考にして下さい。

当該フィルターには予約残数がパラメータで渡されますので、それを表示するように戻すことで残数を表示するようになります。

時間割カレンダーの活用

下図の例は、時間割が同じなので一覧表示にした例です。

時間割カレンダーのカスタマイズ例ショートコードのパラメータ設定とメッセージフィルターを組み合わせて実行します。

ショートコードの例:

メッセージフィルターの例:

下図は時間割表示を縦にした場合の例です。

時間割カレンダーのカスタマイズ例2ショートコードの例:

メッセージフィルターの例:

サイトに合わせて最適と思われる方法をご利用下さい。

月間カレンダーのマーク表示優先度

各日付で予約の残数状況が異なる場合、月間カレンダーではそれぞれの残数状況

  • booked : 4
    予約が1件以上ある
  • vacant : 3
    予約がなく空状態
  • low : 2
    残数少ない
  • full : 1
    満杯状態
  • disable : 0
    予約不可

にあわせて、1番大きい優先順位番号を表示するようにしています。

この優先順位はメッセージフィルターで書き換えることができます。

次の例は「low」の優先順位を上げた場合です。

これでどれか1つの残数状態が「low」なら、月間カレンダーのマークは「△」が表示されるようになります。