@ebay/ui-core-react
Version:
Skin components build off React
51 lines (40 loc) • 7.54 kB
Markdown
# EbayCalendar
## Demo
[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/building-blocks-ebay-calendar--default)
## Usage
### Import JS
```jsx harmony
import { EbayCalendar } from "@ebay/ui-core-react/ebay-calendar";
```
### Import following styles from SKIN
```jsx harmony
import "@ebay/skin/calendar";
```
```jsx
<EbayCalendar />
```
## Attributes
| Name | Type | Stateful | Description | Data |
| ---------------------- | ---------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ |
| `navigable` | Boolean | No | If true, a header is included that allows for navigation between months | |
| `interactive` | Boolean | No | Date cells are contained in buttons for interactive calendars, and spans otherwise | |
| `numMonths` | Number | No | Number of months to be displayed at once | |
| `range` | Boolean | No | True if selecting a range, false if a single value | |
| `selected` | Date, Date[] | No | Date or list of dates that are selected, represented as an ISO string or an array of ISO strings | |
| `locale` | String | No | Locale of the date picker, default to `navigator.language` | |
| `disableBefore` | Date | No | First date that may be selected | |
| `disableAfter` | Date | No | Last date that may be selected | |
| `disableWeekdays` | Number[] | No | List of weekdays that are disabled. Must be an array of numbers, where Sunday is `0` and Saturday is `6` | |
| `disableList` | String[], Date[] | No | List of specific days that are disabled. Should be a list of ISO strings, but also accepts timestamps or `Date` objects | |
| `linkBuilder` | Function | No | Function used to build the href for each date. The function is passed the date as a `Date` object, and should return a url string. For dates that don't have a link, the function should return a falsy value | |
| `getA11yShowMonthText` | Function | No | Function used to get the text for showing previous and next months, defaults to `Show ${monthName}` | |
| `a11ySelectedText` | String | No | Text to be read by screen readers when a date is selected, defaults to `Selected` | |
| `a11yRangeStartText` | String | No | Text to be read by screen readers when a date is the start of a range, defaults to `Start of range` | |
| `a11yInRangeText` | String | No | Text to be read by screen readers when a date is in a range, defaults to `in range` | |
| `a11yRangeEndText` | String | No | Text to be read by screen readers when a date is the end of a range, defaults to `End of range` | |
| `a11yTodayText` | String | No | Text to be read by screen readers when a date is the current date, defaults to `Today` | |
| `a11yDisabledText` | String | No | Text to be read by screen readers when a date is disabled, defaults to `inactive` | |
| `a11ySeparator` | String | No | Text to be read by screen readers to separate properties, defaults to `-` | |
| `onFocus` | Function | - | Triggered when a day is focused on, typically via keyboard events | `(event: FocusEvent, { iso })` |
| `onSelect` | Function | - | Triggered when a day is selected | `(event: Event, { iso })` |
| `onMonthChange` | Function | - | Triggered during month navigation | `(event: Event, { iso })` |