Embedding MIDAS Web Calendars Web Calendars: Embedding

Embedding a Monthly Web Calendar using HTML

Each Web Calendar you create in MIDAS can be embedding with your own website with a special "Embed Code". Once you've created your Web Calendar, simply click the "Copy Embed Code" button to copy the embed code to the clipboard, from where you can then paste it into your own website.

The embed code itself utilizes the HTML <IFRAME> tag to allow you to seamlessly display the Web Calendar within a page on your website.

The below example embed code will embed whichever Web Calendar you've currently set as default:

Example Embed Code
 <iframe src="https://your_midas_url/calendar.pl" loading="lazy"></iframe>

If you've created multiple Web Calendars, you can embed a specific calendar by appending a "calendar" parameter containing the name of your Web Calendar to the "src" URL. For example, to embed a Web Calendar named "MyCalender":

Example Embed Code
 <iframe src="https://your_midas_url/calendar.pl?calendar=MyCalendar" loading="lazy"></iframe>

By default, an embedded Web Calendar will initially display the calendar for the current month. If you wish to initially display a different month instead, you can append a "month" parameter to the "src". A numeric offset value should be passed in the "month" parameter, which represents a month in the future (for a positive numeric offset), or in the past (for a negative numeric offset). For example, a value of "-1" will set the calendar to initially show last month's bookings, whereas a value of "1" will initially set the calendar to show next month's bookings:

Example Embed Code
 <iframe src="https://your_midas_url/calendar.pl?calendar=MyCalendar&month=1" loading="lazy"></iframe>

Embedding an individual day's bookings using HTML

The Web Calendars addon also lets you embed bookings for individual days, rather than an entire month.

In order to do this, the "Action on Click" Calendar Interaction setting for your calendar must be set to "Show extended info for selected date in popup", and you must have created a "Popup Template".

This setting allows viewers to click on a date in a monthly Web Calendar to see more details about bookings on that particular date. However, you can also embed this information directly into your website.

This is achieved by appending a "day" parameter to the "src" value in your embed code. "day" should be a numeric offset of the day you wish to embed. For instance, a value of "0" is today, a value of "-1" would be yesterday, a value of "1" would be tomorrow, and a value of "7" would display bookings for a week from today:

Example Embed Code
 <iframe src="https://your_midas_url/calendar.pl?calendar=MyCalendar&day=7" loading="lazy"></iframe>

Embedding Web Calendars using Content Management Systems (CMS)

We've also produced handy guides to help you integrate a Web Calendar into popular CMS (Content Management Systems) too, including;

WordPress

Joomla!