WP Manifestindependent plugin directory
manifest / builders / elementor-events-calendar

Elementor Events Calendar

Monthly events calendar widget for WordPress + Elementor Pro + ACF Pro

by Ludovic Verbeeck · github.com/djaysan/elementor-events-calendar · website

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/djaysan/elementor-events-calendar/archive/refs/heads/main.zip
Readme github.com/djaysan/elementor-events-calendar ↗

A monthly events calendar widget for WordPress + Elementor Pro + ACF Pro. Configurable for any custom post type and ACF field setup.

Features

  • Monthly grid calendar with AJAX month switching (no page reload)
  • Hover popups on desktop with configurable fields
  • Mobile dot grid: tap a day to scroll to the event in the list below
  • Month picker with dots indicating months that have events
  • Auto-advances to the next upcoming event month when the current month is empty
  • Multi-day event spanning across cells
  • Status badge support (cancelled, postponed, sold out, or any custom value)
  • Styling controls in the Elementor panel (primary color, text color, backgrounds, font sizes, popup width)

Requirements

  • WordPress 6.0+
  • Elementor Pro 3.x+
  • Advanced Custom Fields Pro 5.x+

Installation

  1. Download or clone this repository.
  2. Upload the elementor-events-calendar folder to /wp-content/plugins/.
  3. Activate the plugin in Plugins → Installed Plugins.

ACF field setup

Create the following ACF fields on your event post type. Field names shown are defaults; you can use any names and configure them in the widget.

Field Type Return Format Notes
event_start_date Date Picker Ymd Required. Must store as Ymd (e.g. 20260720).
event_end_date Date Picker Ymd Required. Same format. Set identical to start for single-day events.
event_start_time Time Picker or Text any Optional. Shown in calendar cells and popup.
event_end_time Time Picker or Text any Optional. Shown in popup.
event_status Select or Text any Optional. Value rendered as a status badge.

Any additional fields (venue, access type, ticket link, etc.) can be added to the Popup Fields repeater in the widget panel.

Calendar widget setup

  1. Drag the Events Calendar widget onto your page in Elementor.
  2. In the Data Source section, set:
    • Post Type Slug: your event CPT slug (e.g. afa_event)
    • Start Date Field, End Date Field, Start Time Field, End Time Field: your ACF field names
    • Status Field Name: optional, for status badges
    • Loop Container ID: optional, see Loop widget setup below
  3. In Popup Fields, click Add Item for each extra field to show in the hover popup. Set the label, ACF field name, and display type (Text / Badge / Link).
  4. Use the Style tab to set your primary color, text color, backgrounds, font sizes, and popup width.

Loop widget setup

If you want the event list (Loop Widget) to filter by selected month:

  1. Add an Elementor Loop Widget to the same page as the Calendar Widget.
  2. In the Loop Widget's Query settings, set Query ID to eec_event_loop.
  3. In Elementor's Advanced tab on the Loop Widget, set a CSS ID (e.g. eec-event-list).
  4. Back in the Calendar Widget's Data Source section, set Loop Container ID to that same CSS ID.

The calendar will now sync the event list when you switch months.

Event card widget (for mobile scroll-to)

For the mobile tap-to-scroll behaviour to work, add the Event Anchor widget to your Loop card template:

  1. Open your Loop card template in Elementor.
  2. Drag the Event Anchor widget anywhere inside the card. It is invisible on the front end.
  3. Save the template.

When a mobile user taps a day with events, the page scrolls to that event's card in the list.

Multiple calendars

Each Calendar Widget instance is fully independent. To use two calendars on the same page with separate lists, give each Loop Widget a different CSS ID and set a different Loop Container ID value in each Calendar Widget.

Styling

Use the Style tab in the Calendar Widget for color, font size, and popup width. For further overrides, use Elementor's Custom CSS field on the widget (scoped to the widget wrapper automatically).

License

GPL-2.0+

Support

If this saved you time, you can support my work:

Buy Me a Coffee at ko-fi.com