Calendars

Month-view grid that takes a flat list of events keyed by date.

Preview

M on
T ue
W ed
T hu
F ri
S at
S un

React preview

LiveView (HEEx) 

alias DesignSystem.UI.Calendars

<Calendars.month_calendar
  month={~D[2022-01-15]}
  today={~D[2022-01-12]}
  selected={~D[2022-01-22]}
  events={[
    %{date: ~D[2022-01-03], name: "Design review", time: "10AM", href: "#"},
    %{date: ~D[2022-01-22], name: "Hockey game", time: "7PM", href: "#"}
  ]}
>
  <:actions>
    <Buttons.button variant="secondary" size="sm" phx-click="prev_month">
      Prev
    </Buttons.button>
    <Buttons.button variant="primary" size="sm" phx-click="add_event">
      Add event
    </Buttons.button>
  </:actions>
</Calendars.month_calendar>

React (JSX) 

import { Calendar } from "../ui/index.mjs"

<Calendar
  month="2022-01-15"
  today="2022-01-12"
  selected="2022-01-22"
  events={[
    { date: "2022-01-03", name: "Design review", time: "10AM", href: "#" },
    { date: "2022-01-22", name: "Hockey game", time: "7PM", href: "#" },
  ]}
  actions={
    <>
      <button onClick={onPrev}>Prev</button>
      <button onClick={onAddEvent}>Add event</button>
    </>
  }
/>