Skip to content

Iframing in the mini Calendar

Resources

An additional feature offered is a Mini-Calendar that can be placed on any page within your website to link to events on a specific date or directly into the events module search page. Presently, it requires the insertion of an iframe on the page where you want the Mini-Calendar to appear. When a date is selected a new page will open with the events calendar in it.

Example iframe code:

<iframe src="http://kb.micronetonline.com/events/smallcalendar" allowtransparency="true" scrolling="no" width="250" height="150"></iframe>

Option A – Default size and styles
Insert an iframe on your website where you want the Mini-Calendar to appear. Note that the default size is 205px (width) by 220px (height) – if you do not wish to make changes to the look/feel of the mini-calendar you do not need to do anything further.

Option B – Customize the size and/or styles

  1. To override the default styles of the Mini-Calendar you will need to create and host your own template page. Within the template page you can add CSS styles (or link to an external stylesheet) to control the look/feel of the Mini-Calendar.
  2. Update the “/integration/settings” page so that it will use your template file for the Mini-Calendar. You will need to add the following relative URLs in the “Page Template Location” section adding the full http: file path to your newly created template in the “Template URL” field./events/smallcalendar
    /events/smallcalendar/*

Mini Calendar Categories

You can also display a specific event category within the mini-calendar by adding in a few additional URI slugs. You can find the category ID within the core database. Example: Typically the ID for Chamber of Commerce Events has the default value of 6.

Example iframe code:

<iframe src="http://kb.micronetonline.com/events/smallcalendarcatgid/6" allowtransparency="true" scrolling="no" width="250" height="150"></iframe></iframe>

Mini Calendar Dimensions

Default – 205px x 220px (minimum width and height if default stylesheet is used)
Small – 140px x 145px (set the padding for “#cm_events_calendar td” to 1px and use the styling tip below to remove the hard-coded line breaks – this is the smallest size available without reducing the font sizes)

Mini Calendar Switches

To prevent the links from opening in a new window, make sure the iframe is set to use the following url for it’s source attribute: http://kb.micronetonline.com/events/smallcalendar/?popup=false

Mini Calendar CSS Tips

  • To remove the hard-coded line breaks between the monthly calendar and the “View Events Calendar” link – add a new CSS rule:
    #cm_events_index br {display:none;}
  • To remove the “fieldset” border – add a new CSS rule:
    #cm_events fieldset {border: medium none}
  • The calendar table cells can be left aligned – edit existing rule:
    #cm_events_calendar td {padding:5px; text-align:left !important;}
  • You can change the background color of the iframe by changing the body attribute
Scroll To Top