【MTS Car Booking】カレンダーの空き状況検索をカスタムしてみた（CSS）

wordpressで、レンタカー予約サイトが作れるプラグイン
「MTS Car Booking」

カレンダーから空き状況検索ができるとのことで、色々触ってみたので備忘録

１）カレンダー表示

公式サイト　1.7 車両の検索・表示機能

まず、カレンダーの検索機能を設置（表示）させましょう。

適当に固定ページを作って、そこに下記ショートコードを貼り付けたら完成

[rental_finder]

表示させる内容を、カレンダーではなく、車両の詳細とか、料金などに指定したい場合には、さらにパラメータを追加していくことになる。

例えば、検索結果に料金表を表示させたい場合には下記ショートコードになる。

[rental_finder term="0" show="rental_box" tno="1"]

上記コードの意味は

▼詳細一覧表示
showの設定値：rental_box

▼料金表表示
showの設定値：rental_box
Tnoの設定値：1

２）CSSでレイアウト調整

文字とか背景とかの色を変更したい場合には、CSSを使う。

自分はLightningを使っているのだが、固定ページの編集画面内にある「カスタムCSS」を使用した。（これで個別ページだけのCSS指定ができる）

この時、「!important;」を使用しないと、反映されないので注意が必要だ。自分がやったのは下記

.rental-car-charge th {
    color: #3c3c3c !important;
    border: 1px solid #000000 !important;
    background-color: #aa8535 ;
    padding: 0.1em;
    text-align: center;
    width: 50%;
}

.booking-link a { 
    background-color: #ffffff !important;
} 

div.booking-link{
margin-top: 20px !important;
}