Jump to content

simple overview calendar to show availability

Go to solution Solved by paul2009,

Recommended Posts

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 me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

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
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 me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

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 me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 7 months later...

Found a resolution on another forum post.. sharing again below, if helpful to anyone else:

 

Add the following to Design > Custom CSS.

/* disable calendar background image link */

.yui3-squarespacecalendar .background-image-link {

  pointer-events : none;

  }

// disable calendar flyout link and hide arrow, uses LESS syntax

.yui3-squarespacecalendar .flyoutitem-link {

  pointer-events : none;
  
  .flyoutitem-link-arrow {
  
    display : none;
    
    }
    
  }
Link to comment
  • 4 weeks later...

I'm wanting to do something like the Calendar where I can show my order availability. I also would like the calendar to only show 3 months at a time. I added a page to my site to do this and rather than the scheduling blocks, I used events because I wanted a physical calendar. TIA!

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.