Calendar

<.calendar name="date" />

<.calendar
  name="appointment"
  label="Appointment date"
  sublabel="Required"
  description="Pick the day you would like to come in."
  help_text="We will email a reminder the morning of."
/>

<.calendar name="preselected_date" value={Date.utc_today()} />

<.calendar name="dates[]" multiple />

<.calendar_range
  start_name="check_in"
  end_name="check_out"
  start_value={Date.utc_today()}
  end_value={Date.add(Date.utc_today(), 5)}
/>

<.calendar
  name="deadline"
  min={Date.utc_today()}
  max={Date.add(Date.utc_today(), 30)}
/>

<.calendar
  name="visit"
  disabled_dates={[
    :weekends,
    Date.add(Date.utc_today(), 3),
    {:month_day, 12, 25}
  ]}
/>

<.calendar
  name="required_date"
  value={Date.utc_today()}
  allow_deselect={false}
/>

<.calendar name="month" granularity="month" />

<.calendar name="year" granularity="year" />

<.calendar name="extended_nav_date" navigation="extended" />

<.calendar name="select_nav_date" navigation="select" />

<.calendar name="fecha" locale="es" week_start={1} />

<.calendar
  name="static_appointment"
  label="Confirmed appointment"
  description="See you on the highlighted date."
  value={Date.utc_today()}
  static
/>

<.form :let={f} for={@form} phx-change="validate">
  <.calendar
    field={f[:date]}
    label="Appointment"
    min={Date.utc_today()}
  />
</.form>

def handle_event("validate", %{"data" => _params}, socket) do
  # Re-run validation and reassign the form
  {:noreply, socket}
end

<.calendar name="appointment" value={@value} />

<.button phx-click={JS.push("set_today")}>Set today</.button>
<.button phx-click={JS.push("shift", value: %{days: 7})}>+7 days</.button>

def handle_event("set_today", _, socket) do
  {:noreply, assign(socket, :value, Date.utc_today())}
end

def handle_event("shift", %{"days" => days}, socket) do
  {:noreply, update(socket, :value, &Date.add(&1, days))}
end

<.button phx-click={JS.push("set_window", value: %{window: "week"})}>Next 7 days</.button>
<.button phx-click={JS.push("set_window", value: %{window: "month"})}>Next 30 days</.button>

<.calendar name="date" min={@min} max={@max} />

def handle_event("set_window", %{"window" => _window}, socket) do
  # Compute the new min/max for the chosen window and reassign
  {:noreply, socket}
end

<div
  id={@id}
  phx-hook="CalendarNavigate"
  data-marker-dates={Enum.join(@events, ",")}
  class={[
    "relative max-w-sm",
    "**:data-has-marker:relative",
    "**:data-has-marker:after:content-['']",
    "**:data-has-marker:after:absolute",
    "**:data-has-marker:after:bottom-1",
    "**:data-has-marker:after:left-1/2",
    "**:data-has-marker:after:size-1",
    "**:data-has-marker:after:-translate-x-1/2",
    "**:data-has-marker:after:rounded-full",
    "**:data-has-marker:after:bg-emerald-500",
    "**:data-has-marker:after:pointer-events-none"
  ]}
>
  <.calendar id={@id <> "-cal"} name="date" />

  <div
    aria-hidden="true"
    class={[
      "absolute inset-0 z-20 flex items-center justify-center rounded-base",
      "bg-overlay/60 backdrop-blur-xs transition-opacity duration-150",
      "opacity-0 pointer-events-none",
      "phx-hook-loading:opacity-100 phx-hook-loading:pointer-events-auto"
    ]}
  >
    <.loading variant="dots-bounce" class="size-6 text-foreground" />
  </div>
</div>

const CalendarNavigate = {
  mounted() {
    this.navigateHandler = (event) => {
      this.pushEventTo(this.el, "calendar_navigate", { date: event.detail.date });
    };
    this.el.addEventListener("fluxon:calendar:navigate", this.navigateHandler);
    this.applyMarkers();
  },
  updated() {
    this.applyMarkers();
  },
  destroyed() {
    this.el.removeEventListener("fluxon:calendar:navigate", this.navigateHandler);
  },
  applyMarkers() {
    const dates = (this.el.dataset.markerDates || "").split(",").filter(Boolean);
    const set = new Set(dates);
    this.el.querySelectorAll("[data-date]").forEach((cell) => {
      cell.toggleAttribute("data-has-marker", set.has(cell.dataset.date));
    });
  },
};

def handle_event("calendar_navigate", %{"date" => date}, socket) do
  Process.sleep(200)
  {:noreply, assign(socket, events: fetch_events_for_month(date))}
end

<.calendar
  name="birth_date"
  label="Date of birth"
  navigation="select"
  max={Date.utc_today()}
/>

<.calendar_range
  start_name="leave_start"
  end_name="leave_end"
  label="Time off"
  description="Working days only."
  min={Date.utc_today()}
  disabled_dates={[:weekends]}
  navigation="extended"
/>