The Calendar Block creates a calendar that displays 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.
The Calendar Block is 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 the Calendar Block.
- The Calendar Block doesn’t support booking. For booking, we recommend using the Acuity Block.
- If an event is set to end at midnight, the Calendar Block 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 the calendar, though upcoming events will.
- A Calendar Block can only display content from a single collection page.
Calendar Block display
Features and behavior
The Calendar Block includes 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. The Calendar Block doesn’t have its 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.
The Calendar Block adjusts to fit the page when viewed on a smaller display. You can resize the block to adjust its size relative to other page content.
- When the block width is smaller than 600 pixels, thumbnail images won't display.
- When the block width is smaller than 300 pixels, the calendar won't display event times or excerpts.
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.
The Calendar Block 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 the Calendar Block.
- 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.