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

Week time grid view — 7 day columns with a vertical time axis.

Also used as the base for day view (1 column) and N-day view (N columns).

# `week_grid`

Renders a week/day/N-day time grid.

## Attributes

- `dates` — List of dates to display as columns
- `id` — optional per-instance prefix for event DOM ids
- `events` — List of `PhoenixLiveCalendar.Event` structs
- `selected_date` — Currently selected date (tints its column)
- `today` — Today's date
- `now` — wall-clock time for the now indicator (default `Time.utc_now()`)
- `min_time` — Earliest visible time (default: `~T[00:00:00]`)
- `max_time` — Latest visible time (default: `~T[23:59:59]`)
- `slot_duration` — Slot duration in minutes (default: 30)
- `slot_height` — CSS height per slot (default: "3rem")
- `show_now_indicator` — Show current time line (default: true)
- `show_all_day_row` — Show all-day event row (default: true)
- `day_markers` — `PhoenixLiveCalendar.DayMarker` structs: label chips
  under the day headers, column background tints (custom marker colors
  win over the type tints and the today tint)
- `event_content` — `:auto` (default) picks per event block from its
  estimated height: `:detail` (title / start–end / location) ≥ 3.25rem,
  `:inline` (time + title) ≥ 1.75rem, `:title` ≥ 1.25rem, `:none` below
  (color only + tooltip — text never clips mid-glyph). Pass a specific
  tier to force it for every event
- `min_event_height` — CSS floor for a block's rendered height (default
  `"1.25rem"`, one text line; `"0"` disables) — replaces the old 1.5%
  floor, which changed size with the visible window
- `business_hours` — List of `PhoenixLiveCalendar.Availability` for highlighting
- `on_date_click` — Handler for date header clicks
- `on_time_click` — Handler for time slot clicks
- `on_event_click` — Handler for event clicks
- `translations` — Translation overrides
- `time_format` — `:h24` or `:h12` (default: `:h24`)
- `class` — Additional CSS classes
- `dir` — Text direction (default: `:ltr`)

## Slots

- `event` — Custom event rendering
- `time_label` — Custom time gutter label

## Attributes

* `dates` (`:list`) (required)
* `id` (`:string`) - Optional prefix for generated event DOM ids. Set it when two views on one page can render the SAME events — without it their per-event ids collide. Defaults to `nil`.
* `events` (`:list`) - Defaults to `[]`.
* `selected_date` (`Date`) - Defaults to `nil`.
* `today` (`:any`) - Date | nil (server today) | :none (no today highlight). Defaults to `nil`.
* `min_time` (`Time`) - Defaults to `~T[00:00:00]`.
* `max_time` (`Time`) - Defaults to `~T[23:59:59]`.
* `slot_duration` (`:integer`) - Defaults to `30`.
* `slot_height` (`:string`) - Defaults to `"3rem"`.
* `show_now_indicator` (`:boolean`) - Defaults to `true`.
* `show_all_day_row` (`:boolean`) - Defaults to `true`.
* `now` (`Time`) - Current wall-clock time for the now indicator (default: `Time.utc_now()`). Pass the viewer's local time when your events/`today` are in the viewer's frame. Defaults to `nil`.
* `business_hours` (`:list`) - Defaults to `[]`.
* `day_markers` (`:list`) - Defaults to `[]`.
* `event_content` (`:atom`) - Defaults to `:auto`. Must be one of `:auto`, `:detail`, `:inline`, `:title`, or `:none`.
* `min_event_height` (`:string`) - Defaults to `"1.25rem"`.
* `on_date_click` (`:any`) - Defaults to `nil`.
* `on_time_click` (`:any`) - Defaults to `nil`.
* `on_event_click` (`:any`) - Defaults to `nil`.
* `translations` (`:map`) - Defaults to `%{}`.
* `time_format` (`:atom`) - Defaults to `:h24`.
* `class` (`:string`) - Defaults to `""`.
* `dir` (`:atom`) - Defaults to `:ltr`.
## Slots

* `event`
* `time_label`

---

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