Calendar

Usage

The calendar is the landing page of Vonheim. It shows a month at a glance; each day cell shows what is actually happening that day — bookings with times and titles, full-day reservations as burgundy fills, or a quiet "Ledig" for free days. Clicking any day navigates to a day-view page for that date.

Anatomy

• #cal-nav — prev / title / next row above the grid.
• .cal-header — weekday labels (Man, Tir, … Søn).
• .cal-body — 7-column grid of days.
• .cal-day — a single day cell.
• .cal-num — day number, big serif top-left.
• .cal-num-month — inline month label (e.g. "apr", "mai") or "I dag" for today.
• .cal-list — booking list inside a day cell.
• .cal-item — a single meeting row (time + title).
• .cal-fullday-title — title for a full-day booking.
• .cal-free — "Ledig" label for free days.
• .cal-more — overflow link (+N mer).

Month view

Each day cell shows what is actually happening that day instead of a generic status fill. Day number as a large serif numeral, bookings underneath as tiny sans rows with a tabular-nums time column. Full-day bookings replace the meeting list entirely — the cell gets a muted burgundy fill and a sans title in surface-white. Backgrounds stay neutral; the content is the signal.

Rows are fixed at 8rem so every week is the same height. Cells cap at 2 visible meetings — anything more collapses to a +N mer link. Today is marked with I dag replacing the month label inline after the day number, both turning umber. Past days dim to 50% opacity.

Legend

• Today — I dag replaces the month label inline after the day number. Number and label turn umber. No background fill.
• Full-day booking — entire cell is crimson with the title in small sans on surface-white. Visible from across the grid.
• Meeting day — up to 2 meetings, each a two-line block: uppercase tracked time above, title below. Overflow collapses to +N mer.
• Free day — Ledig label in muted italic sans.
• Past day — content dims to 50% opacity. First-of-month label (27 apr) carried on each cell.

Notes

• Every cell is a link. The calendar is navigation; clicking any day cell navigates to a day-view page for that date.
• Day view shows all bookings with full details plus a "Ny reservasjon" button.
• From day view, click a booking to go to the booking detail page.
• From day view, click "Ny reservasjon" to open the booking form with the date prefilled.
• Backgrounds stay neutral — the content (times, titles, burgundy fills) is the signal. No status-colored background fills on regular days.
• On narrow viewports (< 640px), the weekday header hides and cells switch to a single-column list layout with the day number on the left and bookings on the right.