希望する車両が予約済みかどうか、あるいは借りられる車両があるかどうかは、予約カレンダーを見て確認します。

予約状況を表示するカレンダーは、これまで(Ver.1.1まで)は車両を選択して予約フォームページへ移動しないと確認できませんでした。

Ver.1.2では、ショートコード「rental_calendar」に車両IDを設定して、投稿や固定ページに予約カレンダーを表示する機能を追加しました。

[rental_calendar vid="xx"]

車両IDはカンマ区切りで複数指定できます。

HTML出力の構成

ショートコードが指定されると、次のHTMLをセグメント単位で出力します。

• カレンダー切り替えの月リンク
• 車両名称
• 車両登録画像
• 予約カレンダー
• 予約フォームへのリンク

上記の項目の中で、ショードコードにパラメータを指定をすることで非表示と(出力しないように)することができます。次のパラメータの設定で紹介します。

パラメータの設定

パラメータを設定することで、出力する内容を変更することができます。予約状況の見せ方に合わせ利用してください。

• 車両IDの設定(必須)
  vid：必ず１つ以上設定してください、「,(コンマ)」区切りで複数指定可能
• カレンター切り替えの月リンク
  month_link：0で非表示、デフォルトは1
• 車両登録画像
  image：-1で非表示、デフォルトは0 (最初の登録画像)、1は2番目の登録画像
• 予約フォームへのリンク
  booking：0で予約リンク非表示、デフォルトは1
• カレンダー表示月数
  months：デフォルトは1、2カ月表示する場合は2を設定、3カ月、4カ月も可能
• カレンダーセグメントのクラス名
  class：デフォルトは「rental-calendar」
• カレンダー上部に年月を表示
  caption_use：デフォルトは0、カレンダー上に年月を表示する場合は1
• 多言語対応
  lang：デフォルトは「ja」、英語の場合は「en」、それ以外は翻訳データ必要です

CSS編集の例

ショートコードを利用したカレンダーの表示は、プラグインディレクトリにある「css/rental_calendar.css」が読み込まれます。

CSSを修正して表示を変更したい場合はこのファイルを直接修正せず、新たに「css/rental_caldar_users.css」ファイルを登録すれば、この名称のcssファイルが優先して読み込まれるようになっています。

上記表示は、元のcssファイルをコピーして次のような変更をしました。

.vehicle-calendar-box {
     display: table;
     width: 100%;
 }
 .vehicle-image {
     display: table-cell;
     vertical-align: middle;
     width: 49%;
 }
 .rental-calendar {
     display: table-cell;
     padding-left: 2px;
     vertical-align: middle;
     width: 49%;
 }

.rental-calendar th,
.rental-calendar td {
     border: 1px solid #cccccc;
     padding: 0.3em;
     text-align: center;
     width: 14%;
     font-size: 0.8em;
 }

CSSの設定は参考です、設定に誤りがあればご容赦ください。