Show your events in a monthly calendar

Events from a custom post type on this site

Three steps to a working calendar

What the calendar can do

Where it works best

Every control, explained

Good to know

Add Event Calendar to your next page

Create an events post type

Add the element

Publish events

Any post type

Multi-day events

Open in a modal

Global block design

Image and excerpt

Responsive mode

Full translation

First day of week

Design controls

Venues and clubs

Courses and workshops

Community sites

Schools

Holiday lets

Company intranets

DYNAMIC Event calendars for Breakdance

Event Calendar reads posts from any custom post type and places them on a month grid by their date field. Visitors move between months, and each event links to its post or opens in a modal. You control the look of every part, or design the event tiles with a global block.

Get Phox Elements See the live demo

Any custom post type Multi-day events Modal or link to post

Live demo

Each event below is a post with a start and end date field. Use the arrows to change month and click an event to open it in a modal.

October 2026

October 1, 2026

October 2, 2026

October 3, 2026

October 4, 2026

October 5, 2026

October 6, 2026

October 7, 2026

October 8, 2026

October 9, 2026

October 10, 2026

October 11, 2026

October 12, 2026

October 13, 2026

October 14, 2026

October 15, 2026

October 23, 2026

October 30, 2026

How it works

Set up the post type once, then add events like any other post.

Add a custom post type with a start date field, and an end date field if your events can run over several days.

Drop Event Calendar onto a page and enter the post type name and the meta keys of your date fields.

Each published post appears on its date. Multi-day events show on every day they cover, or as one spanning bar.

Features

A full month view that you can style to match your site.

Point it at any custom post type and the date fields stored in its post meta.

Show a tile on each day of the event, or one spanning bar across the days, with a bar colour you can set per event.

Open events in a modal with the image, date and content, plus a button to the full post. Or link straight to the post.

Design the event tile with a Breakdance global block, and make it cover the whole cell if you like.

Show or hide the featured image and excerpt, and set how many words of the excerpt to show.

On small screens the grid becomes a list of days with events, using a date format you choose.

Replace the month names, day names and navigation labels with your own text.

Start the week on any day from Sunday to Saturday.

Style the cells, today's cell, the navigation bars, event tiles, the modal and its button.

Use cases

Anywhere dated posts are easier to understand on a calendar.

Show gigs, matches or meetings for the month at a glance.

Let visitors see upcoming sessions and click through to book.

Publish local events as posts and show them all on one page.

Show term dates, trips and open days from a single post type.

Show multi-day bookings or offers as spanning bars.

List training days, deadlines and team events.

Settings reference

This is the full list of settings in the Breakdance editor, with their default values.

Control	What it does	Default
Content
Post Type Name	The custom post type that holds your events.	event
Date Field Name	Meta key of the start date field.	event_date
Date Field End Name	Meta key of the end date field. Falls back to the start date if empty.	end_date
First Day of Week	Sunday to Saturday.	—
Multi-Day Event Display	Tile on each day, or a spanning bar.	—
Disable Event Links	Show events without linking them.	Off
Open Events in Modal	Open the event in a modal instead of going to the post.	Off
Show Modal Example For Styling	Show the modal in the editor so you can style it.	Off
Responsive Options
Enable Responsive Mode	Switch to a list of days on small screens.	Off
Mobile Date Format	Seven date formats to choose from.	January 1, 2024
No Events Message (Mobile)	Text shown when a month has no events.	—
Modal Text
Event Date Text	Label for the date in the modal.	—
View More Details Button	Text of the button that links to the post.	—
Translate
Month and day names	Your own text for each month and each day of the week.	—
Previous / Next Month	Labels for the month navigation.	—
Design
Container	Width, background colour and padding.	—
Calendar	Border thickness and colour, typography, month/year and day typography, cell, day and today colours, cell min height.	1px, #D6D6D6
Navigation Bar	Borders, background, padding, typography, or hide it.	—
Event Design	Typography, background, padding, borders, alignment, image size, excerpt typography and word count, hide image or excerpt.	Centre, 2px radius
Spanning Bar	Height, colour, text colour and a per-post colour meta key.	100px
Global Block	Use a global block for the event design, and cover the entire cell.	Off
Bottom Navigation	Typography, background, padding, borders, or hide it.	—
Modal	Width, max height, background, borders, title, date and content typography, header, date area and footer colours, blur background.	—
Modal Button	Hide it, background, typography and borders.	—
Modal Image	Hide it, width, height and borders.	—

Tips & FAQ

Which field plugins does it work with?

It reads the dates with get_post_meta, so it works with any plugin that saves the date as normal post meta, such as ACF or Meta Box. Enter the field's meta key in the Date Field Name setting.

What date format should my fields use?

Any format PHP can read as a date, such as 2024-06-21 or 20240621. ACF date pickers store dates in a format that works.

How are events that last several days shown?

Choose Tile on each day to repeat the event in every cell, or Spanning bar to draw one bar across the days. Bars can take their colour from a meta field on each event.

Can I design the event tiles myself?

Yes. Turn on Use Global Block for Event Design and pick a global block. It renders for each event, so you can use dynamic data from the event post.

Does it work on mobile?

Turn on Responsive Mode and small screens get a list of days that have events, with the date format of your choice.

1
Start of month party

2
Yoga Class

4
Start of month party

11
Holiday Start of month party

15

Farmers Market

23

Launch Event

30

Halloween Party

Event Calendar is included with Phox Elements, along with 150+ other premium elements for Breakdance.

Get Phox Elements Back to the demo