Public Calendar | Adjusting the Calendar Embed Code for Mobile View

While eSPACE provides customers an iFrame snippet of code to embed the Public Calendar on their organization's website, users will need to modify the snippet so that the Public Calendar adjusts correctly to fit on a mobile app view. If you need help understanding, modifying, and implementing the code, please refer to your website designer for assistance. 

Below is a general example:

<div class="responsive-iframe-container">
<iframe id="dynamic-iframe" src="https://app.espace.cool/clientApi/FullMonth/XXXXX?calendarId=XXX&amp;locationId=XXXXXX" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen"></iframe>
</div>
<pre><code></code></pre>
<pre><code>
<script>
(function() {
// Configuration
const iframeId = 'dynamic-iframe';
const containerClass = 'responsive-iframe-container';
const defaultAspectRatio = 56.25; // 16:9 aspect ratio

// Helper functions
function setIframeHeight(height) {
const iframe = document.getElementById(iframeId);
if (iframe) {
iframe.style.height = `${height}px`;
}
}

function scrollToIframe() {
const iframe = document.getElementById(iframeId);
if (iframe) {
iframe.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}

// Message event listener
window.addEventListener('message', function(event) {
if (event.origin !== 'https://app.espace.cool') return; // Security check

const data = event.data;
if (typeof data === 'object') {
if (data.isGoToEvent) {
scrollToIframe();
} else if (data.height) {
setIframeHeight(data.height);
}
} else if (Number.isInteger(data)) {
setIframeHeight(data);
}
}, false);

// Responsive container setup
const style = document.createElement('style');
style.textContent = `
.${containerClass} {
position: relative;
padding-bottom: ${defaultAspectRatio}%;
height: 0;
overflow: hidden;
}
.${containerClass} iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
`;
document.head.appendChild(style);
})();
</script>

In the example code above, we wrap the iframe in a div with a padding-bottom percentage to maintain a fixed aspect ratio. This ensures that the iframe resizes properly on smaller screens while maintaining its original aspect ratio. The iframe's width is set to 100% to make it responsive and fill the entire container.

Make sure to adjust the padding-bottom percentage in the div to match the aspect ratio you want. In this example, it's set to 56.25%, which corresponds to a 16:9 aspect ratio. You can change this value as needed.

Make sure to test the code and make any other adjustments that you need as well as those could vary.