Display Weeklong Availability

[Amelia Sandberg]

We are unique in that we only allow weeklong stays (Saturday to Saturday) for all of our accommodations. We have setup our booking rules to only allow check ins and check outs only on Saturdays. However, when these rules are applied, Sunday through Friday display as “unavailable” and to potential customers looks like the full week is booked. The image below is for one of our accommodations that is open for the week of August 10th-17th, but it looks like only August 10th is “free”

Is there a way to change the calendar settings so that either the full week shows as available (i.e. the user would select the week of August 10th-17th) or to show all dates as available but display a pop-up notification when a user violates our booking rules (e.g. “You must select a reservation that begins on a Saturday and ends on a Saturday)?

[J. Davis]

Hi Amelia,
The date is blocked in the calendar for the guest to select proper check-in and check-out dates. You can use CSS style to apply a custom design to the dates and describe the legend in the description area of the accommodation type or simply add an explanation that check-in and check-out are possible on Saturdays only.

[Amelia Sandberg]

Hi, thank you for the response.

I do understand why the dates are blocked out. We do already have a note on our website that explains it, but we have had a lot of feedback stating that it is confusing and they don’t see the note and unfortunately this solution does not seem to fit our needs.

What I am hoping to do is to have it be easier for a user to see that the week is available. There are a few options I think could work:

1) If a user selects a non-Saturday day an error message occurs/the user is directed to a page that says “You must select a Saturday check in and a Saturday check out”
2) The full week is one “button” to select. I.e. a user would select “Week of August 10th” as a calendar option.
3) The full week is shown as available, but it a user selects a non-Saturday check in/out the search defaults to Saturday

Is there a way to change the “blocked” calendar color scheme? I tried using the CSS tools as you mentioned for the “available” days, but when I select to change the colors nothing changes. I’ve saved the changes, restarted my browser, and tried different browser options but the original color remains.

Thanks

[J. Davis]

Hi Amelia,
Thanks for your thoughts. None of the options you mentioned are possible with the default settings. Could you please provide a URL to your site where I can view the calendar and provide you with an example of CSS code? Thanks.

[Amelia Sandberg]

Hi J, thanks for the response!

The best way to see the “issue” we’re dealing with is to go to one of our accommodations pages and try to view the “Summer” availability (anytime after May 25th). Here is an example -> https://idlewildresort.com/accommodation/cabin-8/

If you look at this accommodation in June, you currently see June 1st and June 8th as available for check in, which is correct. However, June 2-7th, and 9th-14th are all grayed out/look like they are “booked.”

Please note that the Spring (Prior to May 25th) and Fall (After August 17th) calendars are “fine” as-is since we allow 3 night stays during those timeframes. Those calendars display properly.

[J. Davis]

Hi,
You can try using the styles below to remove the line-thought style for dates when check-in/check-out is not allowed:

.datepick-popup .mphb-datepicker-slate-blue.mphb-datepick-popup.mphb-check-in-datepick .datepick-month td .mphb-not-check-in-date:not(.mphb-past-date) {
  text-decoration: none;
  background:none;
}
.datepick-popup .mphb-datepicker-slate-blue.mphb-datepick-popup.mphb-check-out-datepick .datepick-month td .mphb-not-check-out-date:not(.mphb-past-date) {
  text-decoration: none;
  background:none;
}

[Amelia Sandberg]

Thank you, J, this did remove the strikethrough for those dates.

The dates still show as grayed-out, though. Is there a way to change the grayed-out dates and make them look the same as the “open” dates?

[Robert]

I agree that it is a bit confusing. I have set booking rules so that you can’t check-in on Saturday or Sunday so it shows these dates as crossed out. However, to a customer I think they would assume that they can’t stay those dates which isn’t the case. AirBnB do it differently and if we could mimic what they do I think it would be better.

Thanks for the CSS though, that will help. Like Amelia above it would be good if that didn’t show the dates as greyed out.

Cheers,
Rob

[J. Davis]

I’ve updated the style in my previous reply to remove the background.

[Amelia Sandberg]

Thanks, J. This helps.

When I use this to edit the background, it also edits the background for the “booked” dates to match the not-check-in/out dates. Is there a way to make the “booked” dates a different color than the “not-check-out/in” dates?

I’m hoping to do something like:

-Booked dates show as Red background
-Not-check-out/in dates that are NOT booked (i.e. days where the accommodation is not booked, though we don’t allow Monday check-in) show as a green background
-Available Check in/out dates show up as a green background

Related… Is there a list of visual options available that I could review to edit certain aspects of the calendar myself through trial and error? What I’m looking for are things like “background,” and “background color” like you posted above. I have been able to find some of them, but am curious what all the options are that I could play with to see if I could wind up with the solution myself.

[J. Davis]

Hi, you can also try the following styled to color the booked dates in red and available in green:

.datepick-popup .mphb-datepicker-slate-blue.mphb-datepick-popup.mphb-check-in-datepick .datepick-month td .mphb-not-check-in-date:not(.mphb-past-date), .datepick-popup .mphb-datepicker-slate-blue.mphb-datepick-popup.mphb-check-out-datepick .datepick-month td .mphb-not-check-out-date:not(.mphb-past-date)  {
  text-decoration: none;
  background:#007e00;
}

.datepick-popup .mphb-datepicker-slate-blue.mphb-datepick-popup.mphb-check-in-datepick .datepick-month td .mphb-booked-date.mphb-unselectable-date, .datepick-popup .mphb-datepicker-slate-blue.mphb-datepick-popup.mphb-check-out-datepick .datepick-month td .mphb-booked-date.mphb-unselectable-date{
    background:#bd0000;
}

You can read different articles on how to inspect the classes of the elements on the pages of the websites and how to add custom styles for them.

[Author]

Posts