feat: add docs for calendar view atom (#24049)

Co-authored-by: Volnei Munhoz <volnei.munhoz@gmail.com>

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"
           ]
         },
         {

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                                                                     |

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"