Calendar er en frittstående kalenderkomponent for å velge en enkelt dato.
Når bruker du Calendar
Calendar er en frittstående kalenderkomponent som brukes når du ønsker en alltid synlig kalender. Den egner seg for situasjoner der datovalg er hovedinteraksjonen, f.eks. i bookingflyter eller dashbord. Trenger du et inputfelt med kalender i popover, bruk DatePicker i stedet.
Tilpasset styling av datoer
Du kan markere spesielle dager visuelt i kalenderen — for eksempel helger, helligdager eller kampanjedager. Hvis markeringen er meningsbærende bør den også beskrives for skjermlesere. Se Utvikling-fanen for hvordan du implementerer dette.
Helger markert med egen styling
Datoer utenfor måneden
Datoer fra forrige og neste måned kan vises i tomme ruter. Dette gir brukeren mer kontekst og gjør det mulig å velge disse datoene uten å navigere. Vurder å slå dette på når brukeren ofte velger datoer nær månedsgrenser. Se Utvikling-fanen for implementering.
Datoer utenfor måneden synlige
Ukenummer
Vis ukenummer når brukeren trenger ukereferanse, f.eks. i arbeidsplanlegging eller timesystemer. Se Utvikling-fanen for implementering.
Kalender med ukenummer
Velge en periode
Trenger brukeren å velge en periode (fra- og til-dato), bruk RangeCalendar i stedet.
Kom i gang
Calendar fungerer med samme datoobjekter som DatePicker og støtter mange av de samme props-ene.
Grunnleggende bruk
Styling av datoer
classNameForDate og ariaLabelForDate
Vise datoer utenfor måneden
showOutsideMonth
Ukenummer
showWeekNumbers
Komponentprops
Calendar
Denne komponenten har ingen props