2022-03-31 08:45:47 +00:00
< html >
< head >
2022-12-13 07:23:26 +00:00
< title > Embed Playground< / title >
2022-03-31 08:45:47 +00:00
<!-- <link rel="prerender" href="http://localhost:3000/free"> -->
2022-05-05 14:29:49 +00:00
<!-- <script src="./src/embed.ts" type="module"></script> -->
2022-03-31 08:45:47 +00:00
< script >
2023-03-28 18:17:40 +00:00
function generateRandomHexColor() {
// Generate a random integer between 0 and 16777215 (FFFFFF in hex)
const randomInt = Math.floor(Math.random() * 16777216);
// Convert the integer to a hex string with 6 digits and add leading zeros if necessary
2023-05-16 19:41:47 +00:00
const hexString = randomInt.toString(16).padStart(6, "0");
2023-03-28 18:17:40 +00:00
// Return the hex string with a '#' prefix
return `#${hexString}`;
}
2022-03-31 08:45:47 +00:00
if (!location.search.includes("nonResponsive")) {
document.write('< meta name = "viewport" content = "width=device-width" / > ');
}
2023-04-13 18:26:31 +00:00
(() => {
2022-04-25 04:33:00 +00:00
const url = new URL(document.URL);
// Only run the example specified by only=, avoids distraction and faster to test.
2023-04-13 18:26:31 +00:00
const only = (window.only = url.searchParams.get("only"));
const elementIdentifier = only !== "all" ? only.replace("ns:", "") : null;
2022-07-28 10:50:25 +00:00
if (elementIdentifier) {
2023-04-13 18:26:31 +00:00
location.hash = "#cal-booking-place-" + elementIdentifier + "-iframe";
2022-04-25 04:33:00 +00:00
}
2023-04-13 18:26:31 +00:00
})();
2022-03-31 08:45:47 +00:00
< / script >
< script >
(function (C, A, L) {
2022-04-04 15:44:04 +00:00
let p = function (a, ar) {
a.q.push(ar);
};
2022-03-31 08:45:47 +00:00
let d = C.document;
C.Cal =
C.Cal ||
function () {
let cal = C.Cal;
let ar = arguments;
if (!cal.loaded) {
cal.ns = {};
cal.q = cal.q || [];
d.head.appendChild(d.createElement("script")).src = A;
cal.loaded = true;
}
if (ar[0] === L) {
const api = function () {
2022-04-04 15:44:04 +00:00
p(api, arguments);
2022-03-31 08:45:47 +00:00
};
2022-04-04 15:44:04 +00:00
const namespace = ar[1];
2022-03-31 08:45:47 +00:00
api.q = api.q || [];
2022-04-04 15:44:04 +00:00
typeof namespace === "string" ? (cal.ns[namespace] = api) & & p(api, ar) : p(cal, ar);
return;
2022-03-31 08:45:47 +00:00
}
2022-04-04 15:44:04 +00:00
p(cal, ar);
2022-03-31 08:45:47 +00:00
};
2022-05-06 15:56:26 +00:00
})(window, "//localhost:3000/embed/embed.js", "init");
2022-03-31 08:45:47 +00:00
< / script >
< style >
2022-04-08 05:33:24 +00:00
body {
background: linear-gradient(
90deg,
rgba(120, 116, 186, 1) 0%,
rgba(221, 221, 255, 1) 41%,
rgba(148, 232, 249, 1) 100%
);
}
2022-12-13 07:23:26 +00:00
.inline-embed-container {
2022-03-31 08:45:47 +00:00
/* border: 1px solid black; */
margin-bottom: 5px;
2023-04-13 18:26:31 +00:00
border-bottom: 1px solid;
2022-03-31 08:45:47 +00:00
}
.loader {
color: green;
}
2022-04-14 02:47:34 +00:00
* {
2022-04-25 04:33:00 +00:00
--cal-brand-color: gray;
2022-04-14 02:47:34 +00:00
}
2022-03-31 08:45:47 +00:00
< / style >
< / head >
< body >
2023-07-18 16:46:35 +00:00
< span style = "display: block" > < a href = "?color-scheme=dark" > With Dark Color Scheme for the Page< / a > < / span >
2023-04-13 18:26:31 +00:00
< span style = "display: block" > < a href = "?nonResponsive" > Non responsive version of this page here< / a > < / span >
< span style = "display: block"
>< a href = "?only=prerender-test" > Go to Pre-render test page only< / a > < small > < /small
>< / span >
2023-07-18 16:46:35 +00:00
< button onclick = "document.documentElement.style.colorScheme='dark'" > Toggle Dark Scheme< / button >
< button onclick = "document.documentElement.style.colorScheme='light'" > Toggle Light Scheme< / button >
2022-03-31 08:45:47 +00:00
< div >
2022-12-13 07:23:26 +00:00
< script >
if (only === "all" || only === "prerender-test") {
document.write(`
< button data-cal-namespace = "prerendertestLightTheme" data-cal-config = '{"theme":"light"}' data-cal-link = "free?light&popup" > Book with Free User[Light Theme]< / button >
< i
>Corresponding Cal Link is being preloaded. Assuming that it would take you some time to click this
as you are reading this text, it would open up super fast[If you are running a production build on
local]. Try switching to slow 3G or create a custom Network configuration which is impossibly
slow< /i
2023-04-13 18:26:31 +00:00
>`);
2022-12-13 07:23:26 +00:00
}
2023-04-13 18:26:31 +00:00
< / script >
2022-12-13 07:23:26 +00:00
< / div >
2023-04-13 18:26:31 +00:00
< span style = "display: block"
>< a href = "?only=all" > Render All embeds together< / a > < small > - It would be slow to load< / small > < /span
>
2022-12-13 07:23:26 +00:00
< div >
2023-03-28 18:17:40 +00:00
< a href = "?only=ns:floatingButton" > Floating Popup< / a >
2022-12-13 07:23:26 +00:00
< h2 > Popup Examples< / h2 >
2023-04-13 18:26:31 +00:00
< button data-cal-namespace = "popupAutoTheme" data-cal-link = "free" >
Book with Free User[Auto Theme]
< / button >
< button data-cal-namespace = "popupDarkTheme" data-cal-config = '{"theme":"dark"}' data-cal-link = "free" >
Book with Free User[Dark Theme]
< / button >
< button
data-cal-namespace="popupTeamLinkLightTheme"
data-cal-config='{"theme":"light"}'
data-cal-link="team/seeded-team/collective-seeded-team-event">
Book with Test Team[Light Theme]
< / button >
< button
data-cal-namespace="popupTeamLinkDarkTheme"
data-cal-config='{"theme":"dark"}'
data-cal-link="team/seeded-team/collective-seeded-team-event">
Book with Test Team[Dark Theme]
< / button >
< button data-cal-namespace = "popupTeamLinksList" data-cal-link = "team/seeded-team/" >
See Team Links [Auto Theme]
< / button >
2022-12-18 19:24:44 +00:00
< script >
2023-04-13 18:26:31 +00:00
let popupRescheduleId =
new URL(document.URL).searchParams.get("popupRescheduleId") || "qm3kwt3aTnVD7vmP9tiT2f";
document.write(
`< button data-cal-namespace = "popupReschedule" data-cal-link = "reschedule/${popupRescheduleId}" > Reschedule Event[Auto Theme]< / button > `
);
2022-12-18 19:24:44 +00:00
< / script >
2023-04-13 18:26:31 +00:00
< button data-cal-namespace = "popupPaidEvent" data-cal-link = "pro/paid" >
Book Paid Event [Auto Theme]
< / button >
< button data-cal-namespace = "popupHideEventTypeDetails" data-cal-link = "free/30min" >
Book Free Event [Auto Theme][uiConfig.hideEventTypeDetails=true]
< / button >
< button data-cal-namespace = "routingFormAuto" data-cal-link = "forms/948ae412-d995-4865-875a-48302588de03" >
Book through Routing Form [Auto Theme]
< / button >
< button
data-cal-namespace="routingFormDark"
data-cal-config='{"theme":"dark"}'
data-cal-link="forms/948ae412-d995-4865-875a-48302588de03">
Book through Routing Form [Dark Theme]
< / button >
2023-06-14 09:22:44 +00:00
< button data-cal-namespace = "popupPaidEvent" data-cal-config = '{"layout":"week_view"}' data-cal-link = "pro/paid" >
Book Paid Event - weekly view
< / button >
< button data-cal-namespace = "popupPaidEvent" data-cal-config = '{"layout":"column_view"}' data-cal-link = "pro/paid" >
Book Paid Event - column view
< / button >
2022-12-13 07:23:26 +00:00
<!-- <div>
2022-04-14 02:47:34 +00:00
< h2 > Embed for Pages behind authentication< / h2 >
< button data-cal-namespace = "upcomingBookings" data-cal-config = '{"theme":"dark"}' data-cal-link = "bookings/upcoming" > Show Upcoming Bookings< / button >
2022-12-13 07:23:26 +00:00
< / div > -->
2022-03-31 08:45:47 +00:00
< / div >
2022-12-13 07:23:26 +00:00
< h2 > Inline Embed Examples< / h2 >
2022-03-31 08:45:47 +00:00
< div id = "namespaces-test" >
2022-12-13 07:23:26 +00:00
< div class = "inline-embed-container" id = "cal-booking-place-default" >
< h3 >
2023-06-06 23:52:13 +00:00
< a href = "?only=ns:default" > [Dark Theme][Guests(janedoe@example.com and test@example.com)](Default Namespace)< / a >
2022-12-13 07:23:26 +00:00
< / h3 >
2023-05-16 19:41:47 +00:00
< button onclick = "Cal('ui',{theme:'light'})" > Toggle to Light< / button >
2023-06-26 15:24:19 +00:00
< button onclick = "Cal('ui',{layout:'week_view'})" > Toggle to Week View< / button >
< button onclick = "Cal('ui',{layout:'month_view'})" > Toggle to Month View< / button >
< button onclick = "Cal('ui',{layout:'column_view'})" > Toggle to Column View< / button >
2022-04-04 15:44:04 +00:00
< i class = "last-action" > You would see last Booking page action in my place < / i >
2023-04-13 18:26:31 +00:00
< div >
< div class = "place" style = "width: 100%" > < / div >
2022-12-13 07:23:26 +00:00
< div class = "loader" id = "cal-booking-loader-" > < / div >
2022-03-31 08:45:47 +00:00
< / div >
< / div >
2022-12-13 07:23:26 +00:00
< div class = "inline-embed-container" id = "cal-booking-place-second" >
< h3 > < a href = "?only=ns:second" > [Custom Styling]< / a > < / h3 >
2022-04-04 15:44:04 +00:00
< div class = "place" >
2023-04-13 18:26:31 +00:00
< div >
If you render booking embed in me, I won't restrict you. The entire page is yours. Content is by
default aligned center
< / div >
2023-04-18 12:53:46 +00:00
< button
onclick="(function () {Cal.ns.second('ui', {cssVarsPerTheme:{light:{'cal-border-booker':'green', 'cal-border-booker-width':'20px'},dark:{'cal-border-booker':'red', 'cal-border-booker-width':'5px'}}})})()">
Change booker border for dark and light themes
< / button >
2023-05-23 08:16:56 +00:00
< button
onclick="(function () {Cal.ns.second('ui', {cssVarsPerTheme:{light:{'cal-brand':'green'},dark:{'cal-brand':'red'}}})})()">
Change Brand color for dark and light theme
< / button >
2022-03-31 08:45:47 +00:00
< button
onclick="(function () {Cal.ns.second('ui', {styles:{eventTypeListItem:{backgroundColor:'blue'}}})})()">
2023-04-18 12:53:46 +00:00
Change < code > eventTypeListItem< / code > bg color[Deprecated]
2022-03-31 08:45:47 +00:00
< / button >
< button onclick = "(function () {Cal.ns.second('ui', {styles:{body:{background:'red'}}})})()" >
2023-04-18 12:53:46 +00:00
Change < code > body< / code > bg color[Deprecated]
2022-04-25 04:33:00 +00:00
< / button >
2023-05-16 19:41:47 +00:00
< button onclick = "(function () {Cal.ns.second('ui', {styles:{align:'left'}})})()" >
Align left[Deprecated]
< / button >
2022-04-25 04:33:00 +00:00
< button onclick = "(function () {Cal.ns.second('ui', {styles:{align:'center'}})})()" >
2023-04-18 12:53:46 +00:00
Align Center[Deprecated]
2022-04-25 04:33:00 +00:00
< / button >
2023-04-13 18:26:31 +00:00
< button
onclick="(function () {Cal.ns.second('ui', {styles:{enabledDateButton: {
2023-03-28 18:17:40 +00:00
backgroundColor: generateRandomHexColor(),
2022-04-25 04:33:00 +00:00
},
disabledDateButton: {
2023-03-28 18:17:40 +00:00
backgroundColor: generateRandomHexColor(),
2022-04-25 04:33:00 +00:00
},}})})()">
2023-04-18 12:53:46 +00:00
Change 'enabledDateButton` and `disabledDateButton` background Color[Deprecated]
2022-04-25 04:33:00 +00:00
< / button >
2022-03-31 08:45:47 +00:00
< / div >
< / div >
2022-12-13 07:23:26 +00:00
< div class = "inline-embed-container" id = "cal-booking-place-third" >
< h3 > < a href = "?only=ns:third" > [Custom Styling - Transparent Background]< / a > < / h3 >
2022-04-04 15:44:04 +00:00
< div style = "width: 30%" class = "place" >
< div > If you render booking embed in me, I would not let you be more than 30% wide< / div >
< / div >
< / div >
2022-12-13 07:23:26 +00:00
< div class = "inline-embed-container" id = "cal-booking-place-fourth" >
< h3 > < a href = "?only=ns:fourth" > [Team Event Test][inline taking entire width]< / a > < / h3 >
2022-04-04 15:44:04 +00:00
< div style = "width: 30%" class = "place" >
2022-03-31 08:45:47 +00:00
< div > If you render booking embed in me, I would not let you be more than 30% wide< / div >
< / div >
< / div >
< / div >
2022-12-13 07:23:26 +00:00
< div class = "inline-embed-container" id = "cal-booking-place-fifth" >
< h3 > < a href = "?only=ns:fifth" > [Team Event Test][inline along with some content]< / a > < / h3 >
2023-04-13 18:26:31 +00:00
< div style = "display: flex; align-items: center" >
< h4 style = "width: 30%" > On the right side you can book a team meeting =>< / h4 >
< div style = "width: 70%" class = "place" > < / div >
2022-04-25 04:33:00 +00:00
< / div >
< / div >
2022-12-13 07:23:26 +00:00
< div class = "inline-embed-container" id = "cal-booking-place-inline-routing-form" >
< h3 > < a href = "?only=inline-routing-form" > Inline Routing Form< / a > < / h3 >
2023-04-13 18:26:31 +00:00
< div style = "display: flex; align-items: center" >
< h4 style = "width: 30%" > On the right side you can book a team meeting =>< / h4 >
< div style = "width: 70%" class = "place" > < / div >
2022-07-28 10:50:25 +00:00
< / div >
< / div >
2022-12-13 07:23:26 +00:00
< div class = "inline-embed-container" id = "cal-booking-place-hideEventTypeDetails" >
< h3 > < a href = "?only=hideEventTypeDetails" > Hide EventType Details Test< / a > < / h3 >
2023-04-13 18:26:31 +00:00
< div class = "place" > < / div >
2022-12-13 07:23:26 +00:00
< / div >
2023-05-16 19:41:47 +00:00
< div class = "inline-embed-container" id = "cal-booking-place-conflicting-theme" >
< h3 > < a href = "?only=conflicting-theme" > You would be able to test out conflicting themes for the same namespace here.< / a > < / h3 >
< div class = "light" > < / div >
< div class = "dark" > < / div >
< i > Note that one of the embeds would stay in loading state as they are using the same namespace and it is not supported to have more than 1 embeds using same namespace< / i >
< / div >
< / div >
2023-06-28 13:45:39 +00:00
< div class = "inline-embed-container" id = "cal-booking-place-monthView" >
< h3 > < a href = "?only=ns:monthView" > Test Month View< / a > < / h3 >
< div class = "place" style = "width: 100%" > < / div >
< / div >
2023-06-26 15:24:19 +00:00
< div class = "inline-embed-container" id = "cal-booking-place-weekView" >
2023-06-28 13:45:39 +00:00
< h3 > < a href = "?only=ns:weekView" > Test Week View< / a > < / h3 >
2023-06-26 15:24:19 +00:00
< div class = "place" style = "width: 100%" > < / div >
< / div >
< div class = "inline-embed-container" id = "cal-booking-place-columnView" >
< h3 > < a href = "?only=ns:columnView" > Test Column View< / a > < / h3 >
< div class = "place" style = "width: 100%" > < / div >
< / div >
2023-03-28 18:17:40 +00:00
< script src = "./playground.ts" > < / script >
2022-03-31 08:45:47 +00:00
< / body >
< / html >
