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.

Installation

npm

npm install @midas-ds/components

Yarn

yarn add @midas-ds/components

pnpm

pnpm add @midas-ds/components

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

API

Namn	Typ	Standard	Beskrivning
errorMessage	string	-
visibleDuration	DateDuration	{months: 1}	The amount of days that will be displayed at once. This affects how pagination works.
isDisabled	boolean	false	Whether the calendar is disabled.
id	string	-	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
autoFocus	boolean	false	Whether to automatically focus the calendar when it mounts.
value	DateValue	-	The current value (controlled).
defaultValue	DateValue	-	The default value (uncontrolled).
isReadOnly	boolean	false	Whether the calendar value is immutable.
isInvalid	boolean	-	Whether the current selection is invalid according to application logic.
pageBehavior	PageBehavior	visible	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.
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.
focusedValue	DateValue	-	Controls the currently focused date within the calendar.
defaultFocusedValue	DateValue	-	The date that is focused when the calendar first mounts (uncountrolled).
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](https://developer.mozilla.org/en-US/docs/Web/API/Element/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](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/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.