Calendar

A utility component for calendar display and input.

Example

Basic usage

You can also pass in startOfWeek prop to control which day to show as the start of the week. By default, Sunday will be shown as the first day. In below example, Monday is shown as the first day instead.

Coral also exposes DateView, MonthView, and YearView. These are, in contrast, presentation and fully-controlled components - these components do not include selections or have any states. Built on top of LayoutGrid. These components are accessible, customizable, and used in Calendar.

Render dates

Customizing DateView cells

Note that when you’re customizing the cells, you have full control of what being rendered. However, this comes with a caveat - you shouldn’t return null in renderDate or renderDay because it will shift the cells.

If you only want to customize a certain cell, you can return the rest of the cells with second parameter, which is the defaultCell. In some cases, you are recommended to use React first-class utility function cloneElement to add some props to the defaultCell.

range in DateCell

DateCell accepts range prop with schema { start: boolean, end: boolean }. This props determines the corner rounding because this component doesn’t handle the rounding corner itself.

Using createDateRange

If you find it troublesome to keep handling ranges, you can use utility function createDateRange(start, end) which return getRange function. Note that the range is inclusive.

This API may look strange, but you can find some references on popular libraries like downshift, react-dropzone, react-use-gesture. It’s normally known as prop getters.

Render months

Customizing MonthView cells

Similar to createDateRange, you can use createMonthRange for more accurate calculation.

Render years

Using YearView, you need to pass decade prop and it must be multiples of 10.

Customizing YearView cells

Similar to createDateRange, you can use createYearRange for more accurate calculation.

Accessibility

In Calendar, header of each view handles Arrow Left and Right to navigate between months, years, or decades. Pressing Enter on it will change the mode one level above. These components are also attributed with aria-live="polite" to inform the user when the months, years, or decades have changed.

For each view, you can press Arrow Up, Down, Left, Right to navigate through dates like a grid. Each cell is also aria-labeled with the full text of each date (e.g. Monday, 1 January 1999).

Relevant components

• LayoutGrid

References

• Ant Design: https://ant.design/components/calendar/#components-calendar-demo-card
• Material-UI: https://material-ui-pickers.dev/demo/datepicker
• Airbnb React Dates: http://airbnb.io/react-dates/?path=/story/daterangepicker-drp—default

API

Calendar

DateCell

DateView

DayCell

MonthCell

MonthView

YearCell

YearView