Link Search Menu Expand Document

Calendar of Events

The calendar custom function grabs data from a Google spreadsheet (calendar) and embeds Google calendars within tabbed list on the page. It uses the spreadsheet information to get the associated Google ID, iframe embed code, museum and title.

Cook book

  • Edit the page
  • Click a “+” sign where you want to insert
  • Select “Code”
  • Paste the following code block
  • Adust parameters as needed

Code block for calendar of events

<script>
$( document ).ready(function() { 
  // selector, activeTab, single, collapsable, collapsed 
  build_calendars('#calendarContainer',1,false, true, false);
});
</script>
<div id="calendarContainer"></div>

Overrides:

You can dynamically override ActiveTab by adding a parameter to the linking url as:

?tab=n  (where n is a number from 0-4, see ActiveTab below)

Usage:

build_calendars(Selector, Activetab, Expanded)

Parameters:

Parameter Description
Selector Required.
jQuery selector identification where the resulting html code will be generated.
ActiveTab Optional.
  • 0=All museums (Default)
  • 1=Ann Arbor Hands On
  • 2=Leslie Science
  • 3=Yankee Air Museum
  • 4=Challenger Learning center
Single Optional.
  • True=Show only the active museum tab.
  • False=All museums (Default)
Collapasble Optional.
  • True=Can be collapsed or expanded (Default)
  • False=Not collapsable
  • true=Can be collapsed or expanded (Default)
Collapsed Optional.
Collapsable must be set to true, otherwise this paramter is ignored.
  • True=Initially collapsed
  • False=Initially expanded (default)

Return Value:

None

Google Spreadsheet:

Detail Description
Owner aahom220@gmail.com
File Name Google Calendars
Folder UIL_Web_Site_Docs
Link Google Calendar Spreadsheet
ID 1i5EjZCpxI4UnvXyMYXCLyLP9tSCNt0PZYemaU6f6XtU
Sheet Name Calendars

Spreadsheet Fields

Column Label Description
A Order Order calendars should be displayed
B Museum Museum code, aahom, lesli etc
C Name Short name assoiciated with museum
D Hide Checked or Yes=Hide this museum when displaying calendars.
E Title Long name associated with museum
F iFrame The html iFrame code to display this calendar in monthly display.
G After Text to display as footer after calendar

Calendar desktop view

Alt Calendar Desktop

Calendar mobile view

Alt Calendar Mobile