Jump to content

simple overview calendar to show availability

Go to solution Solved by paul2009,

Recommended Posts

Posted (edited)

hi! looking for a very easy & simple overview so visitors can see when my place is booked, or still free.
Nothing more actually! 🙂 
Something like this in attechement.

Thank you for your help! 
Eva

Scherm­afbeelding 2023-05-03 om 17.24.22.png

Edited by evagoethals
Link to comment
1 hour ago, evagoethals said:

looking for a very easy & simple overview so visitors can see when my place is booked

Where are you storing the booking data?

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment

Hey Paul, thanks for your question,
it's just a very simple business (1 house) and I just want to give visitors an overview of available dates. I can link it with my google calendar, or any other calendar where I can mark booked days as 'occupied'. Thanks a lot, Eva

Link to comment
  • Solution
Posted (edited)
2 hours ago, evagoethals said:

I can link it with my google calendar, or any other calendar where I can mark booked days as 'occupied'.

OK, so I'm assuming you don't have this data stored anywhere right now?

If that's the case, you could use a simple (hidden) Events page and add an 'event' for each booking. Don't add any personal information, perhaps just a booking reference of some kind to help you track them.

Once you have some events saved, you can then use a small version of the Calendar Block to show the free/busy information:

image.thumb.png.330629757b455e51c70455b6cb68e1d1.png

If you are using Fluid Engine you can easily size the calendar to meet your needs. If you are using LayoutEngine (the predecessor to Fluid Engine) then you'll probably need to add a Space Block (or another block!) beside the Calendar Block to make it smaller.

With a few lines of custom CSS, you could style the calendar too.

Did this help? Please give feedback by clicking an icon below  ⬇️

Edited by paul2009

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment
5 minutes ago, evagoethals said:

that looks great Paul, i am gonna give this a try!

You're welcome. The screenshot above was produced by simply adding three events to the Events page (as shown below). I didn't use any code 🙂

image.png.05c765d066100546c43ea9678080d743.png

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.