Adding Custom Booking Rules

By using the booking rules API we can create our own custom booking rules. For example, by default, it's possible to create a single booking that spans an entire year or longer, so let's say we don't want allow that, and instead we want to limit a single booking to a maximum of 7 days. How do we do that?

The booking rules API is implemented with the onDatesValid function. This function receives the booking start and end dates that the user has entered which can then be validated against any set of rules we wish to implement. Here's the code for limiting a single booking to a maximum of 7 days. Note: the video shows (month -1). The month was updated after to match the JavaScript Date object, so (- 1) was removed from the code below.

const WEEK_MS = 6.5 * 24 * 60 * 60 * 1000;

$w.onReady(function () {

    $w('#calendar1').onDatesValid(({ data: dates }) => {
        $w('#calendar1').userValid = true;
        $w('#calendar1').userError = '';

        let start = new Date(dates.start.year, dates.start.month, dates.start.date);
        let end = new Date(dates.end.year, dates.end.month, dates.end.date);
        let duration = end.getTime() - start.getTime();
        if (duration > WEEK_MS) {
            $w('#calendar1').userValid = false;
            $w('#calendar1').userError = 'Bookings of only up to 7 days allowed.';
        }
    });

});

The other important elements of the API are the userValid and userError variables that need to be set to communicate that a booking rule has not been satisfied. In the code above, the start and end dates are converted to JavaScript Date objects, then the getTime method is used to determine the duration of the booking in milliseconds. If the duration is more than one week (WEEK_MS) then we set userValid to false and set the error message in userError.

Note that the onDatesValid API can be used with the onDatesReserved API, discussed in the previous post, at the same time.