# `PhoenixLiveCalendar.Views.MonthGrid`
[🔗](https://github.com/mdon/phoenix_live_calendar/blob/v0.5.0/lib/phoenix_live_calendar/views/month_grid.ex#L1)

Month grid view — the traditional calendar layout with 6 rows of 7 days.

Multi-day events render as full-width bars inside each day cell, occupying
consistent slot positions across all days they span. This creates a visual
continuous line without any absolute positioning — the grid handles sizing
and wrapping naturally.

Day markers (holidays, notices) tint the cell background with a corner label.
A marker's own `color` class becomes the cell background (heatmap-style
views send one marker per day with an intensity class); `text_color`/`class`
style the corner chip; `show_label: false` renders the tint with no chip.
Unset fields fall back to the type-based defaults.

# `month_grid`

Renders a month grid — six rows of seven days.

Multi-day events render as full-width bars that keep a consistent slot row
across every day they span; day markers tint the matching cells.

## Attributes

- `date` — any date within the month to render
- `events` — list of `PhoenixLiveCalendar.Event` structs
- `day_markers` — list of `PhoenixLiveCalendar.DayMarker` structs. A marker's
  `color`/`text_color`/`class`/`show_label` styling fields are honored (see
  `PhoenixLiveCalendar.DayMarker` — "Styling"); unset fields fall back to
  the type-based tints
- `selected_date` / `today` — dates to highlight
- `week_start` — `1` (Monday, default) … `7` (Sunday)
- `max_events` — single-day events shown per cell before a "+N more" link (default `3`)
- `max_multiday` — cap on multi-day bar rows per cell (default: no cap)
- `expand_cells` — grow cells to fit all bars instead of clipping
- `cell_height` — CSS height for day cells, replacing the built-in responsive tiers
- `cell_overflow` — `:clip` (default) or `:visible` to let custom day-cell content overflow
- `respect_hours` — position timed events by the hours they occupy (1h min width) instead of full-day
- `show_week_numbers` / `show_weekends` / `fixed_weeks` — layout toggles
- `on_date_click` / `on_event_click` / `on_more_click` — JS commands or event names
- `id` — optional per-instance prefix for generated DOM ids
- `marker_ticker` / `marker_ticker_interval` — cycle stacked marker chips
- `translations` / `time_format` / `dir` / `class` — presentation

## Attributes

* `date` (`Date`) (required)
* `id` (`:string`) - Optional prefix for generated DOM ids (marker tickers + per-event ids). Set it when two views on one page can render the same events/markers — without it their ids collide. Defaults to `nil`.
* `events` (`:list`) - Defaults to `[]`.
* `day_markers` (`:list`) - Defaults to `[]`.
* `selected_date` (`Date`) - Defaults to `nil`.
* `today` (`:any`) - Date | nil (server today) | :none (no today highlight). Defaults to `nil`.
* `week_start` (`:integer`) - Defaults to `1`.
* `max_events` (`:integer`) - Defaults to `3`.
* `max_multiday` (`:integer`) - Max multi-day bar rows to show per day cell; bars beyond it fold into the day's "+N more" link. `nil` (default) shows every bar (no cap). Defaults to `nil`.
* `expand_cells` (`:boolean`) - When true, day cells grow vertically to fit all their bars (min-height, no clipping) instead of a fixed height that clips overflow. Useful when every event must stay visible (e.g. project bars). Defaults to `false`.
* `cell_height` (`:string`) - CSS height for day cells (e.g. "2.5rem", "40px"), replacing the built-in responsive height tiers — dense custom grids (heatmaps, dashboards) usually pair it with a `:day_cell` slot. Fixed mode applies it as `height`; with `expand_cells` it becomes the `min-height` floor instead. `nil` (default) keeps the built-in tiers; invalid values fall back to them. Only a plain `<number><unit>` is accepted — `calc()`/`var()`/`clamp()` count as invalid — and a custom height is one fixed size (it does not scale with the container tiers the way the built-ins do). Avoid `%`: against the grid's auto-sized rows it resolves to `auto` and the cell collapses. Defaults to `nil`.
* `cell_overflow` (`:atom`) - `:clip` (default) keeps fixed-height cells `overflow-hidden`; `:visible` removes the clip so custom `:day_cell` content (hover tooltips, popovers) can escape the cell — independent of `expand_cells`, which always renders unclipped. `:visible` cells get `hover:z-20 focus-within:z-20` so an escaping tooltip isn't painted over by the sibling cells after it; content shown on other triggers needs its own z-index. With `:visible` and the default cell content, overflowing event chips spill instead of clipping. Inside CalendarComponent this also trades away the view's scroll container (see the component doc) — in a bounded-height panel the grid then overflows the panel instead of scrolling. Defaults to `:clip`. Must be one of `:clip`, or `:visible`.
* `respect_hours` (`:boolean`) - When true, TIMED events cover only the fraction of a day they actually occupy: a single-day event becomes a bar offset by its start-time and sized to its duration, while a multi-day bar's boundary days trim to their start/end hours (middle days stay full). Very short events are floored to a 1-hour width so they stay visible. All-day events always cover full days (no hours). Off by default — bars span whole cells edge to edge and single-day events render as chips. Defaults to `false`.
* `show_week_numbers` (`:boolean`) - Defaults to `false`.
* `show_weekends` (`:boolean`) - Defaults to `true`.
* `fixed_weeks` (`:boolean`) - Defaults to `true`.
* `on_date_click` (`:any`) - Defaults to `nil`.
* `on_event_click` (`:any`) - Defaults to `nil`.
* `on_more_click` (`:any`) - Defaults to `nil`.
* `translations` (`:map`) - Defaults to `%{}`.
* `time_format` (`:atom`) - Defaults to `:h24`.
* `marker_ticker` (`:boolean`) - Defaults to `true`.
* `marker_ticker_interval` (`:integer`) - Defaults to `3000`.
* `class` (`:string`) - Defaults to `""`.
* `dir` (`:atom`) - Defaults to `:ltr`.
## Slots

* `day_cell`
* `event`

---

*Consult [api-reference.md](api-reference.md) for complete listing*