MIDAS KnowledgebaseMIDAS Knowledgebase

MIDAS Addon: Web Calendars

Embeddable Web Calendars The Web Calendars addon for MIDAS automatically generates monthly overview calendars of your bookings which you can embed into your own website to allow visitors to see what's on! Multiple calendars can be created and customized through an extensive range of settings
Here's an example of an embeddable calendar, using live data from our public online demo:

How to get the Web Calendars addon

Existing customers running the latest build of MIDAS v4.03 (or later) can add the Web Calendars addon to their MIDAS via the upgrade page.
New customers will be able to include the Web Calendars addon at time of purchase, or add it to their MIDAS at a later date
Once the Web Calendars addon has been purchased, it will then become available for one-click install within your MIDAS via MIDAS Admin Options → Manage Addons

Addon Documentation

Once the Web Calendars plugin is installed in your MIDAS, its configuration page (shown below) can be accessed via MIDAS Admin Options → Manage Addons → Web Calendars

Public Calendars Settings Screen
The Web Calendars settings screen

Current Calendars

This is a list of all the current web calendars you've defined.
To setup a new calendar, click the "Add New" button below the list
To set an existing calendar to be the "default", highlight it in the "Current Calendars" list and click "Set as Default". An asterisk will denote the current "default" web calendar.
To remove a web calendar, select it and click the "Delete" button

Variables - Global

Lists a number of variables that you can use within your calendar templates.
These variables will be substituted for corresponding content in your "live" calendars.

Variables - Fields

Similar to global variables, when field "field" variables are used within your web calendar templates, they are substituted with live data from corresponding booking fields.
If you've set the "Action on Click" setting to "Show extended info for selected date in popup" and you wish to use these variables in your Popup Templates, they must all be placed between a single set of <bookings>...</bookings> tags.


Allows you to "disable" individual web calendars. When a disabled web calendar is viewed it will instead display a "Calendar Currently Disabled" message.

Calendar Number

The internal number representing the web calendar you are currently defining.
This number cannot be changed, but is used for calendar addressing. For example, to display Calendar number 4, the URL for that calendar would be https://your_midas_url/calendar.pl?cal=4

Calendar Name

A name by which you can use to identify the web calendar you are defining.
This name will appear in the "Current Calendars" list and can be shown on your calendar if desired through the inclusion of the %CALNAME% variable within your template.

Calendar URL

The URL at which your web calendar will be available.
You can link directly to this URL, or use the example Embed Code below to embed the calendar within a portion of an existing page on your website

Embed Code

The Embed Code will provide you with an example HTML code fragment which you can copy and paste into your web site, using the standard <IFRAME> HTML element, allowing you to "embed" a web calendar directly into web pages on your site.

Limit Calendar To

These settings allow you to control which bookings should be included on the current web calendar. By default "All Venues" and "All Booking Types" will be shown.
You can "untick" either of these options to limit the range of venues/booking types that are presented on the calendar.

Advanced Filter

An Advanced Filter is also available, allowing you to include/exclude bookings from the generated Web Calendar that match a particular criterion. You'll be able to select a booking field (including any custom booking fields you've defined) from a drop-down list, select a match type, and enter a match string.

Match types available include:

Content of Date Cells

Defines how each booking should be displayed on date cells within the web calendar, using the Field Variables described above.
For example, setting this value to "%START% - %FINISH% %VENUE%" will translate on your actual calendar to show each booking in the format "08.00 - 09.00 Room 1"

Action on Click

"Do nothing" - Nothing will happen when a visitor clicks on dates within your web calendar
"Show extended info for selected booking in popup" - Allows each booking shown on your web calendar, when clicked, to show a pop-up window containing further information about the selected booking.
"Show extended info for selected date in popup" - Allows each date shown on your web calendar, when clicked, to show a pop-up window containing further information about the bookings taking place on that date.

Popup Size

When the "Action of Click" setting is anything other than "Do nothing", the Popup Size settings allow you to specify the size of pop-up windows generated when a user clicks a booking/date.
For example, setting this to "400 x 600" will produce pop-up windows that are 400 pixels wide, and 600 pixels tall.

Popup Template

When the "Action of Click" setting is anything other than "Do nothing", a popup window will be generated when a visitor clicks a booking/date. You can define the content of these popups here.
Popup templates can include standard HTML code, and global or field variables listed above
If you've set the "Action on Click" setting to "Show extended info for selected date in popup" any field variables you use in your popup template must be placed within <bookings>...</bookings> tags. This indicates to MIDAS the section of template code that is to be repeated for each booking to be displayed.

Custom CSS Styling

This field allows you to precisely control all the visual elements of your calendar and associated pop-ups through the use of CSS (Cascading Style Sheets). This field will accept the URL to an external .css file, or (starting from v1.12 of the Web Calendars addon) raw CSS code directly.

Preview Calendar

Clicking this button will open a new window showing a preview of the calendar you are currently creating

Preview Popup

This button is only visible if "Action of Click" isn't set to "Do nothing".
Clicking this button will open a popup window at the size you've specified and show a preview of your Popup Template code

Save Changes

Once you're happy with your web calendar template and settings, click the "Save Changes" button to save your calendar.
You can edit the template and/or settings for a previously saved web calendar at any time by simply selecting it in the "Current Calendars" list.

Customizing the Calendar's Appearance

You can customize the appearance of your calendars through the use of an external .css stylesheet.
Each element's appearance within the calendar can be "styled" with the following available classes:
Style ClassDescription
calendar_dateApplied to all date cells
calendar_date_bookingsApplied to the area within each cell where bookings are displayed
calendar_date_has_bookingsApplied to all date cells with bookings
calendar_date_has_no_bookingsApplied to all date cells with no bookings
calendar_date_numberApplied to the day number in each cell
calendar_date_todayApplied to today's cell
calendar_date_total_bookingsApplied to the count of total bookings in each cell
calendar_day_headApplied to the day names across the top of the calendar
calendar_disabledApplied to "Calendar Currently Displayed" message when a calendar is displayed
calendar_more_info_linkApplied to bookings/cells where clicking will open a pop-up with more information
calendar_navApplied to the "Previous" and "Next" navigation buttons
calendar_titleApplied to the main "Month Year" title of the calendar
calendar_weekApplied to each "row" of dates within the calendar

Embeddable Web Calendar Style Guide
Above: The elements to which each style class applies (Click for larger image)

Here's an example of an embeddable calendar, using live data from our public online demo, simply showing whether "Room 1" is available (green) or booked (red):

...and below is the .css code used to achieve the above calendar appearance:

Custom .css code

Video Tutorial

You might also be interested in...
MIDAS » KB » Sales » Article 00082

← Return to Knowledgebase