PhoenixLiveCalendar.Components.EventItem (PhoenixLiveCalendar v0.3.0)

Copy Markdown View Source

Renders a single event within a calendar cell or time grid.

Supports status-based styling (confirmed, tentative, cancelled, pending approval), urgency indicators (attention, warning, critical with animated borders), priority visual weight, and custom rendering via slots.

Summary

Functions

Renders an event element with status-aware styling.

Per-view-instance suffix for event DOM ids: two views rendering the same events on one page pass their own id so per-event ids can't collide.

The content tier for an event block of an estimated height (rem): :detail ≥ 3.25, :inline ≥ 1.75, :title ≥ 1.25, else :none — whole text lines or none.

Functions

event_item(assigns)

Renders an event element with status-aware styling.

Attributes

  • event — A PhoenixLiveCalendar.Event struct
  • on_click — Event handler when the event is clicked
  • compact — Render in compact mode (title only, no time)
  • content — how much to render: :detail / :inline (default) / :title / :none — the time grids pick a tier from the block's estimated height (tier_for_height/1)
  • default_color — background when the event has no color of its own
  • id_suffix — disambiguates the DOM id when the same event renders more than once on a page (per-date / per-resource / per-view-instance)
  • class — Additional CSS classes
  • time_format:h24 or :h12 (default: :h24)

Status styling

  • :confirmed — solid background (default)
  • :tentative — dashed border, reduced opacity
  • :cancelled — strikethrough text, ghost styling
  • :pending_approval — pulsing border animation
  • :no_show — red-tinted, strikethrough

Urgency indicators

  • :none — no special indicator (default)
  • :attention — subtle pulsing border
  • :warning — yellow/amber animated border
  • :critical — red animated border, more prominent

Slots

  • inner_block — Custom event rendering. Receives the event as a slot argument.

Attributes

  • event (PhoenixLiveCalendar.Event) (required)

  • on_click (:any) - Defaults to nil.

  • compact (:boolean) - Defaults to false.

  • content (:atom) - How much of the event to render, chosen by the caller (the time grids compute it from the block's estimated height so text never clips mid-glyph): :detail = stacked title / start–end range / location; :inline = one line of time + title (the classic layout); :title = title only; :none = colored block only — the native title tooltip and aria-label still identify it.

    Defaults to :inline. Must be one of :detail, :inline, :title, or :none.

  • class (:string) - Defaults to "".

  • time_format (:atom) - Defaults to :h24.

  • default_color (:string) - Background applied when the event has no color of its own, so a color-less event is always legible (previously it rendered with NO background while infer_text_color(nil) assumed a primary one — white text on the naked cell). The event's own color always wins.

    Defaults to "bg-primary".

  • id_suffix (:any) - Disambiguates the DOM id when the SAME event renders more than once in one view — a midnight-crossing timed event occupies two month/week day cells, and a multi-resource event renders once per resource column. Callers rendering events inside a per-date/per-resource loop pass the loop key here; without it LiveView reports duplicate DOM ids and morphdom patching misbehaves.

    Defaults to nil.

Slots

  • inner_block

instance_suffix(id, key)

@spec instance_suffix(String.t() | nil, String.t() | term()) :: String.t() | term()

Per-view-instance suffix for event DOM ids: two views rendering the same events on one page pass their own id so per-event ids can't collide.

tier_for_height(h_rem)

@spec tier_for_height(number()) :: :detail | :inline | :title | :none

The content tier for an event block of an estimated height (rem): :detail ≥ 3.25, :inline ≥ 1.75, :title ≥ 1.25, else :none — whole text lines or none.