From ecbc09f6c7c18d155102842b7da3d0bd06b4b206 Mon Sep 17 00:00:00 2001
From: Ryukemeister <sahalrajiv6900@gmail.com>
Date: Wed, 24 Sep 2025 19:03:08 +0530
Subject: [PATCH] feat: add docs for calendar view atom

---
 docs/mint.json                        |  3 +-
 docs/platform/atoms/calendar-view.mdx | 61 +++++++++++++++++++++++++++
 docs/platform/atoms/event-type.mdx    |  2 +-
 3 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 docs/platform/atoms/calendar-view.mdx

diff --git a/docs/mint.json b/docs/mint.json
index 195f95df7fcee0..2610de9edab490 100644
--- a/docs/mint.json
+++ b/docs/mint.json
@@ -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"
           ]
         },
         {
diff --git a/docs/platform/atoms/calendar-view.mdx b/docs/platform/atoms/calendar-view.mdx
new file mode 100644
index 00000000000000..52bd1a063ed96d
--- /dev/null
+++ b/docs/platform/atoms/calendar-view.mdx
@@ -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} />
+    </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                                                                                           |
+|:----------------------------|:----------|:-------------------------------------------------------------------------------------------------------|
+| 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
diff --git a/docs/platform/atoms/event-type.mdx b/docs/platform/atoms/event-type.mdx
index 487080bde69da4..d83a7bdf1e6e6d 100644
--- a/docs/platform/atoms/event-type.mdx
+++ b/docs/platform/atoms/event-type.mdx
@@ -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"