## 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/>
      &emsp;-  `medium` (default) - use it in all common cases.<br/>
      &emsp;- `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/>
      &emsp;- `day` (default) - lets to select 1 day.<br/>
      &emsp;- `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/>
      &emsp;- `filterDate` - define what dates will be selectable.<br/>
      &emsp;- `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/>
      &emsp;- `showMonthDropdown ` - enables month dropdown.<br/>
      &emsp;- `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>
  );
};
```