CalendarPanel

Sidebar companion for <Calendar>. Renders one checkbox per calendar group plus a mini date picker. Reads the calendar-api Svelte context and dispatches filter-events and navigate-to directly to the parent store.

Signature

import { CalendarPanel } from "@svar-ui/svelte-calendar";

Designed for the <Calendar> children snippet so it can resolve the calendar context.

Props

Prop	Type	Default	Description
calendars	CalendarGroup[]	required	Group definitions rendered as checkboxes.
accessor	string	"calendarId"	Event field used by the generated filter predicate.
open	boolean	true	Expanded layout. Hides the mini calendar when false; the checkboxes stay visible.
onchange	(detail: { value: (string | number)[]; filter: ((event: Record<string, any>) => boolean) | null }) => void	undefined	Fires after a checkbox toggle, including the initial filter when groups start inactive.

CalendarGroup

Field	Type	Required	Description
id	string | number	yes	Group identifier. Compared against event[accessor].
label	string	yes	Checkbox label shown in the sidebar.
active	boolean	no	Initial checked state. Defaults to true. Set false to start hidden.
css	string	no	CSS class added to the group's wrapper element for custom styling.

onchange payload

Field	Type	Description
value	(string | number)[]	Active group ids. Numeric ids come back as strings.
filter	((event: Record<string, any>) => boolean) | null	Predicate dispatched to filter-events. null when all groups are on.

Example

<script lang="ts">
  import { Calendar, CalendarPanel } from "@svar-ui/svelte-calendar";

  const calendars = [
    { id: "work", label: "Work" },
    { id: "home", label: "Home" },
    { id: "holiday", label: "Holidays", active: false },
  ];
</script>

<Calendar events={data} view="week" {date}>
  <CalendarPanel {calendars} accessor="calendarId" />
</Calendar>

Related articles

• filter-events — action dispatched when a checkbox toggles.
• navigate-to — action dispatched when the mini date picker selects a date.
• children — calendar slot where this panel is mounted.
• Calendar groups — full setup with grouping accessors and styling.