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 />

April 2025

30
31
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
1
2
3

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>
    </>
  )
}

April 2025

30
31
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
1
2
3
Valda datum:

API​

NameTypeDefaultDescription
errorMessage string-
visibleDuration DateDuration{months: 1}

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

isDisabled booleanfalse

Whether the calendar is disabled.

id string-

The element's unique identifier. See MDN.

defaultValue DateValue-

The default value (uncontrolled).

autoFocus booleanfalse

Whether to automatically focus the calendar when it mounts.

value DateValue-

The current value (controlled).

minValue DateValue-

The minimum allowed date that a user may select.

maxValue DateValue-

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.

isReadOnly booleanfalse

Whether the calendar value is immutable.

focusedValue DateValue-

Controls the currently focused date within the calendar.

defaultFocusedValue DateValue-

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

isInvalid boolean-

Whether the current selection is invalid according to application logic.

pageBehavior PageBehaviorvisible

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

firstDayOfWeek "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat"-

The day that starts the week.

children ReactNode | ((values: CalendarRenderProps & { defaultChildren: ReactNode; }) => ReactNode)-

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

className string | ((values: CalendarRenderProps & { defaultClassName: string; }) => string)-

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

style CSSProperties | ((values: CalendarRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties)-

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

slot string-

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.

weekdayStyle "narrow" | "short" | "long"short

The style of weekday names to display in the calendar grid header, e.g. single letter, abbreviation, or full day name.