---
title: "Calendar view"
---

The calendar view atom is basically a weekly calendar view wherein users can see entire week at a glance, clearly showing both available and unavailable time slots. This view is designed to provide a comprehensive and easy-to-read schedule, helping users quickly identify open slots for booking or planning.

## Individual event type

Below code snippet can be used to render the calendar view atom for an individual event

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

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

## Team event type

Below code snippet can be used to render the calendar view atom for a team event

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

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

For a demonstration of the calendar view atom, please refer to the video below.

<p></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"
    ></iframe>

<p></p>

Below is a list of props that can be passed to the create event type atom

| Name                       | Required | Description                                                                                           |
|:----------------------------|:----------|:-------------------------------------------------------------------------------------------------------|
| eventSlug                  | Yes      | Unique slug created for a particular event                                                            |   
| username                   | Optional     | Username of the person whose schedule is to be displayed, required only for individual events                                          |                                             |                                        |
| teamId                | Optional       | Id of the team for which the event is created, required only for team events                                                                     |