# `PhiaUi.Components.GanttChart`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/data/gantt_chart.ex#L1)

Week-view calendar (Google Calendar style) with hourly time slots.

Renders a 7-column grid (Mon–Sun) with time rows and absolutely-positioned
event blocks. Events are placed by start/end time using CSS `top`/`height`
percentages computed server-side.

Zero JavaScript — pure HTML + inline style positioning.

## Examples

    <.gantt_chart week_start={@week_start}>
      <:event
        day={~D[2026-03-09]}
        start_time="10:00"
        end_time="11:30"
        label="Team Meeting"
        color="bg-blue-500"
      />
      <:event
        day={~D[2026-03-11]}
        start_time="14:00"
        end_time="15:00"
        label="Design Review"
        color="bg-purple-500"
      />
    </.gantt_chart>

# `gantt_chart`

## Attributes

* `week_start` (`:any`) (required) - The `Date` for Monday of the displayed week.
* `start_hour` (`:integer`) - First visible hour (0–23). Default: `8` (8am). Defaults to `8`.
* `end_hour` (`:integer`) - Last visible hour, exclusive (0–23). Default: `20` (8pm). Defaults to `20`.
* `id` (`:string`) - Unique ID for the chart (auto-generated if not provided). Defaults to `nil`.
* `title` (`:string`) - Chart title rendered above the visualization. Defaults to `nil`.
* `description` (`:string`) - Chart description for context (rendered below title). Defaults to `nil`.
* `class` (`:string`) - Additional CSS classes for the root element. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root `<div>` element.
## Slots

* `event` - An event block to render on the calendar. Accepts attributes:

  * `day` (`:any`) (required) - `Date` of the event.
  * `start_time` (`:string`) (required) - Start time as `"HH:MM"`.
  * `end_time` (`:string`) (required) - End time as `"HH:MM"`.
  * `label` (`:string`) - Event title text.
  * `color` (`:string`) - Tailwind bg class (e.g. `"bg-blue-500"`). Default: `bg-blue-500`.

---

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