CSS? 'Date Checker' for couples wanting to check product availability for their Wedding

Site URL: https://www.thebigredbox.co/hepburn-hire

I wonder if there is clever code/widget/integration/workaround for this...

I'm a wedding supplier and would love for people to be able to see if my product is available for their wedding date, before they fill in any forms or email me via my contact form:

1. I'd be able to input the unavailable/available dates on the back end...

2. The calenders etc feel visually too big/involved at the stage I want people to interact with my site

1 hour ago, TheBigRedBox said:

I'm a wedding supplier and would love for people to be able to see if my product is available for their wedding date, before they fill in any forms

If you simply want to show availability for enquiries, you can add a hidden Events page and then add a ‘Booked’ event to this page for each date where a booking has been made.

You can then display this information using a Calendar Block, using a Spacer Block (or another block) beside it to make the Calendar smaller. This makes it more suitable for showing free/busy information. 

This makes sense.

SO the calendar block would pull the info through from the hidden events page?

10 hours ago, TheBigRedBox said:

SO the calendar block would pull the info through from the hidden events page?

Exactly that! For example:

On 4/13/2022 at 10:40 AM, TheBigRedBox said:

2. The calenders etc feel visually too big/involved at the stage I want people to interact with my site

As paul2009 mentions you can make the whole calendar smaller with spacer blocks.

If the issue is to many weeks shown at the same time please see the following.