Hoppa till huvudinnehåll

Calendar

Kalender
Storybook
React Aria

Kalender kan användas när användaren ska välja ett datum eller visualisera ett valt datum. Normalt sett är DatePicker standardvalet men kalendern kan användas när inputfältet inte behövs, inte ligger i direkt anslutning till kalendern, eller om kalendern inte ska presenteras som en popover.

<Calendar />

May 2025

27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Installation​

npm install @midas-ds/components
import { Calendar } from '@midas-ds/components'

Användning​

Calendar​

Kalendern accepterar samma props som DatePicker och controlled value sätts med value respektive onChange, uncontrolled value sätts med defaultValue.

RangeCalendar​

Samma props som DateRangePicker, exempel nedan med controlled value:

import { RangeCalendar } from '@midas-ds/components'
import { DateValue } from 'react-aria-components'

export const RangeCalendarExample = () => {
  const [selected, setSelected] = React.useState<{
    start: DateValue
    end: DateValue
  } | null>(null)

  return (
    <>
      <RangeCalendar
        value={selected}
        onChange={setSelected}
      />
      <pre>
        Valda datum:{' '}
        {selected &&
          `${selected?.start.toString()}
           till: ${selected?.end.toString()}`}
      </pre>
    </>
  )
}

May 2025

27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Valda datum:

API​

NameTypeDefaultDescription
errorMessagestring-
visibleDurationDateDuration{months: 1}

The amount of days that will be displayed at once. This affects how pagination works.

createCalendar(identifier: CalendarIdentifier) => Calendar-

A function to create a new Calendar object for a given calendar identifier. If not provided, the createCalendar function from @internationalized/date will be used.

isDisabledfalse

Whether the calendar is disabled.

idstring-

The element's unique identifier. See MDN.

defaultValue-

The default value (uncontrolled).

autoFocusfalse

Whether to automatically focus the calendar when it mounts.

value-

The current value (controlled).

minValue-

The minimum allowed date that a user may select.

maxValue-

The maximum allowed date that a user may select.

isDateUnavailable(date: DateValue) => boolean-

Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.

isReadOnlyfalse

Whether the calendar value is immutable.

focusedValue-

Controls the currently focused date within the calendar.

defaultFocusedValue-

The date that is focused when the calendar first mounts (uncountrolled).

isInvalid-

Whether the current selection is invalid according to application logic.

pageBehaviorvisible

Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.

firstDayOfWeek-

The day that starts the week.

children-

The children of the component. A function may be provided to alter the children based on component state.

className-

The CSS className for the element. A function may be provided to compute the class based on component state.

style-

The inline style for the element. A function may be provided to compute the style based on component state.

slotstring-

A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.