Getting Started with GravityCalendar

GravityCalendar displays your Gravity Forms entries in a calendar format. If you are collecting dates through a form (event registrations, project deadlines, staff schedules, class signups), GravityCalendar lets you visualize that data on an interactive calendar your visitors can browse.

Video walkthrough #

How GravityCalendar works #

GravityCalendar connects to your form as a “feed” similar to how notifications or other add-on integrations work. You configure which form fields map to calendar event properties (start date, end date, title, description), and every entry with valid dates automatically appears as an event on the calendar.

Because the calendar reads directly from your form entries rather than storing events separately, changes happen instantly: new entries appear on the calendar, and deleted entries disappear.

Step 1: Create a form with date fields #

Your form needs at least one field that GravityCalendar can map to event dates.

Option A: Use the Event field (recommended)

The Event field bundles start date, end date, times, timezone, and repeat options into a single field, and it is the quickest way to start.

To add it, edit your form and drag Event from Advanced Fields. For configuration details, see Getting started with the Gravity Forms Event field.

Option B: Use separate Date and Time fields

If you have an existing form or need more flexibility, use individual fields:

• Start Date (Date field): Required for every event.
• End Date (Date field): Optional; for multi-day events.
• Start Time (Time field): Optional; without it, events display as all-day.
• End Time (Time field): Optional.

You’ll also need a field for the event title (a Single Line Text field works well).

Step 2: Create a calendar feed #

With your form ready, create a calendar feed by going to Forms in your WordPress admin, hovering over your form, and clicking Settings, then GravityCalendar. Then click Add New.

The Feed Settings screen will open:

Required fields

These settings are required:

• Feed Name: An internal name to identify this feed (not shown to visitors).
• Start Date: Select the Date or Event field that contains when each event begins.
• Event Title: The text displayed on the calendar for each event. You can type static text or use merge tags like {Name (First):1.3} to pull values from form fields.

Optional fields

• End Date: For multi-day events. If left blank, the Start Date is used (creating single-day events).
• Start Time: When the event begins. If left blank, events display as all-day.
• End Time: When the event ends.
• Event Description: Additional text shown when visitors hover over an event or move keyboard focus to it. Supports merge tags. See GravityCalendar event tooltips: what they show and how to change them.
• Event Location: Where the event takes place. Supports merge tags.
• Event URL: Where visitors go when they click an event. Choose from:
  • URL from Form Field: Uses a Website field value.
  • Custom URL: A URL you specify (supports merge tags).
  • Link to Single Entry: Opens a GravityView single entry page.
• Event Color: The background and border color for events on this calendar (9 color options available).

Customizing how the calendar looks

Default Layout sets the default view visitors see when the calendar loads:

• Grid: Monthly view showing days in a traditional calendar grid (default).
• Agenda: Weekly view with a time axis showing when events occur during each day.
• List: A chronological list of upcoming events.

Calendar Controls are the navigation elements visitors use to browse the calendar (buttons for previous/next month, a “today” button, the current month/year label, etc.). You can drag and drop these controls into six different positions around the calendar: top-left, top-center, top-right, bottom-left, bottom-center, and bottom-right.

Localization sets the calendar’s language, separately from the site’s: the toolbar buttons and their tooltips, the dates, and labels such as “all-day,” “+N more,” and “No events to display.” When you pick a language other than the site’s and save the calendar’s settings, GravityCalendar downloads its translation for that language.

To change any of this text, such as “all-day” or “+3 more,” edit GravityCalendar’s translation for the calendar’s language with a translation plugin such as Loco Translate. An English translation rewords the text on an English calendar.

Allow Event Editing lets logged-in users reschedule events by dragging them to a different date or time on the calendar. When a user drags an event, the underlying form entry is updated with the new date values. If the feed has no End Date field, an event can’t be stretched across more than one day; the calendar puts it back where it was. You can restrict this feature to specific user roles.

Sizing controls the calendar’s height. Choose Auto to fit the content, or Fixed and enter a height.

Conditional Logic lets you show or hide events based on form field values. This works like Gravity Forms conditional logic: you set rules (e.g., “show event if Status field equals Confirmed”) and only matching entries appear on the calendar.

As you configure these options, changes appear immediately in the preview window below:

Additional options

• Allow HTML Content: Renders HTML tags in event titles and descriptions instead of displaying them as plain text. Enable this if your merge tags contain HTML formatting.
• Dynamically Load Events: Loads events via AJAX as visitors navigate the calendar instead of loading all events upfront. Use it for calendars with many events.
• Create a Calendar Subscription Link: Check Enable calendar subscription link to get a link that people can use to subscribe to your calendar in Google Calendar, Apple Calendar, or other calendar apps.

Click Save Settings. You will see your calendar listed in the feeds table with its shortcode:

Step 3: Add entries to your form #

Your calendar shows form entries, so add some before events appear: embed the form on a page and submit it, or import entries from a CSV file with GravityImport.

Step 4: Display your calendar #

Embed your calendar using any of these methods:

• Gutenberg block: Add the GravityCalendar block to any page.
• Shortcode: Use [gravitycalendar id="X"] (find the ID in your feed settings).
• Widget: Add to any sidebar or widget area in your theme.
• GravityView widget: Embed inside a View.

For step-by-step instructions, see Displaying a calendar.

Next steps #

• Customize event colors
• Link events to a detail page
• Enable calendar subscriptions (Google Calendar, Apple Calendar)
• Developer hooks for advanced customization