PhiaUi.Components.GanttChart (phia_ui v0.1.17)

Copy Markdown View Source

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>

Summary

Functions

gantt_chart(assigns)

Functions

gantt_chart(assigns)

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.