RangeCalendar

Kom i gang

RangeCalendar lar brukeren velge en datoperiode (fra- og til-dato) i en inline-kalender. Den fungerer med samme type datoobjekter som Calendar og støtter de fleste av de samme props-ene, men tar inn og returnerer et objekt med start og end i stedet for én enkelt dato.

For enkeltdatovelger, se Calendar. Props som er spesifikke for enkeltdatovelgeren (onSelectedCellClick, onCellClick og forcedReturnType) er ikke tilgjengelige.

Språk og locale

Språk og locals er støttet gjennom prop-en locale eller react-aria sin <I18nProvider />. locale støtter strenger på BCP 47-formatet, eks. nb-NO for norsk. Her finner du en liste over BCP 47-koder. Som default velges den locale-en som er satt på brukeren maskin.

navigationDescription er en prop som forteller brukeren hvordan de kan navigere i kalenderen med tastaturet. En norsk og engelsk verdi følger med automatisk, men andre språk må legges inn selv.

Vise flere måneder samtidig

Bruk visibleDuration-prop-en for å vise flere måneder samtidig i periodekalenderen.

Datovalidering

Hvis du ønsker å begrense tilgjengelige datoer kan du benytte minDate- og maxDate-props-ene eller isDateUnavailable()-valideringsfunksjonen. minDate og maxDate tar inn et CalendarDate-objekt. isDateUnavailable() tar inn en DateValue og returnerer en boolean.

() => {
    const [range, setRange] = React.useState(null);
    return (
      <RangeCalendar
        value={range}
        onChange={setRange}
        locale="nb-NO"
        minDate={today('Europe/Oslo')}
        maxDate={today('Europe/Oslo').add({ months: 2 })}
      />
    );
  }

Styling av datoer

RangeCalendar har støtte for prop-en classNameForDate. classNameForDate skal være en funksjon som tar inn en dato og returnerer en streng med klassenavnet som skal legges til for dato-ruten.

Hvis stylingen som legges til er meningsbærende bør du også bruke ariaLabelForDate til å beskrive stylingens mening for skjermlesere o.l.

Vise ukenummer

Hvis du trenger å vise ukenummer i kalenderen kan du benytte prop-en showWeekNumbers. Du kan endre overskriften til ukenummerkolonnen ved å bruke prop-en weekNumberHeading.

Retningslinjer

Universell utforming

RangeCalendar bruker react-aria i bakgrunnen. Denne pakken sørger for gjennomgående støtte for universell utforming. Alle interagerbare elementer i kalenderen har aria-beskrivelser og er tilgjengelige med tastaturet.

Hvis du endrer locale (dvs. språk) til noe annet enn norsk og engelsk må du sende inn verdier på riktig språk til navigationDescription-prop-en.

Komponenter

RangeCalendar

import { RangeCalendar } from '@entur/datepicker';

Denne komponenten har ingen props