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

The Calendar Block displays upcoming events and collection items, sorted by publication date. While the Calendar Block is ideal for displaying events from an Events Page, you can also use it to display chronological links to blog posts, products, gallery images, and album tracks.

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. We recommend linking to a third-party service for booking ability.
  • 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 item's page.
  • If a date has more than one item, each item's time and title display in the date's 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, 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 featuring 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

The Calendar Block can display items from the following collections

  • (Most popular) Events - Links to upcoming and past events. Displays event title, event time, and thumbnail.
  • 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?
33 out of 212 found this helpful
Using the Calendar Block