Embedding Calendars

Generally, we suggest linking out to your main calendar page whenever a fully-interactive calendar (previous/next, month and day views, etc.) is needed. You can also use Widgets for embedding seamless lists of upcoming events on any page.

However, there may still be cases—like an internal dashboard—where you decide an iframe is the best solution for displaying calendar data to your users. If so, LiveWhale Calendar has a few tools to make that a better experience.

Embedding a simple calendar view

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

<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.

(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));

LiveWhale Support