---
title: Setting the height of a calendar
url: "https://www.gravitykit.com/docs/gravitycalendar/calendar-height/"
updated: "2026-09-04"
category: GravityCalendar
---

# Setting the height of a calendar

By default a calendar sizes itself to its content, growing taller in months with more events. You can give it a fixed height instead, either for the calendar as a whole or for one place you have embedded it.

## Setting the height for a calendar

Open the calendar’s settings in Gravity Forms, then under **Calendar Size** change **Sizing** from Auto to **Fixed**. A **Height** field appears; the value you enter applies everywhere that calendar is shown.

## What the Height field accepts

The height covers the whole calendar, including its header and footer — not just the grid of days.

- **A length in pixels** — `400px`. The most predictable choice.
- **A percentage** — `100%`. Measured against whatever the calendar sits inside, so it only does something useful when that container has a height of its own.
- **A share of the screen** — `60vh` is 60% of the browser window’s height. Useful for filling the screen on any device.
- `auto` — back to sizing itself to its content.

A fixed height shorter than the month needs will scroll inside the calendar rather than cut events off. If a month looks cramped, raise the height or use `auto`.

## Giving one embed a different height

The same calendar often wants to be short in a sidebar and tall on a full-width page. Rather than creating a second calendar, set the height where you embed it. This overrides the calendar’s own height for that one place, and accepts the same values as above.

- **Shortcode** — add a `height` attribute: `[gravitycalendar id="12" height="400px"]`. See [Calendar Shortcodes](https://www.gravitykit.com/docs/gravitycalendar/calendar-shortcodes/).
- **GravityCalendar block** — the **Height** field under Calendar Size in the block settings. See [Calendar Blocks](https://www.gravitykit.com/docs/gravitycalendar/calendar-blocks/).
- **Elementor widget** — the **Height** control on the Style tab.

Leave the height empty in any of those places to use the height set on the calendar itself.