2019-08-23 12:23:22 +00:00
|
|
|
# Calendar
|
|
|
|
|
|
|
|
#### Description
|
|
|
|
|
2019-08-29 13:33:10 +00:00
|
|
|
Custom calendar
|
2019-08-23 12:23:22 +00:00
|
|
|
|
|
|
|
#### Usage
|
|
|
|
|
|
|
|
```js
|
2019-08-30 10:21:11 +00:00
|
|
|
import { NewCalendar } from 'asc-web-components';
|
2019-08-23 12:23:22 +00:00
|
|
|
|
2019-08-29 13:33:10 +00:00
|
|
|
<NewCalendar
|
2019-08-23 12:23:22 +00:00
|
|
|
onChange={date => {
|
2019-08-29 13:33:10 +00:00
|
|
|
action('Selected date')(date);
|
2019-08-23 12:23:22 +00:00
|
|
|
}}
|
2019-08-29 13:33:10 +00:00
|
|
|
disabled={boolean('disabled', false)}
|
|
|
|
themeColor={color('themeColor', '#ED7309')}
|
|
|
|
selectedDate={myDateKnob('selectedDate', new Date())}
|
|
|
|
openToDate={myDateKnob('openToDate', new Date())}
|
|
|
|
minDate={myDateKnob('minDate', new Date("1970/01/01"))}
|
|
|
|
maxDate={myDateKnob('maxDate', new Date("3000/01/01"))}
|
|
|
|
locale={select('location', locales, 'en')}
|
|
|
|
scaled = {boolean('scaled', false)}
|
2019-08-23 12:23:22 +00:00
|
|
|
/>
|
|
|
|
```
|
|
|
|
|
|
|
|
#### Properties
|
|
|
|
|
|
|
|
|
|
|
|
| Props | Type | Required | Values | Default | Description |
|
|
|
|
| ------------ | -------- | :------: | ------ | ------- | --------------------------------------- |
|
|
|
|
| `onChange` | `func` | - | - | - | Function called when the user select a day |
|
|
|
|
| `disabled` | `bool` | - | - | - | Disabled react-calendar |
|
|
|
|
| `themeColor` | `string` | - | - | `#ED7309` | Color of the selected day |
|
|
|
|
| `selectedDate` | `date` | - | - | (today) | Selected date value |
|
|
|
|
| `openToDate` | `date` | - | - | (today) | The beginning of a period that shall be displayed by default |
|
|
|
|
| `minDate` | `date` | - | - | `new Date("1970/01/01")` | Minimum date that the user can select. |
|
|
|
|
| `maxDate` | `date` | - | - | `new Date("3000/01/01")` | Maximum date that the user can select. |
|
2019-08-29 13:33:10 +00:00
|
|
|
| `locale` | `string` | - | - | User's browser settings | Browser locale |
|
|
|
|
| `scaled` | `bool` | - | | | Selected calendar size |
|