Web Calendars addon for MIDAS Web Calendars: Customization

You can customize the appearance of your Web Calendars through the use of CSS (Cascading Style Sheet) styling.

The "Custom CSS Styling" field will accept either a URL to an external .css file, or (starting from v1.12 of the Web Calendars addon) raw CSS code directly. an external .css stylesheet.

Each element's appearance within a Web 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)

For instance, to change the color and font size of the main calendar title, you would create CSS styles for the "calendar_title" class.

For example:

Example CSS Code