vynte-infra/calendar
2
0
Fork 0
Code Issues Pull Requests Actions 1.9k Packages Projects Releases Wiki Activity

fix: iframe issue for atoms documentation (#17570)

Browse Source 
* fix syntax for code examples

* update iframe styling
This commit is contained in:
Rajiv Sahal
2024-11-11 08:28:02 +00:00
committed by GitHub
parent ce373c475c
commit 838e8b9e89
10 changed files with 45 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/platform/atoms/apple-calendar-connect.mdx
+13 -6
View File
@@ -11,9 +11,9 @@ import { Connect } from "@calcom/atoms";
export default function ConnectCalendar() {
return (
<main>
<>
<Connect.AppleCalendar />
</main>
</>
);
}
```
@@ -22,7 +22,14 @@ For a demonstration of the Apple calendar connect integration, please refer to t
<p></p>
<iframe width="560" height="315" src="https://www.loom.com/embed/0db65d94754443ae91fed28f9bc10509" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<iframe
style={{ width: "100%", maxWidth: "560px" }}
height="315"
src="https://www.loom.com/embed/0db65d94754443ae91fed28f9bc10509?sid=8389e585-ab9c-457f-944f-82ec7e595f13"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen="true"
></iframe>
<p></p>
@@ -37,9 +44,9 @@ import { Connect } from "@calcom/atoms";
export default function ConnectCalendar() {
return (
<main>
<>
<Connect.AppleCalendar isMultiCalendar={true} />
</main>
</>
);
}
```
@@ -49,8 +56,8 @@ For a demonstration of the Apple calendar connect integration for multiple users
<p></p>
<iframe
width="560"
height="315"
style={{ width: "100%", maxWidth: "560px" }}
src="https://www.loom.com/embed/5844146fbcf840f99e35f9620a34186d"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
docs/platform/atoms/availability-settings.mdx
+4 -4
View File
@@ -26,7 +26,7 @@ export default function Availability() {
console.log("Deleted schedule successfully");
}}
/>
<>
</>
)
}
```
@@ -35,8 +35,8 @@ For a demonstration of the availability settings atom, please refer to the video
<p></p>
<iframe
width="560"
height="315"
style={{ width: "100%", maxWidth: "560px" }}
src="https://www.loom.com/embed/6fd65789f5744227b4ea6d0189d4fc67?sid=544a6afd-2836-4704-aa56-e801cbd93cbc"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -64,7 +64,7 @@ export default function Availability() {
console.log("Deleted schedule successfully");
}}
/>
<>
</>
)
}
```
@@ -74,8 +74,8 @@ For a demonstration of the availability settings atom with date overrides, pleas
<p></p>
<iframe
width="560"
height="315"
style={{ width: "100%", maxWidth: "560px" }}
src="https://www.loom.com/embed/aa9ba47cbc284496ac51c26e172c7b12?sid=6d2b5bb3-d2eb-4a95-adb5-c67d863d4e34"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
docs/platform/atoms/booker.mdx
+4 -4
View File
@@ -19,7 +19,7 @@ export default function Booker( props : BookerProps ) {
console.log("booking created successfully");
}}
/>
<>
</>
)
}
```
@@ -29,8 +29,8 @@ For a demonstration of the booker atom, please refer to the video below.
<p></p>
<iframe
width="560"
height="315"
style={{ width: "100%", maxWidth: "560px" }}
src="https://www.loom.com/embed/73dbb943cef0409c9bc57d5050453a6e?sid=45575c09-4786-486e-99f9-6cf7f4e8db50"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -57,7 +57,7 @@ export default function Booker( props : BookerProps ) {
console.log("booking created successfully");
}}
/>
<>
</>
)
}
```
@@ -67,8 +67,8 @@ For a demonstration of the booker atom along with calendar overlay, please refer
<p></p>
<iframe
width="560"
height="315"
style={{ width: "100%", maxWidth: "560px" }}
src="https://www.loom.com/embed/554e9ef9f7874cbe9d179b63cc2c601b?sid=fc185a1c-1fb9-4705-a222-8ccd131bd5b6"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
docs/platform/atoms/calendar-settings.mdx
+3 -3
View File
@@ -13,7 +13,7 @@ export default function CalendarSettingsComponent() {
return (
<>
<CalendarSettings />
<>
</>
)
}
```
@@ -64,7 +64,7 @@ export default function DestinationCalendars() {
return (
<>
<DestinationCalendarSettings classNames="mx-5" statusLoader={loadingStatus} />
<>
</>
)
}
```
@@ -91,7 +91,7 @@ export default function SelectedCalendars( props : SelectedCalendarsProps ) {
return (
<>
<SelectedCalendarSettings classNames="mx-5 mb-6" />
<>
</>
)
}
```
docs/platform/atoms/event-type.mdx
+5 -5
View File
@@ -33,8 +33,8 @@ For a demonstration of the create event type atom, please refer to the video bel
<p></p>
<iframe
width="560"
height="315"
style={{ width: "100%", maxWidth: "560px" }}
src="https://www.loom.com/embed/b0c5d0599b2c48cdbba288b0b772a676?sid=5a1dbf17-8fc4-41f1-8d77-b36332546989"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -75,8 +75,8 @@ For a demonstration of the create event type atom, please refer to the video bel
<p></p>
<iframe
width="560"
height="315"
style={{ width: "100%", maxWidth: "560px" }}
src="https://www.loom.com/embed/281c18a1a61c4c44b0bdfd3c88ced8e8?sid=ca68ef1d-eb08-4e23-bd94-9a22a8f7aa7d"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -135,8 +135,8 @@ For a demonstration of the event type settings atom, please refer to the video b
<p></p>
<iframe
width="560"
height="315"
style={{ width: "100%", maxWidth: "560px" }}
src="https://www.loom.com/embed/2e94c5699dec4fd09d7804d2fd39d71e?sid=04ea09e9-25c3-43cc-be07-33b4b2f32c17"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -209,8 +209,8 @@ Below video shows a demonstration of the limits tab.
<p></p>
<iframe
width="560"
height="315"
style={{ width: "100%", maxWidth: "560px" }}
src="https://www.loom.com/embed/ac02d393c923413aaa97ab29b43eed48?sid=c130e621-d8e2-4e22-9614-fee97053a194"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -228,8 +228,8 @@ Below video shows a demonstration of the all the options you get in the advanced
<p></p>
<iframe
width="560"
height="315"
style={{ width: "100%", maxWidth: "560px" }}
src="https://www.loom.com/embed/e0121b51920544eea92251dba99245fa?sid=ac627de7-5673-41b4-aa78-c6c9e439bdb5"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
docs/platform/atoms/google-calendar-connect.mdx
+6 -6
View File
@@ -11,9 +11,9 @@ import { Connect } from "@calcom/atoms";
export default function Connect() {
return (
<main>
<>
<Connect.GoogleCalendar />
</main>
</>
)
}
```
@@ -23,8 +23,8 @@ For a demonstration of the Google calendar connect integration, please refer to
<p></p>
<iframe
width="560"
height="315"
style={{ width: "100%", maxWidth: "560px" }}
src="https://www.loom.com/embed/dcfcaf8c25754b8daec8fe309fbf7c7c?sid=3181cba5-2e16-4f6e-99de-4408a5109c37"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -42,9 +42,9 @@ import { Connect } from "@calcom/atoms";
export default function Connect() {
return (
<main>
<>
<Connect.GoogleCalendar isMultiCalendar={true} />
</main>
</>
)
}
```
@@ -54,8 +54,8 @@ For a demonstration of the Google calendar connect integration for multiple user
<p></p>
<iframe
width="560"
height="315"
style={{ width: "100%", maxWidth: "560px" }}
src="https://www.loom.com/embed/7a34123b3bd94fbc80809392aab5f712?sid=12bacd7e-62b2-40aa-9fd6-30d69ab22e0a"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
docs/platform/atoms/outlook-calendar-connect.mdx
+6 -6
View File
@@ -11,9 +11,9 @@ import { Connect } from "@calcom/atoms";
export default function ConnectCalendar() {
return (
<main>
<>
<Connect.OutlookCalendar />
</main>
</>
)
}
```
@@ -23,8 +23,8 @@ For a demonstration of the Google calendar connect integration, please refer to
<p></p>
<iframe
width="560"
height="315"
style={{ width: "100%", maxWidth: "560px" }}
src="https://www.loom.com/embed/2da4cdfe8d314f74a55e98121dcdb7bd?sid=cdc73356-13c0-49ba-90a3-91d885251457"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -42,9 +42,9 @@ import { Connect } from "@calcom/atoms";
export default function ConnectCalendar() {
return (
<main>
<>
<Connect.OutlookCalendar isMultiCalendar={true} />
</main>
</>
)
}
```
@@ -54,8 +54,8 @@ For a demonstration of the Outlook calendar connect integration for multiple use
<p></p>
<iframe
width="560"
height="315"
style={{ width: "100%", maxWidth: "560px" }}
src="https://www.loom.com/embed/b90c21c2bc9c478f9c28c1ee62bb8568?sid=fe1af433-e6e6-4149-9fe2-d3cdbc7d6ca1"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
docs/platform/atoms/payment-form.mdx
+2 -2
View File
@@ -23,8 +23,8 @@ For a demonstration of the Payment form, please refer to the video below.
<p></p>
<iframe
width="560"
height="315"
style={{ width: "100%", maxWidth: "560px" }}
src="https://www.loom.com/embed/13cf66446b554d5c9405f9d4fef53f47?sid=d2994785-027e-4de7-937a-3b90fc357182"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -126,8 +126,8 @@ Below video shows a demonstration of how we combined the event types atom and pa
<p></p>
<iframe
width="560"
height="315"
style={{ width: "100%", maxWidth: "560px" }}
src="https://www.loom.com/embed/0c1bc59da8c34d83b8dfcbd7557f7eaa?sid=058cf5df-1e3a-4fe3-b721-8c5a9eac4f24"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
docs/platform/booking-redirects.mdx
+1
View File
@@ -35,6 +35,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string
return (
<p>{booking.title}</p>
)
};
```
An example implementation can be found [here](https://github.com/calcom/cal.com/blob/main/packages/platform/examples/base/src/pages/%5BbookingUid%5D.tsx).