---
title: Calendar
category: General
summary: Render days in a calendar to allow users to pick dates easier.
---

### Simple

```jsx live
render(
  <Calendar
    renderDay={(props) => (
      <Calendar.Day {...props} onClick={() => alert(props.date)} />
    )}
  />
)
```

### Statuses

```jsx live
const currentMonth = Calendar.TODAY.getMonth()
const currentYear = Calendar.TODAY.getFullYear()
const createDate = (day) => new Date(currentYear, currentMonth, day)
const confirmedDates = [
  createDate(2),
  createDate(8),
  createDate(13),
  createDate(15),
  createDate(23),
]
const unconfirmedDates = [
  createDate(8),
  createDate(9),
  createDate(10),
  createDate(23),
  createDate(25),
]

render(() => {
  const [date, setDate] = React.useState(Calendar.TODAY)
  return (
    <Calendar
      selected={date}
      renderDay={(props) => {
        const statuses = []
        if (
          confirmedDates.some((date) => Calendar.isSameDay(date, props.date))
        ) {
          statuses.push('success')
        }
        if (
          unconfirmedDates.some((date) => Calendar.isSameDay(date, props.date))
        ) {
          statuses.push('error')
        }
        return (
          <Calendar.Day
            {...props}
            fontWeight={props.isSelected ? 800 : 400}
            statuses={statuses}
            onClick={statuses.length > 0 ? () => setDate(props.date) : null}
          />
        )
      }}
    />
  )
})
```

### Drag to select

```jsx live
const currentMonth = Calendar.TODAY.getMonth()
const currentYear = Calendar.TODAY.getFullYear()
const createDate = (day) => new Date(currentYear, currentMonth, day)

render(() => {
  const [hoveredDate, setHoveredDate] = React.useState(null)
  const [startDate, setStartDate] = React.useState(createDate(13))
  const [endDate, setEndDate] = React.useState(createDate(22))
  return (
    <Calendar
      renderDay={(props) => {
        const isEnd =
          Calendar.isSameDay(props.date, startDate) ||
          Calendar.isSameDay(props.date, endDate)
        const inRange = Calendar.isWithinRange(props.date, {
          start: startDate,
          end: endDate || hoveredDate,
        })
        if (isEnd || inRange) {
          delete props.isToday
        }
        return (
          <Calendar.Day
            {...props}
            fontWeight={isEnd ? 800 : 400}
            color={isEnd ? 'light-8' : inRange ? 'foreground' : props.color}
            backgroundColor={
              isEnd
                ? 'primary'
                : inRange
                ? 'surfaceTertiary'
                : props.backgroundColor
            }
            onMouseDown={() => {
              setStartDate(props.date)
              setEndDate(null)
            }}
            onMouseEnter={() => setHoveredDate(props.date)}
            onMouseLeave={() => setHoveredDate(null)}
            onMouseUp={() => {
              setHoveredDate(null)
              setEndDate(
                Calendar.isAfterDay(props.date, startDate)
                  ? props.date
                  : startDate
              )
            }}
          />
        )
      }}
    />
  )
})
```