Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Using Calendar Blocks

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.

Responsive design

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, 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

  1. Open a page or post editor.
  2. Click an Insert Point or the +.
  3. 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.

Calendar_-_1.jpg

Was this article helpful?
67 out of 373 found this helpful
Using Calendar Blocks