Using the Check Availability API

In order to allow site visitors to filter all of our rentals against their desired rental dates, we can use the Check Availability API. First, we need to add date input elements to the rentals list page. Click Add Elements -> Input -> Date & Time, and drag one onto the page. Click the Design icon and switch to an element that matches the site theme. Create two inputs, one for the start date and one for the end date. Update their placeholder text accordingly.

Next, add the Booking Calendar API widget to the rentals list page. Click Add Elements -> App Widgets -> API (under Booking Calendar) and drag it onto the page. Under Dev Mode, click Turn on Developer Mode. In the coding area for the rentals list page, enter the following code:

var date = new Date();
var start = date;
var end = date;
var init = true;
var allItems = [];

$w.onReady(function () {

    $w('#startDate').onCustomValidation((value, reject) => {
        if (typeof value === 'undefined') return;
        start = value;
        if (init) {
            init = false;
            allItems = $w("#gallery1").items;
        }
    });

    $w('#endDate').onCustomValidation(async (value, reject) => {
        if (typeof value === 'undefined') return;
        end = value;
        let items = allItems;
        let availItems = [];
        for (let i = 1; i < 7; i++) {
            if (await $w('#api1').checkAvailable(start, end, i)) {
	           for (let j = 0; j < 6; j++) {
		          if (items[j].alt == i) {
			         availItems.push(items[j]);
		          }
		      }
            }
        }
        $w("#gallery1").items = availItems;
    });

});

Update the element names to match the code. The checkAvailable API is called with the start and end dates, and the Item ID to check them against. The function returns true if the dates are available, causing this rental item to be added to the list of available rental items.

Finally, we need to connect each rental list item to its Item ID. Select the Wix Pro Gallery and click Connected to CMS. Set the "Alt texts connect to" field to "Item ID (Number)". Preview the website and try entering a variety of start and end dates. Confirm that only available rental items are displayed. You can also try it out at the RV Rentals website.