Step 2: Customizе the Event Calendar Layout

After adding events to your Event Calendar widget, the next step is to customize its appearance on your site. In this section, we’ll walk you through changing the layout and configuring display options so the calendar fits seamlessly with your design. 

In this article

Choose Your Widget Layout

When setting up your Event Calendar, you can choose from several layout options: List, Grid, Masonry, Slider, Month, Week and Day:

Note: Available settings may vary depending on the layout you choose.

In the List, Grid, and Masonry layouts, you can customize the following:

1

Group Events by — Organize your calendar by Year, Month, or Day for easier browsing.

2

Events per Page — Specify how many events appear on one calendar page on desktop.

3

Events per Page on Mobile — Set how many events appear on one calendar page on mobile devices.

4

Width — Adjust the calendar’s width in pixels for precise sizing.

The Slider layout lets you customize navigation elements and the slider’s behavior in the Slider Settings tab. You can enable or disable arrows, choose a pagination style, adjust the auto-slide speed, and more:

In the Week and Day layouts, you can adjust the Time Range to control which hours are shown in the schedule.

Pro Tip: Use the same calendar across your site with different layouts by adding a special attribute to the widget’s code. Learn more about dynamic layout changes in our article: How to Dynamically Change the Event Calendar Layout.

Configure Display Settings

Once you’ve picked a layout, you can tweak the Heading, Filters, Event Elements, and the visibility of Past Events:

Let’s go through what each setting does:

Heading

Here you can customize the calendar Heading, which appears at the top of the widget, so it matches your site’s theme and helps guide visitors:

Filters

In this section, you can set up filters so visitors can search events by Date, Event Type, Venue, or Host, and choose to sort your events manually or alphabetically:

Note: These filters will only appear in the widget if you've added them on the Events tab. Learn how to create filters for your events in this guide: Event Types, Venues, and Hosts.

Pro Tip: Display the same calendar across your site with certain filters pre-selected by adding a special attribute to the installation code. Find out more in this guide: How to make certain Event Calendar filter selected by default.

Event Elements

Here you can control which parts of events to display, helping highlight the details that matter most:

Past Events

With this setting, you can choose whether to show past events or keep your calendar focused only on upcoming ones:


Now that you've customized the layout of your Event Calendar, you’re one step closer to creating a beautifully integrated and functional event display on your website! In the next step, we will explore how to style the calendar to match your brand’s aesthetic. ✨

Next step: Step 3: Adjust Style & Advanced Settings
Did this article answer your question? Share your feedback: Thanks for sharing your feedback. It helps us grow! There was a problem submitting your feedback. Please try again later.

Still looking for assistance? Contact Us Contact Us