Using Calendar Blocks on Your Website
TL;DR:
- Calendar blocks display events and other content on your site
- They can't be used for booking – use scheduling blocks instead
- Only content from one collection page can be displayed per block
- Enhances visual interest by using excerpts and featured images
- Responsive design adjusts to fit different devices
Adding Calendar Blocks
To add a calendar block to your website:
- Open the page or post editor
- Click "Add Block" or select an insert point and choose "Calendar"
- Use the block editor (click the pencil icon) to select which collection page to showcase. Remember, each calendar block can only link to content from one specific collection
Display Options in Calendar Blocks
Calendar blocks can display:
- Events: Shows the event's title, time, and a featured image
- Blog Posts: Lists by publication date with titles and featured images
- Products: Highlights product names, descriptions, and featured images
- Albums and Galleries (version 7.0): Displays titles of tracks or images based on publication dates
To get the best visual results:
- Add short excerpts and a featured image to each item
- Note that featured images will be cropped to fit dates on the calendar
- Empty dates will blend with the background, appearing either gray or matching the site's color depending on your settings
Pixelhaze Tip: To avoid having an event appear on two consecutive days at midnight, set its end time as 11:59 PM.
Interactivity and Responsive Design
Interactive Features
- Navigate through months using arrow controls
- Click on any date with an event or item to visit its page
- If a date has multiple items, each is listed with its time and title
Responsive Behavior
- Calendar blocks are dynamic and will resize according to the viewing device
- When block width is less than 600 pixels, displayed content will include titles, times, and excerpts but not featured images
- Under 300 pixels width, only titles are displayed
FAQs
-
Can I use multiple collection pages in one calendar block?
- No, each calendar block can only display items from one collection page
-
Why aren't my upcoming blog posts showing in the calendar block?
- Posts scheduled for future publication aren't displayed until they are officially published
-
Can I customize the style of calendar blocks?
- Calendar blocks do not have dedicated style settings but can be resized and configured in layout
Jargon Buster
- Collection Page: Web page designated for grouping and displaying similar types of content like blogs or events
- Excerpts: Short text overviews that appear when you hover over an item in the calendar
- Featured Images: Primary images used to represent blog posts, events, or products in calendar blocks
Wrap-up
Using calendar blocks effectively can enhance the functionality and aesthetic of your website. By showcasing key events and content, you provide a dynamic user experience that keeps your audience engaged and informed. Remember to leverage the flexibility and responsive design of these blocks to ensure your site looks great on any device.
Want to learn more about Squarespace website design? Join our community at Pixelhaze Academy for expert tips and tutorials.