|
| 1 | +--- |
| 2 | +title: "Calendar view" |
| 3 | +--- |
| 4 | + |
| 5 | +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. |
| 6 | + |
| 7 | +## Individual event type |
| 8 | + |
| 9 | +Below code snippet can be used to render the calendar view atom for an individual event |
| 10 | + |
| 11 | +```js |
| 12 | +import { CalendarView } from "@calcom/atoms"; |
| 13 | + |
| 14 | +export default function Booker( props : BookerProps ) { |
| 15 | + return ( |
| 16 | + <div> |
| 17 | + <CalendarView username={props.calUsername} eventSlug={props.eventSlug} /> |
| 18 | + </div> |
| 19 | + ) |
| 20 | +} |
| 21 | +``` |
| 22 | + |
| 23 | +## Team event type |
| 24 | + |
| 25 | +Below code snippet can be used to render the calendar view atom for a team event |
| 26 | + |
| 27 | +```js |
| 28 | +import { CalendarView } from "@calcom/atoms"; |
| 29 | + |
| 30 | +export default function Booker( props : BookerProps ) { |
| 31 | + return ( |
| 32 | + <div> |
| 33 | + <CalendarView isTeamEvent={true} teamId={props.teamId} eventSlug={props.eventSlug} /> |
| 34 | + </div> |
| 35 | + ) |
| 36 | +} |
| 37 | +``` |
| 38 | + |
| 39 | +For a demonstration of the calendar view atom, please refer to the video below. |
| 40 | + |
| 41 | +<p></p> |
| 42 | + |
| 43 | + <iframe |
| 44 | + height="315" |
| 45 | + style={{ width: "100%", maxWidth: "560px" }} |
| 46 | + src="https://www.loom.com/embed/40ebab9efaa149019ea487e35ff8f656?sid=c6a748c3-0564-4400-ac7c-a17a404c9af6" |
| 47 | + frameborder="0" |
| 48 | + allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" |
| 49 | + allowfullscreen="true" |
| 50 | + ></iframe> |
| 51 | + |
| 52 | +<p></p> |
| 53 | + |
| 54 | +Below is a list of props that can be passed to the create event type atom |
| 55 | + |
| 56 | +| Name | Required | Description | |
| 57 | +|:----------------------------|:----------|:-------------------------------------------------------------------------------------------------------| |
| 58 | +| username | Yes | Username of the person whose schedule is to be displayed | |
| 59 | +| eventSlug | Yes | Unique slug created for a particular event | | |
| 60 | +| isTeamEvent | No | Boolean indicating if it is a team event, to be passed only for team events | |
| 61 | +| teamId | No | The id of the team for which the event is created, to be passed only for team events | |
0 commit comments