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 —
60vhis 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
heightattribute:[gravitycalendar id="12" height="400px"]. See Calendar Shortcodes. - GravityCalendar block — the Height field under Calendar Size in the block settings. See 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.
