Calendar

a calendar of days displayed by month

November 2020

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

"a user friendly label for screen readers"

activeDate

When using range, Whether the next date selection will affect the start or end bound of the range.

"start""end"

alignSelf

How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.

"start"

"center"

"end"

"stretch"

animate

Whether to animate the calender as the user interacts with it.

true

false

bounds

An array of two numbers indicating the limits on navigation in ISO8601 format

["2018-09-01", "2018-12-31"]

children

Function that will be called to render each day. It will be passed ({date, day, isInRange, isSelected}) where date is a string containing an ISO8601 date for the day being rendered, day is a number containing the day of the month being rendered, isInRange is a boolean indicating whether the date is within a selected range of dates, and isSelected is a boolean indicating whether this date is selected.

"function"

date

The selected date in ISO8601 format

"2018-10-16T12:22:00Z"

dates

Multiple selected dates in ISO8601 format. Items that are an array indicate a range of dates.

["2018-10-12", "2018-10-17"]

[["2018-10-19", "2018-11-23"]]

daysOfWeek

Whether to show the days of the week.

truefalse

disabled

Multiple dates in ISO8601 format that should not be selectable. Items that are an array indicate a range of dates.

["2018-09-21", "2018-09-27"]

[["2018-12-23", "2018-12-26"]]

fill

Whether the calendar should fill the parent container.

truefalse

firstDayOfWeek

The first day of the week. 0 for Sunday. 1 for Monday.

gridArea

The name of the area to place this inside a parent Grid.

"a parent grid area name"

header

If specified, the entire calendar header will be managed by the caller. The function passes the following options:

  {
    date: Date,
    locale: string,
    onPreviousMonth: func,
    onNextMonth: func,
    previousInBound: bool,
    nextInBound: bool,
  }

onPreviousMonth and onNextMonth are callbacks that will tell the calendar to move between months. previousInBound and nextInBound are booleans that tell, when using bounds, if the current date is within that range. You can then use that to disable the previous and next buttons.

({
  date: Date,
  locale: "en-US",
  onPreviousMonth: func,
  onNextMonth: func,
  previousInBound: bool,
  nextInBound: bool,
}) => {}

locale

The locale to use.

"en-US"

margin

The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.

"xsmall"

"small"

"medium"

"large"

"xlarge"

{
  "vertical": "...",
  "horizontal": "...",
  "top": "...",
  "bottom": "...",
  "left": "...",
  "right": "..."
}

onReference

Called with an ISO8601 date when the user navigates to a different month.

('2018-10-22T12:22:00Z') => {}

onSelect

Called with an ISO8601 date when the user selects a day. For single select, make this the subsequent date property value. For multiple select or ranges, toggle values in dates. Not specifying this property makes the component read only.

('2018-10-22T12:22:00Z') => {}

range

Whether to automatically manage multiple date selection as a range. When the user clicks the first date, onSelect will be called with that date. When the user selects another date, onSelect will be called with an array of two dates. If range = "array", then an array of dates will be returned even when the start or end date of the range is undefined.

true

false

reference

The date to show if date isn't set, in ISO8601 format

"2018-10"

showAdjacentDays

Whether to show the days from the previous and next months. trim limits adjacent days shown to rows containing days in the current month.

true

false

size

What size to make it.

"small"

"medium"

"large"

Theme

calendar.day.extend

Any additional style for the day of Calendar.

"any CSS"

(props) => {}

calendar.extend

Any additional style for the Calendar.

"any CSS"

(props) => {}

calendar.heading.level

The heading level used for the calendar.

"4"

calendar.icons.next

The icon to use for the next month navigation control.

<Next />

calendar.icons.previous

The icon to use for the previous month navigation control.

<Previous />

calendar.icons.small.next

The icon to use for the next month navigation control when small.

<FormNext />

calendar.icons.small.previous

The icon to use for the previous month navigation control when small.

<FormPrevious />

calendar.large.daySize

The size of a day when large.

"109.71428571428571px"

calendar.large.fontSize

The font size to use for days when large.

"30px"

calendar.large.lineHeight

The line height to use for days when large.

1.11

calendar.large.slideDuration

How long it animate the slide between months when large.

"0.8s"

calendar.medium.daySize

The size of a day when medium.

"54.857142857142854px"

calendar.medium.fontSize

The font size to use for days when medium.

"18px"

calendar.medium.lineHeight

The line height to use for days when medium.

1.45

calendar.medium.slideDuration

How long it animate the slide between months when medium.

"0.5s"

calendar.small.daySize

The size of a day when small.

"27.428571428571427px"

calendar.small.fontSize

The font size to use for days when small.

"14px"

calendar.small.lineHeight

The line height to use for days when small.

1.375

calendar.small.slideDuration

How long it animate the slide between months when small.

"0.2s"

global.size.small

The width of the calendar when small.

"192px"

global.size.medium

The width of the calendar when medium.

"384px"

global.size.large

The width of the calendar when large.

"768px"

global.colors.icon

The color of a given icon.

{
  "0": "#",
  "1": "6",
  "2": "6",
  "3": "6",
  "4": "6",
  "5": "6",
  "6": "6",
  "dark": "#f8f8f8",
  "light": "#666666"
}

global.edgeSize

The possible sizes for margin.

{
  "none": "0px",
  "hair": "1px",
  "xxsmall": "3px",
  "xsmall": "6px",
  "small": "12px",
  "medium": "24px",
  "large": "48px",
  "xlarge": "96px",
  "responsiveBreakpoint": "small"
}