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.
|
Single | Optional.
|
Collapasble | Optional.
|
Collapsed | Optional. Collapsable must be set to true, otherwise this paramter is ignored.
|
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
Calendar mobile view