> ## Documentation Index
> Fetch the complete documentation index at: https://cal.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Calendar view

The calendar view atom is a weekly calendar where users see the entire week at a glance, with available and unavailable time slots clearly marked. It has two modes: an **event type view** that shows the bookable slots of one event type, and a **users view** that overlays the busy times and shared availability of a set of users so a meeting can be placed between them.

## Event type view

Pass `isEventTypeView` together with the event slug and either a username (individual event) or a team id (team event).

### Individual event type

```js theme={null}
import { CalendarView } from "@calcom/atoms";

export default function Calendar( props : CalendarProps ) {
  return (
    <div>
       <CalendarView isEventTypeView username={props.calUsername} eventSlug={props.eventSlug} />
    </div>
  )
}
```

### Team event type

```js theme={null}
import { CalendarView } from "@calcom/atoms";

export default function Calendar( props : CalendarProps ) {
  return (
    <div>
       <CalendarView isEventTypeView teamId={props.teamId} eventSlug={props.eventSlug} />
    </div>
  )
}
```

For a demonstration of the event type view, please refer to the video below.

<p />

<iframe height="315" style={{ width: "100%", maxWidth: "560px" }} src="https://www.loom.com/embed/40ebab9efaa149019ea487e35ff8f656?sid=c6a748c3-0564-4400-ac7c-a17a404c9af6" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="true" />

<p />

Props accepted in the event type view:

| Name            | Required | Description                                                                             |
| :-------------- | :------- | :-------------------------------------------------------------------------------------- |
| isEventTypeView | Yes      | Must be `true` to render the event type view                                            |
| eventSlug       | Yes      | Unique slug created for a particular event                                              |
| username        | Optional | Username of the person whose schedule is displayed, required only for individual events |
| teamId          | Optional | Id of the team the event belongs to, required only for team events                      |

## Users view

Without `isEventTypeView`, the atom renders the busy times of the given users, colored by their order in `userIds`, and their intersected availability as clickable slots. Omit `userIds` to show the authenticated user's own calendar.

```js theme={null}
import { CalendarView } from "@calcom/atoms";

export default function InterviewCalendar( props : InterviewCalendarProps ) {
  return (
    <div>
       <CalendarView
         userIds={props.interviewerIds}
         eventTypeId={props.eventTypeId}
         bookingUid={props.bookingUid}
         timezone={props.meetingTimezone}
         onTimezoneChange={props.onMeetingTimezoneChange}
         showTimezoneControls
         showSlotIntervalControls
         onCellClick={(date) => props.onSlotPicked(date)}
         onEventClick={(event) => props.onBookingOpened(event)}
       />
    </div>
  )
}
```

Props accepted in the users view. All of them are optional.

| Name                     | Description                                                                                                                                                   |
| :----------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| userIds                  | Users whose busy times and availability are displayed. An empty array renders an unavailable calendar; omit it to show the authenticated user's own calendar  |
| weekStart                | First day of the displayed week. Defaults to Sunday                                                                                                           |
| eventTypeId              | Event type the meeting is booked with; its length and slot interval drive the grid                                                                            |
| duration                 | Slot duration in minutes for the hover preview, click grid and availability slots. Defaults to 30                                                             |
| slotInterval             | Minutes between consecutive slot starts. Defaults to the event type's interval, then to the duration. Passing it makes the slot interval picker controlled    |
| bookingUid               | Booking to keep visible and highlighted on the grid, whoever its hosts are                                                                                    |
| initialDate              | Week to open on. Defaults to the current week, or to the week of `bookingUid` when that booking is loaded. Past weeks can be navigated with the header arrows |
| timezone                 | Timezone the grid is drawn in. Passing it makes the calendar controlled; leave it out to start from the authenticated user's timezone                         |
| showTimezoneControls     | Shows an editable meeting timezone above the grid, next to every displayed user's timezone                                                                    |
| onTimezoneChange         | Fires when a meeting timezone is picked, whether or not `timezone` is controlled                                                                              |
| showSlotIntervalControls | Shows a slot interval picker above the grid so the cadence can be changed on the spot                                                                         |
| slotIntervalOptions      | Intervals offered by the picker, in minutes. Defaults to 15, 30 and 60; the current interval is always included                                               |
| onSlotIntervalChange     | Fires when a slot interval is picked, whether or not `slotInterval` is controlled                                                                             |
| onCellClick              | Fires for clicks anywhere on the grid, inside or outside the users' availability, with the clicked `Date`                                                     |
| onEventClick             | Fires when an existing event on the grid is clicked                                                                                                           |