Calendar
Calendar.Panel
Shortcut over the same parts — navigation, caption, weekday header and grid.
duben 2026
po
út
st
čt
pá
so
ne
tsx
import { $, useSignal } from "@builder.io/qwik";
import { Calendar } from "~/components/ui/base/calendar";
export default component$(() => {
const selected = useSignal<string | undefined>(undefined);
return (
<Calendar.Panel
defaultViewMonth="2026-04-01"
selected={selected.value}
onSelect$={$((iso) => {
selected.value = iso;
})}
/>
);
});
Compound API
Calendar.Root with custom layout (the same subcomponents as Panel).
duben 2026
po
út
st
čt
pá
so
ne
tsx
import { Calendar } from "~/components/ui/base/calendar";
<Calendar.Root defaultViewMonth="2026-04-01" weekStartsOn={1}>
<div class="flex flex-col gap-2">
<div class="flex items-center gap-1 px-0.5">
<Calendar.PrevButton>
<span aria-hidden="true">‹</span>
</Calendar.PrevButton>
<Calendar.Caption format="MMMM YYYY" />
<Calendar.NextButton>
<span aria-hidden="true">›</span>
</Calendar.NextButton>
</div>
<Calendar.Weekdays />
<Calendar.Grid />
</div>
</Calendar.Root>
Controlled month and min / max
viewMonth + onViewMonthChange, range limiting minDate / maxDate (YYYY-MM-DD` strings).
duben 2026
po
út
st
čt
pá
so
ne
tsx
import { $, component$, useSignal } from "@builder.io/qwik";
import { Calendar } from "~/components/ui/base/calendar";
export default component$(() => {
const viewMonth = useSignal("2026-04-01");
const selected = useSignal<string | undefined>(undefined);
return <Calendar.Panel
viewMonth={viewMonth.value}
onViewMonthChange$={$((iso) => {
viewMonth.value = iso;
})}
selected={selected.value}
onSelect$={$((iso) => {
selected.value = iso;
})}
minDate="2026-04-05"
maxDate="2026-04-25"
/>
});
Date field (CalendarInput)
Input with LL text, popover and Calendar.Panel — the CalendarInput component (calendar-input). Can be wrapped with Field / Label.
duben 2026
po
út
st
čt
pá
so
ne
tsx
import { $, component$, useSignal } from "@builder.io/qwik";
import { CalendarInput } from "~/components/ui/base/calendar-input";
import { Field } from "~/components/ui/base/field";
import { Label } from "~/components/ui/base/label";
export const Demo = component$(() => {
const picked = useSignal("2026-04-12");
return (
<Field.Root>
<Label for="cal-demo">Date</Label>
<CalendarInput
inputId="cal-demo"
value={picked.value}
placeholder="e.g. April 12, 2026"
onValueChange$={$((iso) => {
picked.value = iso;
})}
/>
</Field.Root>
);
});
Metadata
Source: meta.generated.json (see npm run generate)
File base/calendar/meta.generated.json not found or path not allowed.