feat: add docs for calendar view atom#24049
Conversation
WalkthroughThis change updates documentation. It introduces a new Calendar view atom page and adds it to the docs navigation by updating docs/mint.json. The JSON file formatting is adjusted with a trailing comma to include the new entry. Additionally, the event-type page’s advanced tab Loom embed URL is updated. No code or API changes are included. Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
keithwillcode
added
core
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (5)
docs/platform/atoms/event-type.mdx (1)
332-339: Add accessible title to iframe (a11y).Provide a descriptive title so screen readers can identify the video content.
<iframe height="315" style={{ width: "100%", maxWidth: "560px" }} src="https://www.loom.com/embed/7a03c4a453ca401ab787b2db98728f31?sid=8cdc6398-0017-41c8-a0a1-8fa31f80616c" + title="Event Type Advanced tab demo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="true" ></iframe>docs/platform/atoms/calendar-view.mdx (4)
5-5: Tighten grammar in intro sentence.Add “the” and simplify phrasing.
-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. +The calendar view atom provides a weekly overview where users can see the entire week at a glance, clearly showing available and unavailable time slots. This view is designed to be easy to scan, helping users quickly identify open slots for booking or planning.
11-21: Use TSX fence and make the example self-contained (no undefined type).Current block is labeled JS but uses TS types and an undefined BookerProps.
-```js +```tsx import { CalendarView } from "@calcom/atoms"; -export default function Booker( props : BookerProps ) { +export default function Booker(props: { calUsername: string; eventSlug: string }) { return ( <div> <CalendarView username={props.calUsername} eventSlug={props.eventSlug} /> </div> ) }--- `27-37`: **Align team example with TSX and self-contained props.** Match the first example’s TSX fence and define the props inline. ```diff -```js +```tsx import { CalendarView } from "@calcom/atoms"; -export default function Booker( props : BookerProps ) { +export default function Booker(props: { teamId: number; eventSlug: string }) { return ( <div> <CalendarView isTeamEvent={true} teamId={props.teamId} eventSlug={props.eventSlug} /> </div> ) }--- `43-51`: **Add accessible title to iframe (a11y).** Provide a descriptive title. ```diff <iframe height="315" style={{ width: "100%", maxWidth: "560px" }} src="https://www.loom.com/embed/40ebab9efaa149019ea487e35ff8f656?sid=c6a748c3-0564-4400-ac7c-a17a404c9af6" + title="Calendar View atom demo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="true" ></iframe>
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (3)
docs/mint.json(1 hunks)docs/platform/atoms/calendar-view.mdx(1 hunks)docs/platform/atoms/event-type.mdx(1 hunks)
🔇 Additional comments (1)
docs/mint.json (1)
216-218: Navigation entry confirmed — file exists and path matches
docs/platform/atoms/calendar-view.mdx exists and is referenced in docs/mint.json ("platform/atoms/calendar-view" at line 217).
|
|
||
| <p></p> | ||
|
|
||
| Below is a list of props that can be passed to the create event type atom |
There was a problem hiding this comment.
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.
| 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 | No newline at end of file |
There was a problem hiding this comment.
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.
| | 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.
|
@coderabbitai update PR description |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: Length of output: 112 🏁 Script executed: Length of output: 509 🏁 Script executed: Length of output: 1302 🏁 Script executed: Length of output: 44 @Ryukemeister I've successfully updated the PR description with comprehensive details about the changes made. The description now includes: ✅ Overview section explaining what the Calendar view atom is The updated description provides clear context for reviewers about:
This should help reviewers understand the scope and purpose of the documentation additions for the Calendar view atom. |
| export default function Booker( props : BookerProps ) { | ||
| return ( | ||
| <div> | ||
| <CalendarView isTeamEvent={true} teamId={props.teamId} eventSlug={props.eventSlug} /> |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
this is possible yes, i'll have a look at this one. thanks for the suggestion lauris!
|
|
||
| <p></p> | ||
|
|
||
| <iframe |
There was a problem hiding this comment.
Amazing that we have videos!
E2E results are ready! |
4 participants
Overview
This PR adds comprehensive documentation for the Calendar view atom, a new component that provides a weekly calendar overview for Cal.com platform users.
Changes Made
📚 Documentation Added
🔧 Configuration Updates
Features Documented
The Calendar view atom provides:
Props Documentation
This documentation will help developers integrate the Calendar view atom into their Cal.com platform applications.