eSPACE makes it easy for users to display the Public Calendar on their own website by providing an iFrame snippet of code (embed code). However, in some cases, users may need to modify the snippet to fit in with the rest of the page it's embedded into or they may need to modify it so that the Public Calendar also correctly displays on a mobile phone.
This article will explain how users can modify the iFrame snippet (embed code) to better suit their website's design.
Some clients are seeing a visual display on their website that does not expand the dates within the monthly view of the public calendar. You may see something like the image below where the days within the month are not displayed. If this is the case, follow these instructions to update your embed code as appropriate for your organization's website design.
Go to the left navigation bar>Settings>Advanced>Public Calendars
Once on the Public Calendars page, you can copy any one of your Public Calendar's embed code for use on your organization's website:
Using the following code as an example, we will provide suggestions on attributes they may wish to change:
Here are a few attributes users may wish to change in the iFrame snippet:
- id: The "id" attribute is used to identify the iframe element in the HTML document. Customers may wish to change the value of this attribute to match their own naming conventions.
- style: The "style" attribute defines the appearance of the iframe element, such as its width and the appearance of its border and overflow. Customers may wish to change the style to match the look and feel of their website.
- scroll: The "scroll" attribute defines whether the iframe should allow scrolling. Customers may wish to set this attribute to "yes" if they want the calendar to be scrollable.
In conclusion, while eSPACE provides customers an iFrame snippet of code to embed the Public Calendar on their organization's website, users may need to modify the snippet to better fit in with the rest of their website. By changing the attributes and script, customers can make the calendar look and behave the way they want it to.
Embed code MUST be copied and replaced on the host site anytime an update is made to service categories OR locations
If you need assistance with pasting and possibly modifying the embed code so the fully approved public events display on your website, we encourage you to reach out to your T person or a website developer to do so.