Skip to content

feat: add docs for calendar view atom #24049

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Ryukemeister merged 4 commits into from
Sep 26, 2025
Merged

feat: add docs for calendar view atom #24049

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ecbc09f
feat: add docs for calendar view atom
Ryukemeister Sep 24, 2025
e0e3351
Merge branch 'main' into calendar-view-docs
volnei Sep 24, 2025
1df5145
Merge branch 'main' into calendar-view-docs
Ryukemeister Sep 24, 2025
776a7b4
Merge branch 'main' into calendar-view-docs
Ryukemeister Sep 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion docs/mint.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,8 @@
"platform/atoms/event-type",
"platform/atoms/calendar-settings",
"platform/atoms/payment-form",
"platform/atoms/conferencing-apps"
"platform/atoms/conferencing-apps",
"platform/atoms/calendar-view"
]
},
{
Expand Down
61 changes: 61 additions & 0 deletions docs/platform/atoms/calendar-view.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
---
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 isTeamEvent={true} teamId={props.teamId} eventSlug={props.eventSlug} />
Copy link
Contributor

@supalarry supalarry Sep 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Out of scope this PR - maybe for CalendarView v2 we can determine isTeamEvent automatically? Aka if teamId is passed then we internally set isTeamEvent to true.

Copy link
Contributor Author

@Ryukemeister Ryukemeister Sep 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is possible yes, i'll have a look at this one. thanks for the suggestion lauris!

</div>
)
}
```

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

<p></p>

<iframe
Copy link
Contributor

@supalarry supalarry Sep 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Amazing that we have videos!

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
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix copy: references the wrong atom.

Change “create event type atom” to “calendar view atom”.

-Below is a list of props that can be passed to the create event type atom
+Below is a list of props that can be passed to the calendar view atom
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
Below is a list of props that can be passed to the create event type atom
Below is a list of props that can be passed to the calendar view atom
🤖 Prompt for AI Agents 
In docs/platform/atoms/calendar-view.mdx around line 54, the copy incorrectly
refers to the "create event type atom"; update the sentence to reference the
correct atom by changing "create event type atom" to "calendar view atom" so it
reads: "Below is a list of props that can be passed to the calendar view atom."


| Name | Required | Description |
|:----------------------------|:----------|:-------------------------------------------------------------------------------------------------------|
| username | Yes | Username of the person whose schedule is to be displayed |
| eventSlug | Yes | Unique slug created for a particular event | |
| isTeamEvent | No | Boolean indicating if it is a team event, to be passed only for team events |
| teamId | No | The id of the team for which the event is created, to be passed only for team events |
Comment on lines +56 to +61
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Clarify required props based on usage (individual vs team).

Table marks username as required but team example omits it; clarify conditional requirements.

 | Name                       | Required | Description                                                                                           |
 |:----------------------------|:----------|:-------------------------------------------------------------------------------------------------------|
-| username                   | Yes      | Username of the person whose schedule is to be displayed                                              |
+| username                   | Yes (individual events) | Username of the person whose schedule is to be displayed                                     |
 | eventSlug                  | Yes      | Unique slug created for a particular event                                                            |                                                |
 | isTeamEvent                | No       | Boolean indicating if it is a team event, to be passed only for team events                                                                     |
-| teamId                | No       | The id of the team for which the event is created, to be passed only for team events                                                                     |
+| teamId                | Yes (team events) | The id of the team for which the event is created; required when `isTeamEvent` is true                        |
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
| Name | Required | Description |
|:----------------------------|:----------|:-------------------------------------------------------------------------------------------------------|
| username | Yes | Username of the person whose schedule is to be displayed |
| eventSlug | Yes | Unique slug created for a particular event | |
| isTeamEvent | No | Boolean indicating if it is a team event, to be passed only for team events |
| teamId | No | The id of the team for which the event is created, to be passed only for team events |
| Name | Required | Description |
|:----------------------------|:----------|:-------------------------------------------------------------------------------------------------------|
| username | Yes (individual events) | Username of the person whose schedule is to be displayed |
| eventSlug | Yes | Unique slug created for a particular event |
| isTeamEvent | No | Boolean indicating if it is a team event, to be passed only for team events |
| teamId | Yes (team events) | The id of the team for which the event is created; required when `isTeamEvent` is true |
🤖 Prompt for AI Agents 
In docs/platform/atoms/calendar-view.mdx around lines 56 to 61, the props table
incorrectly marks username as universally required while examples show it
omitted for team events; update the table to reflect conditional requirements:
mark username as "Required for individual events" (or "Cond. required") and
teamId as "Required for team events", clarify isTeamEvent indicates which of the
two is required, and adjust the Description column to state when each prop must
be provided; also update or add brief example notes beneath the table to
illustrate the individual vs. team usage.

2 changes: 1 addition & 1 deletion docs/platform/atoms/event-type.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -332,7 +332,7 @@ Below video shows a demonstration of the all the options you get in the advanced
<iframe
height="315"
style={{ width: "100%", maxWidth: "560px" }}
src="https://www.loom.com/embed/e0121b51920544eea92251dba99245fa?sid=ac627de7-5673-41b4-aa78-c6c9e439bdb5"
src="https://www.loom.com/embed/7a03c4a453ca401ab787b2db98728f31?sid=8cdc6398-0017-41c8-a0a1-8fa31f80616c"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen="true"
Expand Down
Loading