A range over two months, with disabled days

// apps/docs/examples/ui/calendar-range.tsx'use client';
import {useState} from 'react';
import {getDateFnsLocale} from '@workspace/active-format';import {Calendar} from '@workspace/active-ui/components/primitives/calendar';
const TODAY = new Date(2026, 9, 20);
/** The shape of a range in `mode="range"`: its first and last day. */interface DateRange {  from: Date | undefined;  to?: Date | undefined;}const LOCALE = getDateFnsLocale('en');
function isoDay(date: Date | undefined): string {  if (!date) return '…';  const pad = (n: number) => String(n).padStart(2, '0');  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;}
/** * A range over two months, with the days before today and the weekends * disabled, and month and year chosen from lists. The modes, the disabled * matcher and the range type are react-day-picker's; the calendar passes * them through. */export default function CalendarRangeExample() {  const [range, setRange] = useState<DateRange | undefined>({    from: new Date(2026, 9, 26),    to: new Date(2026, 10, 4),  });  return (    <div className="flex flex-col items-center gap-4">      <Calendar        mode="range"        selected={range}        onSelect={setRange}        numberOfMonths={2}        defaultMonth={TODAY}        today={TODAY}        locale={LOCALE}        disabled={[{before: TODAY}, {dayOfWeek: [0, 6]}]}        captionLayout="dropdown"        startMonth={new Date(2026, 0, 1)}        endMonth={new Date(2030, 11, 1)}        className="rounded-md border"      />      <p className="text-muted-foreground text-sm">        From <code>{isoDay(range?.from)}</code> to{' '}        <code>{isoDay(range?.to)}</code>      </p>    </div>  );}