2022-03-31 08:45:47 +00:00
< html >
< head >
<!-- <link rel="prerender" href="http://localhost:3000/free"> -->
< script >
if (!location.search.includes("nonResponsive")) {
document.write('< meta name = "viewport" content = "width=device-width" / > ');
}
< / 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
};
})(window, "//localhost:3002/dist/embed.umd.js", "init");
< / 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-03-31 08:45:47 +00:00
.debug {
/* border: 1px solid black; */
margin-bottom: 5px;
}
.loader {
color: green;
}
2022-04-14 02:47:34 +00:00
* {
--cal-brand-border-color: blue;
--cal-brand-background-color: blue;
}
2022-03-31 08:45:47 +00:00
< / style >
< / head >
< body >
< h3 > This page has a non responsive version accessible < a href = "?nonResponsive" > here< / a > < / h3 >
2022-04-04 15:44:04 +00:00
< h3 > Pre-render test page available at < a href = "?only=prerender-test" > here< / a > < / h3 >
2022-03-31 08:45:47 +00:00
< div >
2022-04-08 05:33:24 +00:00
< button data-cal-namespace = "prerendertestLightTheme" data-cal-link = "free?light&popup" > Book with Free User[Light Theme]< / button >
2022-03-31 08:45:47 +00:00
< div >
< 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
>
< / div >
2022-04-14 02:47:34 +00:00
< h2 > Other Popup Examples< / h2 >
< button data-cal-namespace = "popupDarkTheme" data-cal-config = '{"theme":"dark"}' data-cal-link = "free?dark&popup" > Book with Free User[Dark Theme]< / button >
< button data-cal-namespace = "popupTeamLinkLightTheme" data-cal-config = '{"theme":"light"}' data-cal-link = "team/test-team?team&light&popup" > Book with Test Team[Light Theme]< / button >
< button data-cal-namespace = "popupTeamLinkDarkTheme" data-cal-config = '{"theme":"dark"}' data-cal-link = "team/test-team?team&dark&popup" > Book with Test Team[Dark Theme]< / button >
< div >
< 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 >
< / div >
2022-03-31 08:45:47 +00:00
< / div >
< div id = "namespaces-test" >
2022-04-04 15:44:04 +00:00
< div class = "debug" id = "cal-booking-place-default" >
< h2 >
Default Namespace(Cal)< i > [Dark Theme][inline][Guests(janedoe@gmail.com and test@gmail.com)]< / i >
< / h2 >
2022-03-31 08:45:47 +00:00
< div >
< i > < a href = "?only=ns:default" > Test in Zen Mode< / a > < / i >
< / div >
2022-04-04 15:44:04 +00:00
< i class = "last-action" > You would see last Booking page action in my place < / i >
2022-04-14 02:47:34 +00:00
< div >
2022-03-31 08:45:47 +00:00
< div >
if you render booking embed in me, I would not let it be more than 30vh in height. So you would
have to scroll to see the entire content
< / div >
2022-04-14 02:47:34 +00:00
< div class = "place" style = "width:50%; max-height: 30vh; overflow: scroll" > < / div >
2022-03-31 08:45:47 +00:00
< div class = "loader" id = "cal-booking-loader-" > Loading .....< / div >
< / div >
< / div >
2022-04-04 15:44:04 +00:00
< div class = "debug" id = "cal-booking-place-second" >
< h2 > Namespace "second"(Cal.ns.second)[Custom Styling][inline]< / h2 >
2022-03-31 08:45:47 +00:00
< div >
< i > < a href = "?only=ns:second" > Test in Zen Mode< / a > < / i >
< / div >
2022-04-04 15:44:04 +00:00
< i class = "last-action" >
2022-03-31 08:45:47 +00:00
< i > You would see last Booking page action in my place< / i >
< / i >
2022-04-04 15:44:04 +00:00
< div class = "place" >
2022-03-31 08:45:47 +00:00
< div > If you render booking embed in me, I won't restrict you. The entire page is yours.< / div >
< button
onclick="(function () {Cal.ns.second('ui', {styles:{eventTypeListItem:{backgroundColor:'blue'}}})})()">
Change < code > eventTypeListItem< / code > bg color
< / button >
< button onclick = "(function () {Cal.ns.second('ui', {styles:{body:{background:'red'}}})})()" >
Change < code > body< / code > bg color
< / button >
< div class = "loader" id = "cal-booking-loader-second" > Loading .....< / div >
< / div >
< / div >
2022-04-04 15:44:04 +00:00
< div class = "debug" id = "cal-booking-place-third" >
2022-04-08 05:33:24 +00:00
< h2 > Namespace "third"(Cal.ns.third)[inline][Custom Styling - Transparent Background]< / h2 >
2022-03-31 08:45:47 +00:00
< div >
< i > < a href = "?only=ns:third" > Test in Zen Mode< / a > < / i >
< / div >
2022-04-04 15:44:04 +00:00
< i class = "last-action" >
2022-03-31 08:45:47 +00:00
< i > You would see last Booking page action in my place< / i >
< / i >
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 class = "loader" id = "cal-booking-loader-third" > Loading .....< / div >
< / div >
< / div >
< div class = "debug" id = "cal-booking-place-fourth" >
< h2 > Namespace "fourth"(Cal.ns.fourth)[Team Event Test][inline]< / h2 >
< div >
< i > < a href = "?only=ns:fourth" > Test in Zen Mode< / a > < / i >
< / div >
< i class = "last-action" >
< i > You would see last Booking page action in my place< / i >
< / i >
< 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 class = "loader" id = "cal-booking-loader-third" > Loading .....< / div >
< / div >
< / div >
< / div >
< script >
2022-04-04 15:44:04 +00:00
const callback = function (e) {
const detail = e.detail;
const namespace = detail.namespace || "default";
if (detail.type === "linkReady") {
document.querySelector(`#cal-booking-place-${namespace} .loader`).remove();
2022-04-08 05:33:24 +00:00
} else if (detail.type === "linkFailed") {
document.querySelector(`#cal-booking-place-${namespace} .loader`).remove();
2022-04-04 15:44:04 +00:00
}
document.querySelector(`#cal-booking-place-${namespace} .last-action`).innerHTML = JSON.stringify(
e.detail
);
};
2022-03-31 08:45:47 +00:00
const searchParams = new URL(document.URL).searchParams;
const only = searchParams.get("only");
2022-04-04 15:44:04 +00:00
if (!only || only === "ns:default") {
Cal("init", {
debug: 1,
origin: "http://localhost:3000",
});
Cal("inline", {
elementOrSelector: "#cal-booking-place-default .place",
calLink: "pro?case=1",
config: {
name: "John Doe",
email: "johndoe@gmail.com",
notes: "Test Meeting",
guests: ["janedoe@gmail.com", "test@gmail.com"],
theme: "dark",
},
});
Cal("on", {
action: "*",
callback,
});
}
if (!only || only === "ns:second") {
// Create a namespace "second". It can be accessed as Cal.ns.second with the exact same API as Cal
Cal("init", "second", {
debug: 1,
origin: "http://localhost:3000",
});
// Bulk API is supported - Keep all configuration at one place.
Cal.ns.second(
[
"inline",
{
elementOrSelector: "#cal-booking-place-second .place",
calLink: "pro?case=2",
2022-03-31 08:45:47 +00:00
},
2022-04-04 15:44:04 +00:00
],
[
"ui",
{
styles: {
body: {
background: "white",
},
eventTypeListItem: {
backgroundColor: "#D3D3D3",
},
enabledDateButton: {
backgroundColor: "#D3D3D3",
},
disabledDateButton: {
backgroundColor: "lightslategray",
2022-03-31 08:45:47 +00:00
},
},
2022-04-04 15:44:04 +00:00
},
]
);
Cal.ns.second("on", {
action: "*",
callback,
});
}
2022-03-31 08:45:47 +00:00
2022-04-04 15:44:04 +00:00
if (!only || only === "ns:third") {
// Create a namespace "third". It can be accessed as Cal.ns.second with the exact same API as Cal
Cal("init", "third", {
debug: 1,
origin: "http://localhost:3000",
});
2022-04-08 05:33:24 +00:00
2022-04-04 15:44:04 +00:00
Cal.ns.third(
[
"inline",
{
elementOrSelector: "#cal-booking-place-third .place",
calLink: "pro/30min",
},
],
[
"ui",
{
styles: {
body: {
2022-04-08 05:33:24 +00:00
background: "transparent",
},
branding: {
brandColor: "#81e61c",
lightColor: "#494545",
lighterColor: "#4c4848",
lightestColor: "#7c7777",
highlightColor: "#9b0e0e",
medianColor: "black",
2022-03-31 08:45:47 +00:00
},
},
2022-04-04 15:44:04 +00:00
},
]
);
Cal.ns.third("on", {
action: "*",
callback,
});
2022-03-31 08:45:47 +00:00
}
2022-04-04 15:44:04 +00:00
if (!only || only === "ns:fourth") {
Cal("init", "fourth", {
debug: 1,
origin: "http://localhost:3000",
});
Cal.ns.fourth(
[
"inline",
{
elementOrSelector: "#cal-booking-place-fourth .place",
calLink: "team/test-team",
},
],
[
"ui",
{
styles: {
body: {
2022-04-08 05:33:24 +00:00
background: "transparent",
},
branding: {
brandColor: "#81e61c",
lightColor: "#494545",
lighterColor: "#4c4848",
lightestColor: "#7c7777",
highlightColor: "#9b0e0e",
medianColor: "black",
2022-04-04 15:44:04 +00:00
},
},
},
]
);
Cal.ns.fourth("on", {
action: "*",
callback,
});
}
2022-03-31 08:45:47 +00:00
2022-04-04 15:44:04 +00:00
if (!only || only === "prerender-test") {
2022-04-08 05:33:24 +00:00
Cal('init', 'prerendertestLightTheme', {
debug: 1,
origin: "http://localhost:3000",
})
Cal.ns.prerendertestLightTheme("preload", {
2022-04-04 15:44:04 +00:00
calLink: "free",
});
}
2022-04-08 05:33:24 +00:00
Cal('init', 'popupDarkTheme', {
debug: 1,
origin: "http://localhost:3000",
})
Cal('init', 'popupTeamLinkLightTheme', {
debug: 1,
origin: "http://localhost:3000",
})
Cal('init', 'popupTeamLinkDarkTheme', {
debug: 1,
origin: "http://localhost:3000",
})
2022-04-14 02:47:34 +00:00
Cal('init', 'upcomingBookings', {
debug: 1,
origin: "http://localhost:3000",
})
Cal("init", "floatingButton", {
debug: 1,
origin: "http://localhost:3000",
});
if (!only || only == "ns:floatingButton") {
Cal.ns.floatingButton("floatingButton", {
calLink: "pro"
})
}
2022-03-31 08:45:47 +00:00
< / script >
2022-04-04 15:44:04 +00:00
< script > < / script >
2022-03-31 08:45:47 +00:00
< / body >
< / html >
