Rajiv SahalandGitHub
09ee39a3d8
* init: upcoming bookings atom * add comments * fix: better naming * fixup * fix: use `usePrefetch` hook * add comment- for myself * chore: add changesets * fix: ignore isTeamEvent prop if we have teamId * chore: update docs * chore: implement PR feedback * refactor: remove all unnecessary props * update fetch bookings count
60 lines
2.4 KiB
Plaintext
60 lines
2.4 KiB
Plaintext
---
|
|
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 | |