Calendar

Kom i gang

Calendar viser en inline-kalender der brukeren kan velge en enkelt dato. Den fungerer med samme type datoobjekter som DatePicker og støtter mange av de samme props-ene.

For periodevalg (fra- og til-dato), se RangeCalendar.

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.

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 [date, setDate] = React.useState(now('Europe/Oslo'));
    return (
      <Calendar
        label="Dato"
        selectedDate={date}
        onChange={date => setDate(date)}
        locale="nb-NO"
        minDate={today('Europe/Oslo')}
        maxDate={today('Europe/Oslo').add({ months: 1 })}
      />
    );
  }

Styling av datoer

Calendar 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 datoer utenfor måneden

Hvis du ønsker å vise og gjøre det mulig å velge datoer fra forrige og neste måned i kalenderen, kan du bruke prop-en showOutsideMonth.

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

Calendar 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

Calendar

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

Denne komponenten har ingen props