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.
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.
Updating Embed Code
Embed code MUST be copied and replaced on the host site anytime an update is made to service categories OR locations in the eSPACE account.
Modifying to Fit WebSite or Mobile View
If you need assistance with pasting and possibly modifying the embed code so the fully approved public events display on your website or so the calendar adjusts in size when viewing on a mobile phone, we encourage you to reach out to your IT person or a website developer to do so. While eSPACE provides the embed code, we can't assist with modifications outside of eSPACE.