PhiaUi.Components.BigCalendar (phia_ui v0.1.17)

Copy Markdown View Source

Full-page monthly calendar with colored event pills and a view switcher.

Renders a Google Calendar-style month view:

  • MON-first 7-column grid
  • Days from adjacent months shown (muted)
  • Today's cell highlighted with a primary-color ring
  • Events as full-width colored pills: "HH:MM (label)"
  • View switcher: Month / Week / Day / List (Week/Day/List stub — Month implemented)

Event format

events = [
  %{date: ~D[2024-09-08], time: "9:00", label: "2 hours", color: "green"},
  %{date: ~D[2024-09-11], time: "13:00", label: "info here", color: "orange"},
  %{date: ~D[2024-09-11], time: "13:00", label: "info here", color: "orange"},
]

Example

<.big_calendar
  year={@year}
  month={@month}
  view={@view}
  events={@events}
  on_navigate="cal-nav"
  on_view_change="cal-view"
  on_day_click="cal-day"
  on_event_click="cal-event"
/>

LiveView event handlers

  • on_navigate receives %{"direction" => "prev"|"next", "month" => m, "year" => y}
  • on_view_change receives %{"view" => "month"|"week"|"day"|"list"}
  • on_day_click receives %{"date" => "YYYY-MM-DD"}
  • on_event_click receives %{"date" => "YYYY-MM-DD", "time" => "HH:MM", "label" => "..."}

Summary

Functions

big_calendar(assigns)

Renders a full-page monthly calendar with colored event pills.

Functions

big_calendar(assigns)

Renders a full-page monthly calendar with colored event pills.

Example

<.big_calendar
  year={2024}
  month={9}
  events={[%{date: ~D[2024-09-08], time: "9:00", label: "2 hours", color: "green"}]}
  on_navigate="cal-nav"
  on_view_change="cal-view"
  on_day_click="cal-day"
  on_event_click="cal-event"
/>

Attributes

  • year (:integer) - Calendar year. Defaults to the current year. Defaults to nil.
  • month (:integer) - Calendar month (1–12). Defaults to the current month. Defaults to nil.

  • view (:string) - Active view. One of: month | week | day | list. Defaults to "month". Must be one of "month", "week", "day", or "list".

  • events (:list) - List of event maps. Each map must have :date (Date.t()), :time (string). Optional :label (string) and :color ("green"|"orange"|"blue"|"red"|"purple"|"gray"). Defaults to [].
  • on_navigate (:string) - LiveView event name fired by prev/next buttons. Receives direction, month and year values. Defaults to nil.
  • on_view_change (:string) - LiveView event name fired when a view button is clicked. Receives the view value. Defaults to nil.
  • on_day_click (:string) - LiveView event name fired when a day cell is clicked. Receives phx-value-date (ISO 8601). Defaults to nil.
  • on_event_click (:string) - LiveView event name fired when an event pill is clicked. Receives date, time and label values. 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.