Calendar

() => {
  const [date, setDate] = React.useState(now('Europe/Oslo'));
  return (
    <Calendar
      label="Dato"
      selectedDate={date}
      onChange={date => setDate(date)}
      locale="nb-NO"
    />
  );
}

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.

() => {
  const [date, setDate] = React.useState(now('Europe/Oslo'));
  return (
    <Calendar
      label="Dato"
      selectedDate={date}
      onChange={date => setDate(date)}
      locale="nb-NO"
    />
  );
}

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
() => {
  const [date, setDate] = React.useState(now('Europe/Oslo'));
  return (
    <>
      <style>{`
        .weekend-day {
          background-color: #fde8e8 !important;
          color: #8b0000 !important;
        }
      `}</style>
      <Calendar
        label="Dato"
        selectedDate={date}
        onChange={date => setDate(date)}
        locale="nb-NO"
        classNameForDate={date => isWeekend(date, 'nb-NO') ? 'weekend-day' : ''}
        ariaLabelForDate={date => isWeekend(date, 'nb-NO') ? ', helgedag' : ''}
      />
    </>
  );
}

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

Ukenummer

Vis ukenummer når brukeren trenger ukereferanse, f.eks. i arbeidsplanlegging eller timesystemer. Se Utvikling-fanen for implementering.

Kalender med ukenummer
() => {
  const [date, setDate] = React.useState(now('Europe/Oslo'));
  return (
    <Calendar
      label="Dato"
      selectedDate={date}
      onChange={date => setDate(date)}
      locale="nb-NO"
      showWeekNumbers
    />
  );
}

Flere måneder

Kalenderen kan vise flere måneder samtidig. Dette gir brukeren bedre oversikt og reduserer behovet for navigering, spesielt når datovalg ofte er nær månedsgrenser. Se Utvikling-fanen for implementering.

To måneder synlig
() => {
  const [date, setDate] = React.useState(now('Europe/Oslo'));
  return (
    <Calendar
      label="Dato"
      selectedDate={date}
      onChange={date => setDate(date)}
      locale="nb-NO"
      visibleDuration={{ months: 2 }}
    />
  );
}

Velge en periode

Trenger brukeren å velge en periode (fra- og til-dato), bruk RangeCalendar i stedet.