Calendar Blocks create calendars that display your site's collection items: blog posts, events, products, gallery images, or album tracks. Each item displays chronologically in the calendar and links to the original collection item.
Calendar Blocks are a great way to show events from an Events Page in other areas of your site.
Tip: Events Pages can also use a calendar layout. To learn more about the differences between these features, visit Event Pages vs. Calendar Blocks.
Watch a video
Before you begin
- For the best visual display, we recommend adding excerpts and thumbnail images to every item in the collection featured in your Calendar Blocks.
- Calendar Blocks don’t support booking. For booking, we recommend using Acuity Blocks.
- If an event is set to end at midnight, Calendar Blocks will display the event on both days. To only display the first day, adjust the end time to 11:59pm on the linked Events Page.
- Blog posts scheduled for future publication won't appear in Calendar Blocks, though upcoming events will.
- Each Calendar Block can only display content from a single collection page.
Calendar Block display
Features and behavior
Calendar Blocks include interactive features to help visitors navigate and view details:
- Item excerpts display on hover.
- Item thumbnail images display cropped to fit the square area of the given calendar date.
- Arrow controls automatically appear at the top to navigate by month.
- Dates without items appear gray or match your site’s background color, depending on the size of your block. Calendar Blocks don’t have their own style tweaks.
- Clicking any date with an item will open the original item page.
- If there are multiple items occurring on the same date, each item's time and title displays in the same box. The height of the week expands automatically to display additional items.
- In the case of multiple items on a given date, thumbnail images for individual items won't display.
Calendar Blocks adjust to fit the page when viewed on a smaller display. You can resize the blocks to adjust their size relative to other page content.
- When the block width is smaller than 600 pixels, titles, event times, and excerpts display, but not thumbnail images.
- When the block width is smaller than 300 pixels, only titles display.
Here's an example of a Calendar Block displaying events from an Events Page:
Step 1 - Add the Calendar Block
- Open a page or post editor.
- Click an Insert Point or the +.
- Select Calendar from the menu.
For more detailed steps, visit Adding blocks.
Step 2 - Select a page to feature
In the Calendar Block Editor, select a collection to display content from, then click Apply.
A Calendar Block can only connect to one collection at a time. To display multiple collections, add additional Calendar Blocks.
Calendar Blocks can display items from the following collections:
- Events - Links to upcoming and past events. Displays event title, event time, and thumbnail. This is the most popular use for Calendar Blocks.
- Blog - Links to blog posts by publication date. Displays post title and thumbnail.
- Album - Links to album tracks by publication date. Displays track title.
- Gallery - Links to images by publication date. Displays image title.
- Products - Links to products by publication date. Displays product name, description, and thumbnail.