バケパ カレンダー検索の日付範囲指定 / 同月再検索
PC向け/スマホ向けサイト両対応
All-in-One対応
機能概要
バケーションパッケージのカレンダーでの空き検索時に、月初から月末までの検索ではなく、検索する日の範囲を指定して検索対象を限定できるようにします
※ただし同一月に限ります(月またぎでの検索はできません)
また、月の再選択を行わずに同じ月の再検索を行う機能も含まれています
動作イメージ
※ブックマークレットの登録・利用方法が分からない場合は、基本的な使い方のページを参考にしてください
ブックマークレット文字列
以下の文字列でブックマークレットを登録し、バケーションパッケージのカレンダー検索画面で使用してください
ダミー登録用の空ページのリンクスマホの場合
iPhone Safari / Chrome および Android Chrome など
ブックマークレット文字列
PCブラウザの場合
以下のリンクボタンを、ブラウザのブックマークバーへドラッグ＆ドロップして登録してください使い方
日付範囲指定での空き検索
- バケーションパッケージのプランを、日付を指定しない検索（「内容から探す」または「ホテルから探す」）を選択し、目的のプラン詳細のページを表示します
- 「空き状況検索」をタップ/クリックし、人数などを選択し「次へ」をタップ/クリックします
- 月選択の画面になったらブックマークレットを呼び出します
- 検索したい範囲の開始日・終了日をそれぞれ選択し、通常通り月を選択して検索を開始します
※日付指定での検索時でも満室時は「空き状況検索」ボタンが表示されます
検索範囲の指定欄が表示されます
通常と同じくすべて日が読み込み中の表示となりますが、指定範囲外の日になったら自動的にスキップされます
同じ月の再検索
一度ひと月分のの検索を行った後、再度同じ月の検索を行う場合は、月選択をし直すことなく以下の操作で行えます
-
スマホサイトの場合
カレンダー下部に「再検索」ボタンが表示されますので、それをタップしてください -
PCサイトの場合
カレンダーの月名部分(「OOOO年 O月」部分)をクリックしてください
ソースコードおよび処理概要
ブックマークレット化前のソースコードです
ご自身で表示等カスタマイズされたい方はご自由にご利用ください
※ブックマークレット化の方法については記載していません
簡単な解説
- 元の処理では、指定した月の1日から1日ごとに日付を増やしていきながら検索をし、次の月の日付になったら処理が終了するようになっています
- 理由は不明ですがこの繰り返しが再帰処理によって呼び出されています(ある日付の検索が次の日付の検索…と呼んでいく)
- このブックマークレットでは、その処理関数(ajaxRecursion)に割り込み、指定した日付以外の場合は検索せずに次に日付に進めるようにしています
JavaScriptコード
コピー
javascript: (function () {
if (document.querySelector("#__startDay") || (!document.querySelector('#js-vacancyModal.vp') && !document.querySelector('div.vpModal'))) {
return;
};
const initDaySelectElement = (id) => {
const el_select = document.getElementById(id);
el_select.style.width = '100%';
for (let i = 1; i <= 31; i++) {
const el_option = document.createElement('option');
el_option.text = i;
el_option.value = i;
el_select.appendChild(el_option);
};
};
const initDayValue = () => {
document.querySelector('#__startDay').value = '1';
document.querySelector('#__endDay').value = '31';
};
let sp = false;
let insertPos = document.querySelector("p.boxInputSelect.selectMonth");
if (!insertPos) {
sp = true;
insertPos = document.querySelector("p.boxInputSelect");
};
if (!insertPos) {
return;
};
const common_attr = 'min="1" max="31" style="width: 40px;text-align: center;color:blue;"';
const area1 = document.createElement("p");
area1.style.cssText = "color:blue;display:inline-block;margin-top:10px;";
area1.innerHTML = `検索範囲: <span class="select--custom" style="width:60px;display:inline-block;"><select id="__startDay" ${common_attr}></select></span> 日 ～ <span class="select--custom" style="width:60px;display:inline-block;"><select id="__endDay" ${common_attr}></select></span> 日 <button id="__reset">リセット</button>`;
insertPos.append(area1);
initDaySelectElement('__startDay');
initDaySelectElement('__endDay');
initDayValue();
document.querySelector('#__reset').addEventListener('click', () => {
initDayValue();
});
var orig_ajaxRecursion = window.ajaxRecursion;
window.ajaxRecursion = (year, month, day) => {
const startDay = Number(document.querySelector("#__startDay").value);
const endDay = Number(document.querySelector("#__endDay").value);
const useDate = year + ("0" + (month + 1)).slice(-2) + ("0" + day).slice(-2);
const date = new Date(year, month, day);
if (date.getMonth() != month) {
orig_ajaxRecursion.apply(this, [year, month, day]);
return;
};
const skiped_html = '<span> </span>';
const cal_selector = `.tr_${trList[useDate]} .td_${tdList[useDate]} `;
if (day < startDay || day > endDay) {
$(`${cal_selector} .calendarImage`).html(skiped_html);
document.querySelector(`${cal_selector} [name=information]`).removeAttribute('data-information');
return ajaxRecursion(year, month, day + 1);
} else {
orig_ajaxRecursion.apply(this, [year, month, day]);
};
};
let restartTarget;
if (sp) {
restartTarget = document.createElement('button');
restartTarget.id = '__restart';
restartTarget.innerHTML = '再検索';
const buttonArea = document.createElement('div');
buttonArea.style.cssText = 'text-align:right; margin-top:20px;';
buttonArea.appendChild(restartTarget);
const targetPos = document.querySelector('div.boxCalendar');
targetPos.appendChild(buttonArea);
} else {
restartTarget = insertPos.closest('div.vpAvailability').querySelector('div.cal table tbody tr th.heading');
};
restartTarget.addEventListener('click', () => {
document.getElementById('boxCalendarSelect').dispatchEvent(new Event('change'));
});
restartTarget.style.cursor = 'pointer';
})();