Skip to main content

useWeekPicker

The headless hook behind <WeekPicker>. A single selectWeek commits the whole week containing the clicked day; the grid highlights the selected week as a range.

:::info /headless entry Exported from @kalyx/react/headless (adapter-agnostic). See Date adapters & the /headless entry. :::

import { useWeekPicker } from '@kalyx/react/headless';

Signature​

function useWeekPicker(options?: UseWeekPickerOptions): UseWeekPickerReturn;

Options​

FieldTypeDefaultDescription
valueDateRange—Controlled week as a { start, end } range.
defaultValueDateRange—Uncontrolled initial week.
onChange(week: DateRange) => void—Fires when the selected week changes.
disabledDisabledRule[][]Disable rules.
weekStartsOn0 | 10Day the week starts on.
adapterDateAdapter—Date adapter (required on /headless).
displayTimezonestring—IANA zone for civil-day comparison.

Return​

FieldTypeDescription
valueDateRangeSelected week as { start, end }.
isOpenbooleanPopover state.
open / close / toggle() => voidPopover controls.
selectWeek(iso: ISODateString) => voidCommit the whole week containing the clicked day.
viewMonthISODateStringFirst-day-of-visible-month.
setViewMonth(iso: ISODateString) => voidJump to a month.
calendarCalendarGrid6×7 grid with the selected week highlighted as a range.
previousMonth / nextMonth() => voidMonth navigation shorthands.
pickerIdstringStable ID for ARIA wiring.
adapterDateAdapterThe resolved adapter.

Each CalendarDay in calendar carries isRangeStart / isRangeEnd / isInRange reflecting the committed week (see useDatePicker → CalendarDay).

Example​

import { useWeekPicker } from '@kalyx/react/headless';
import { DateFnsAdapter } from '@kalyx/adapter-date-fns';

export function MiniWeekGrid() {
  const { calendar, viewMonth, previousMonth, nextMonth, selectWeek } =
    useWeekPicker({ adapter: DateFnsAdapter, weekStartsOn: 1 });

  return (
    <div>
      <header>
        <button onClick={previousMonth} aria-label="Previous">◀</button>
        <span>{viewMonth.slice(0, 7)}</span>
        <button onClick={nextMonth} aria-label="Next">▶</button>
      </header>
      <div className="grid grid-cols-7">
        {calendar.flat().map((day) => (
          <button
            key={day.isoString}
            disabled={day.isDisabled}
            onClick={() => selectWeek(day.isoString)}
            className={day.isInRange || day.isRangeStart || day.isRangeEnd ? 'bg-indigo-100' : ''}>
            {day.dayNumber}
          </button>
        ))}
      </div>
    </div>
  );
}