Rental Widget - Unavailable and Blocked Dates

Two different ways to style dates that can't be selected as the customer's rental start date

The Rental Widget Configuration Options allow you to set colours for Unavailable and Blocked dates in the calendar.

Unavailable dates

These are dates that can't be selected as the start date in the calendar due to:

• Dates of existing rentals

• Buffers of existing rentals

• Days required for buffers of a new rental

• Blackouts

Blocked dates

These are dates that can't be selected as the rental start date in the calendar due to:

• Days of the week that can't be selected, per your Rental Settings

• Days which make up the duration of the new rental (excluding the first day), based on the duration variant selected by the customer (or your default duration set in Rental Settings). These are days that are available, but which can't be selected as the start date, because it would mean part of the rental and/or end buffer would cross into the dates of an existing rental, or a Blackout that is set to not allow overlaps.

Why separate them?

The feedback from customers is that it can be misleading for a date to appear as unavailable when it is in fact available - but just can't be selected as the start date.

Consider someone wanting to rent something to use on Saturday. Our postage provider doesn't deliver on weekends so in our Rental Settings, we have it set so that rentals can't start on Saturdays or Sundays for the Post delivery method.

However, a customer comes to the Product, looks at the calendar and sees Saturday & Sunday greyed out, and thinks it must be unavailable. In fact, it is available, and it could be rented by selecting a 4-day rental starting on the Friday (so Friday to Monday), which covers the Saturday the customer wants to use the item.

To prevent this misunderstanding, you can use different styling for a Blocked date. You can make the styling similar to an available date but with a slight adjustment, so that it doesn't look unavailable, but also makes it obvious that it can't be selected as the start date. This is helped by the tooltip that appears when you hover on it, or the alert that appears if you attempt to tap it on mobile. See the example screenshot below.

Example styling of Blocked dates (Saturday & Sunday) vs Unavailable dates due to an existing rental at the start of the month

Changing the Tooltip and Alert messages

The default messages that appear when you hover on an Unavailable date or Blocked date, or tap on a Blocked date on mobile, should work in most cases. If you'd like to change them, you can with some custom code.

The following code would need to be added somewhere into your theme. All that's required is that the code is:

• Included on pages that use the PRP Rental Widget (it can be on all or other pages and it won't affect anything)

• Included before the PRP Rental Widget code in the page

The simplest way to do this is to add a Custom Liquid block above the PRP Rental Widget block in your rental product page template. Below is the code to put into the block.

<script>
window.PRP = {
    texts: {
        messages: {
            blocked_date: `Blocked date tooltip message here`,
            unavailable_date: `Unavailable date tooltip message here`,
            blocked_date_alert: `Blocked date alert message here (shown if tapped/clicked)`
        }
    }
}
</script>

You can add <br> within the text if your message appears too wide and you want it to wrap onto a new line. E.g.

blocked_date: `Long blocked date tooltip<br>message here that I want to wrap<br>onto multiple lines`,

Other than the Custom Liquid block in the template, an alternative is to include it in your theme.liquid file, just above the closing head tag (</head>). Go to the Code Editor in your theme and locate theme.liquid. Do a search for </head> and then include the code directly before that.