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

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" => "..."}`

# `big_calendar`

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.

---

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