---
id: examples
title: Examples
---

> Familiarize with the component by implementing some basic features.

## Selecting days

To display days as selected, pass one or more dates to the [selected
prop](./api/daypicker#selected). You can also use ranges or other values
to [match days](./modifiers-matching-days.mdx).

```jsx preview
function App() {
  return (
    <DayPicker
      initialMonth={new Date(2020, 8)}
      selected={[
        new Date(2020, 8, 1),
        new Date(2020, 8, 19),
        new Date(2020, 8, 21),
        { after: new Date(2020, 8, 30), before: new Date(2020, 10, 1) }
      ]}
    />
  );
}
```

To make days selectable when clicked, add a state to the component and bind it
to the [onDayClick event handler](./api/daypicker#onDayClick).

```jsx preview
function App() {
  const [selectedDay, setSelectedDay] = useState();
  const handleDayClick = day => setSelectedDay(day);

  return (
    <DayPicker
      selected={selectedDay}
      onDayClick={handleDayClick}
    />
  );
}
```

## Disabling days

To disable days, pass them to the [disabled](./api/daypicker#disabled)
prop. Disabled days cannot be clicked. You can also use ranges or other values
to [match days](./modifiers-matching-days.mdx).

```jsx preview
function App() {
  const today = new Date();
  const sundays = { daysOfWeek: [0] };
  return (
    <DayPicker
      disabled={[today, sundays]}
      onDayClick={day => console.log(day)}
    />
  );
}
```

## Hiding days

Like with the disabled days, pass a [hidden prop](./api/daypicker#disabled)
to hide days from the calendar.

```jsx preview
function App() {
  const today = new Date();
  const sundays = { daysOfWeek: [0] };
  return (
    <DayPicker
      initialMonth={new Date(2020, 8)}
      hidden={[
        new Date(2020, 8, 1),
        new Date(2020, 8, 19),
        new Date(2020, 8, 21),
      ]}
    />
  );
}
```

## Week numbers

TODO: write docs

## Fixed weeks

TODO: write docs
