vynte-infra/calendar
2
0
Fork 0
Code Issues Pull Requests Actions 2.0k 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/developing/guides/automation/webhooks.mdx
+1 -1
View File
@@ -4,7 +4,7 @@ title: "Webhooks"
Webhooks offer a great way to automate the flow with other apps when invitees schedule, cancel or reschedule events, or when the meeting ends.
<iframe width="560" height="315" src="https://www.youtube.com/embed/Yy9me5E09LA?si=_2Mz-CKL2ajsFivd" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<iframe style={{ width: "100%", maxWidth: "560px" }} height="315" src="https://www.youtube.com/embed/Yy9me5E09LA?si=_2Mz-CKL2ajsFivd" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
The webhook subscription allows you to listen to specific trigger events, such as when a booking has been scheduled, for example. You can always listen to the webhook by providing a custom subscriber URL with your own development work. However, if you wish to trigger automations without any development work, you can use the integration with Zapier which connects Cal.com to your apps.
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).