@wix/design-system
Version:
@wix/design-system
275 lines (246 loc) • 6.59 kB
Markdown
## Feature Examples
### Layout
- description: Change calendar’s layout using `numOfMonths` prop. It can display 1 or 2 months.
- example:
```jsx
() => {
const [value, setValue] = React.useState('');
return (
<StorybookComponents.Stack flexDirection="column">
<Calendar
value={value}
onChange={setValue}
numOfMonths={1}
autoFocus={false}
/>
<Calendar
value={value}
onChange={setValue}
numOfMonths={2}
autoFocus={false}
/>
</StorybookComponents.Stack>
);
};
```
### Size
- description: Adjust the component `size` using size prop. It supports 2 sizes:<br/>
 - `medium` (default) - use it in all common cases.<br/>
 - `small` - use it in dense layouts like Bookings Calendar to save vertical and horizontal space.
- example:
```jsx
() => {
const [value, setValue] = React.useState('');
return (
<StorybookComponents.Stack>
<Calendar
value={value}
onChange={setValue}
size="medium"
autoFocus={false}
/>
<Calendar
value={value}
onChange={setValue}
size="small"
autoFocus={false}
/>
</StorybookComponents.Stack>
);
};
```
### Date Indication
- description: Mark important dates with `dateIndication` prop. It’s helpful when the calendar needs to highlight the dates with happening events.
- example:
```jsx
() => {
const [value, setValue] = React.useState(new Date());
return (
<Calendar
value={value}
onChange={setValue}
autoFocus={false}
dateIndication={({ date, isSelected }) => {
if (date.getTime() < new Date().getTime()) {
return (
<Box align="center">
<Box
width="4px"
height="4px"
borderRadius="50%"
backgroundColor={isSelected ? 'D60' : 'B20'}
/>
</Box>
);
}
}}
/>
);
};
```
### Selection Mode
- description: Enable select the range of dates with `selectionMode` prop. It supports 2 values:<br/>
 - `day` (default) - lets to select 1 day.<br/>
 - `range` - lets to select any range of dates.
- example:
```jsx
() => {
const date = new Date();
const [day, setDay] = React.useState(date);
const [range, setRange] = React.useState({
from: new Date(),
to: new Date(date.setMonth(date.getMonth() + 1)),
});
return (
<StorybookComponents.Stack>
<Calendar
selectionMode="day"
value={day}
onChange={setDay}
autoFocus={false}
/>
<Calendar
selectionMode="range"
value={range}
onChange={setRange}
autoFocus={false}
/>
</StorybookComponents.Stack>
);
};
```
### Excluding Dates
- description: Control what dates the user can select with 2 props:<br/>
 - `filterDate` - define what dates will be selectable.<br/>
 - `excludePastDates` - allow selecting only today and future dates.
- example:
```jsx
() => {
const [calendar1Value, setCalendar1Value] = React.useState(new Date());
const [calendar2Value, setCalendar2Value] = React.useState(new Date());
const filterDate = date => date.getTime() < new Date();
return (
<StorybookComponents.Stack>
<Calendar
value={calendar1Value}
onChange={setCalendar1Value}
filterDate={filterDate}
autoFocus={false}
/>
<Calendar
value={calendar2Value}
onChange={setCalendar2Value}
excludePastDates
autoFocus={false}
/>
</StorybookComponents.Stack>
);
};
```
### Select Month and Year
- description: Let the user quickly change the month and year values with props::<br/>
 - `showMonthDropdown ` - enables month dropdown.<br/>
 - `showYearDropdown` - enables year dropdown.
- example:
```jsx
() => {
const [value, setValue] = React.useState('');
return (
<Calendar
value={value}
onChange={setValue}
showMonthDropdown
showYearDropdown
autoFocus={false}
/>
);
};
```
### Localization
- description: Change the language using `locale` prop. Some languages will change the start of the week day and order of month and year. First Day of the week can be controlled manually with `firstDayOfWeek` prop.
- example:
```jsx
() => {
const [value, setValue] = React.useState('');
return (
<Calendar
value={value}
onChange={setValue}
locale="ko"
firstDayOfWeek={0}
autoFocus={false}
/>
);
};
```
## Common Use Case Examples
### Event scheduling
- description: Use a calendar with time picker to let our users set the appointment date or article publish date.
- example:
```jsx
() => {
const [value, setValue] = React.useState(new Date());
const [time, setTime] = React.useState('10.00');
const timeslots = [
'10.00',
'10.20',
'10.40',
'11.00',
'11.20',
'11.40',
'12.00',
'12.20',
'12.40',
];
const onTimeInputChange = () => setTime('');
return (
<CustomModalLayout
primaryButtonText="Schedule"
secondaryButtonText="Cancel"
onCloseButtonClick={() => {}}
title="Schedule Post"
subtitle="When do you want to publish or post?"
showHeaderDivider
showFooterDivider
removeContentPadding
>
<Layout gap="0">
<Cell span={5}>
<Calendar
value={value}
onChange={setValue}
excludePastDates
autoFocus={false}
/>
</Cell>
<Cell span={7}>
<Box maxHeight="400px">
<Divider direction="vertical" />
<Box direction="vertical" width="100%">
<Box margin="SP3">
<FormField label="Time">
<TimeInput onChange={onTimeInputChange} />
</FormField>
</Box>
<Box overflow="scroll" direction="vertical">
{timeslots.map(slot => (
<ListItemSelect
prefix={
<Box>
<Icons.Time />
</Box>
}
onClick={() => setTime(slot)}
selected={slot === time}
title={slot}
/>
))}
</Box>
</Box>
</Box>
</Cell>
</Layout>
</CustomModalLayout>
);
};
```