---
title: Adding a calendar with the Elementor widget
url: "https://www.gravitykit.com/docs/gravitycalendar/elementor-widget/"
updated: "2026-09-04"
category: GravityCalendar
---

# Adding a calendar with the Elementor widget

GravityCalendar includes an Elementor widget, so you can place a calendar on a page without pasting a shortcode. The calendar renders in the Elementor editor as you build the page.

You will need Elementor active, and at least one calendar already created. If you have not created one yet, start with [Getting Started with GravityCalendar](https://www.gravitykit.com/docs/gravitycalendar/creating-a-calendar/).

## Adding the widget

Edit a page with Elementor, then search for **Calendar** in the Elements panel. Drag the **GravityCalendar** widget onto the page.

![The Elementor Elements panel with Calendar typed into the widget search box, showing the GravityCalendar widget below it.](https://www.gravitykit.com/wp-content/uploads/2026/09/panel.png)

Until you choose a calendar, the widget shows a placeholder.

![A newly dropped GravityCalendar widget on the Elementor canvas, showing a calendar icon and the text Select a calendar feed in the widget settings.](https://www.gravitykit.com/wp-content/uploads/2026/09/placeholder-canvas.png)

## Choosing a calendar

On the **Content** tab, open the **Calendar Feed** dropdown and pick the calendar you want to show. Calendars are grouped by the form they belong to, so the greyed-out name above each group is the form, not a calendar you can select.

![The widget Content tab with the Calendar Feed dropdown open, listing calendars grouped under their form name.](https://www.gravitykit.com/wp-content/uploads/2026/09/feed-dropdown.png)

The calendar replaces the placeholder as soon as you choose one, and updates whenever you switch calendars.

## Setting the height

On the **Style** tab, use **Height** to size this calendar. It accepts pixels, percentages and viewport units.

![The widget Style tab showing a Height slider set to 500 px, with help text explaining it applies to this calendar only.](https://www.gravitykit.com/wp-content/uploads/2026/09/height.png)

The height applies to this widget only, so the same calendar can be short in one place and tall in another without creating a second calendar. Leave it empty to use the height set on the calendar itself.

The calendar in the Elementor editor can look slightly different from the published page, because the editor canvas is narrower than your theme’s content area. The published page is the accurate one.

## Secured calendars

If the calendar has **Enable security** turned on, the widget handles it for you — there is no secret to copy or paste. The widget stores only which calendar you picked, and the secret is worked out each time the page is displayed. See [About the `secret` shortcode attribute](https://www.gravitykit.com/docs/general-help/secret-shortcode-attribute/).

## Other ways to display a calendar

- [Displaying a calendar](https://www.gravitykit.com/docs/gravitycalendar/displaying-a-calendar/) — every method, including the block, shortcode and widget areas
- [Calendar Blocks](https://www.gravitykit.com/docs/gravitycalendar/calendar-blocks/) — the WordPress block editor equivalents
- [Calendar Shortcodes](https://www.gravitykit.com/docs/gravitycalendar/calendar-shortcodes/) — for placing a calendar anywhere shortcodes run