Keep the civil date separate from its grid cell.

A date such as 2027-06-01 is a stable civil value. Its displayed cell index is derived from the month’s leading offset and the day number. Changing the week origin changes that index and the visible weekday column; it does not change the date. This separation matters for selection, links, exports and accessible reading order.

For semantic HTML, use weekday column headers with full names and place each date in a real table cell. A date label can carry a machine-readable value such as <time datetime="2027-06-01">1</time>. Leading and trailing blanks do not represent dates, so keep them out of the reading order. If a fixed six-row grid shows adjacent-month dates, expose their full month context; color alone cannot explain why a date is dimmed.

An SVG calendar is still an image. Give it alternative text that names the month and year, and provide a structured date table or data export when people need to navigate every date. Let the visual grid and accessible representation derive from the same civil-date data, never from CSS position.

Blank-grid reference: https://www.betacalendars.com/blank-calendar

June example: https://www.betacalendars.com/june-calendar.html

Project: https://www.betacalendars.com/

Leap days are a civil-date rule, not a special layout exception.

In the Gregorian calendar, a year is leap when it is divisible by 4, except century years unless they are also divisible by 400. That makes 1900 a common year and 2000 a leap year. February 2000 has 29 dates, so the leap rule must run before weekday offsets and row counts are calculated.

The 400-year cycle gives a useful regression invariant: 400 Gregorian years contain 146,097 days, exactly 20,871 weeks. Weekday/date patterns therefore repeat across the full cycle. A single leap-year check cannot prove the full cycle; century boundaries matter.

For a calendar engine, test the edges explicitly: 1899–1901 and 1999–2001. Confirm February’s date count, the weekday of March 1, and that each day appears once in the grid. Keep leap-year logic separate from weekday arithmetic and cell placement so a failed assertion points to the right layer.

February 2000 example: https://www.betacalendars.com/february-calendar.html

Calendar project: https://www.betacalendars.com/

Print height is a budget

A calendar grid competes for a fixed page area. If the date grid gets 240 mm after margins and headings, four natural week rows average 60 mm each, five average 48 mm, and six average 40 mm. In this example, a six-row month gives each row one-third less vertical room than a four-row month.

The diagram holds the grid area constant and compares February, January and August 2027 in Monday-first layouts: 4, 5 and 6 rows. The values are averages, not a requirement that every cell be identical. A design may weight rows differently, but dates, writing space and labels still need to remain usable.

A fixed six-row frame keeps month cards aligned, while a natural-height grid preserves room in shorter months. Choose based on the job: comparison dashboards often value alignment; printable planners often value handwriting space.

For print QA, define paper size, orientation and margins first. Then set a minimum cell height, print the longest month, and check that dates and writing lines remain legible. Remove decoration before shrinking essential content.

Blank-grid reference: https://www.betacalendars.com/blank-calendar

Six-row example: https://www.betacalendars.com/august-calendar.html

Project: https://www.betacalendars.com/

Seven week starts, the same month

A calendar’s week origin is a layout rule. It decides which weekday sits in the first column; it does not change the civil dates.

February 2027 starts on Monday and has 28 days. With Monday first, its natural grid has four rows. Shift the origin to Tuesday and the 1st moves to the last column of that first row, so the grid needs five. Sunday first also needs five.

For weekStart w and weekday index d of the first date:

offset = (d - w + 7) mod 7

natural rows = ceil((offset + daysInMonth) / 7)

The visual rotates weekday labels with the origin. Keeping labels fixed while shifting dates silently mislabels weekdays. Weekend shading must rotate too. A stable six-row view is a separate design choice: it helps compare months, but it is not the natural month height.

When building a calendar, store civil dates as dates, derive the first weekday, and render columns relative to the selected origin. Then check month edges, leap years, responsive width and print cell height.

Blank-grid reference: https://www.betacalendars.com/blank-calendar

February 2027 example: https://www.betacalendars.com/february-calendar.html

Project: https://www.betacalendars.com/

Why a Calendar Grid Is Not Always Five Rows

A month has a fixed number of dates, but its calendar grid does not have a fixed number of rows. The shape depends on the weekday of the first date and the month length.

For a Monday-first calendar, let o be the first date’s offset from Monday and D the number of days. Natural rows = ceil((o + D) / 7). In 2027:

• February: Monday start, 28 days → 4 rows.

• January: Friday start, 31 days → 5 rows.

• August: Sunday start, 31 days → 6 rows.

Week origin changes the shape too. February 2027 uses four rows Monday-first and five rows Sunday-first. The month stays the same; the dates occupy different columns.

Natural rows show only the weeks needed for that month. A fixed 42-cell grid always reserves six rows, keeping dashboards aligned and comparisons predictable. It may also show more adjacent-month dates or blank positions. Neither model is universally better: choose based on whether compactness or a stable frame matters more.

On small screens, preserve seven equal weekday columns and readable labels; do not drop to five columns to make the calendar fit. Check the same grid in print: a sixth row can reduce the writing area in every cell. Treat adjacent-month dates as dates, not decoration, so their visual and accessible labels stay consistent.

The visual shows February’s four-row case. In the Civil Grid Engine, change the month, week origin, and row mode to compare shapes.

Project: https://www.betacalendars.com/

Blank-grid reference: https://www.betacalendars.com/blank-calendar

February 2027: https://www.betacalendars.com/february-calendar.html

August 2027: https://www.betacalendars.com/august-calendar.html