Embedding Calendars

In LiveWhale Calendar 1.7.2 and before, you may have used the “CORS calendar” to embed an interactive calendar on your site.

Since LiveWhale Calendar 2.0.0, the CORS calendar has been replaced with a simplified iframe calendar, which uses a basic template out-of-the-box, or you can customize it by following the instructions below.

Embedding a simple calendar view

In LiveWhale Calendar 2.0.0 and later, you can basically embed any LiveWhale Calendar URL in an iframe, and simply adding ?iframe=1 to the end of the URL will tell it to use a pared-down template rather than the full calendar design (header, footer, sidebar).

Example: Embed a month view of the Music calendar

1
<iframe title="Calendar" src="https://calendar.myschool.edu/music/month?iframe=1" style="border: 0; width: 100%; height: 800px"></iframe>

Customizing the iframe template

The default template for the ?iframe=1 view is located at /public_html/livewhale/templates/resources/iframe_calendar.php. To make your own, copy that file and upload it to /public_html/_ingredients/templates/resources/iframe_calendar.php and from there you can add/remove elements to customize.

LiveWhale also adds <body class="lwc_iframe"> to the calendar when it detects it’s been loaded inside of an iframe, so you can use body.lwc_iframe {} in your theme CSS if you want to have specific styling for the embedded calendar only.

Advanced: Auto-resizing your iframe

If you want your iframe to fit seamlessly inside your page, no matter how tall the contents are, you can use a 3rd-party script like iframe-resizer to accomplish that.

When installing something like iframe-resizer, you can use this code inside of /_ingredients/themes/global/scripts/calendar-custom.js to take actions or load scripts only when the calendar has been loaded inside of an iframe. Learn more about what you can do with calendar-custom.js.

1
2
3
4
5
6
7
8
9
(function($, LW) {

$('body').bind('calBeforeInit.lwcal', function() { // before the calendar loads
if (window.self !== window.top) { // if page is loaded from an iframe
// do something here, like load an iframe-resizer listener script
}
});

}(livewhale.jQuery, livewhale));