Calendar

Kildekode på GitHub · Les som Markdown

Calendar er en kalenderkomponent for å vise og velge datoer. Den viser norske dag- og månedsnavn, har mandag som første ukedag, og støtter full tastaturnavigasjon. Bygget på react-day-picker.

Importering

import { Calendar } from "@kilden/designsystem";

Grunnleggende bruk

function CalendarDemo() {
const [date, setDate] = React.useState(undefined);
return (
  <Calendar
    mode="single"
    selected={date}
    onSelect={setDate}
  />
);
}

Med forhåndsvalgt dato

function CalendarPreselected() {
const [date, setDate] = React.useState(new Date());
return (
  <Calendar
    mode="single"
    selected={date}
    onSelect={setDate}
  />
);
}

Deaktiverte datoer

Bruk disabled-propen for å hindre valg av bestemte datoer, for eksempel helger eller datoer i fortiden.

function CalendarDisabled() {
const [date, setDate] = React.useState(undefined);
return (
  <Calendar
    mode="single"
    selected={date}
    onSelect={setDate}
    disabled={[
      { dayOfWeek: [0, 6] },
      { before: new Date() },
    ]}
  />
);
}

Datoperiode (range)

Calendar støtter valg av datoperioder med mode="range".

function CalendarRange() {
const [range, setRange] = React.useState(undefined);
return (
  <Calendar
    mode="range"
    selected={range}
    onSelect={setRange}
  />
);
}

Bruksanbefalinger

Skjema → DatePicker

Bruk DatePicker for skjemaer

Når brukeren skal velge en dato i et skjema, bruk DatePicker som kombinerer Calendar med en Popover og knapp.

Skjema → Calendar

Ikke bruk Calendar alene i skjemaer

En frittstående kalender tar mye plass. Bruk den kun når kalenderen alltid skal være synlig, for eksempel i en bookingside.

Tilgjengelighet

Full tastaturnavigasjon: piltaster for å flytte mellom dager, PageUp/PageDown for måneder
Norske aria-labels for alle elementer (dager, navigasjonsknapper, månedsnavn)
disabled-datoer kommuniseres via aria-disabled
Semantisk <table>-oppsett med role="grid"

Props

Calendar godtar alle props fra react-day-picker i tillegg til:

Prop	Type	Default	Beskrivelse
`mode`	`"single" \| "multiple" \| "range"`	—	Valgmodus
`selected`	`Date \| Date[] \| DateRange`	—	Valgt(e) dato(er)
`onSelect`	`(value) => void`	—	Kalles når valg endres
`disabled`	`Matcher \| Matcher[]`	—	Datoer som ikke kan velges
`defaultMonth`	`Date`	Nå	Startet måned
`showOutsideDays`	`boolean`	`true`	Vis dager fra forrige/neste måned
`className`	`string`	—	Ekstra CSS-klasser
`classNames`	`object`	—	Overstyr klasser for interne elementer