Display Your Calendar Online

You can make your calendar visible online in one of two ways: use the generic Trumba view or create a more styled view using JavaScript code snippets. Trumba refers to snippets of JavaScript code that retrieve event information stored on Trumba servers as "spuds." The following instructions also explain how to access Trumba iCal, XML, RSS, and JSON feeds.

To display your calendar online, you can either:

Use the generic Trumba view. This method allows you to quickly publish your calendar, without having to learn about Trumba spuds. Instead, you use Trumba's hosted view. -OR-
Create styled calendar views using Trumba spuds. Trumba spuds can be embedded on WordPress, Drupal, SharePoint and Google sites directly:
- WordPress example: The UW Campus Event calendar. If you need help with WordPress issue you may contact UW WordPress group.
- Drupal example: The Simpson Center for the Humanities. Anyone at the UW can request access to the UW Trumba Drupal module by contacting asweb@uw.edu.
- SharePoint example: The Internal Medicine Residency Program Trumba Calendar
- Google Site: you may contact Chris Fiset @ TECHdesk at uw.edu for tips.

To use the generic Trumba view of your calendar, follow these steps:

Steps Actions
Find the web-name of your calendar. In the calendar editor view (www.washington.edu/calendar/trumba), across the top of the page, look for the colored banner. The name of your calendar is the text following Published at: calendar/. The web name is all lower case and consists of a code for the campus (sea, tac, bot) and a code for the department (e.g., amath), unit, etc. In the following screenshot, the web name is highlighted in yellow:
Enter the following URL in a Web browser: http://www.trumba.com/calendar/name, replacing name with the web-name of your calendar.

Use spuds to display your calendar

Learn about spuds

The Trumba spuds listed in the table below support the following functionality:

Display the main calendar event listing
Enable users to:
- Select different views via tabs
- Select a date to view only the events that occur on that day
- Search for events by keyword(s)
- Filter events by types
- Include ongoing events if they are not included by default (optional)
- Select a time zone if your events occur in multiple time zones (optional)

Make Your Calendar Accessible to All Users

UW has an obligation to ensure that Web content is accessible to all users. To make sure that users of assistive technologies can access and navigate pages reliably and effectively, calendar pages that are available to end users must have a clear semantic structure, defined by regional ARIA landmarks. The code in the table below includes ARIA landmarks. If you use this code, your calendar web content will be accessible. Screen reader users rely on hierarchical heading level structures to successfully navigate web pages. By default, the Trumba spuds generate content starting at Heading Level 4 (<h4>). You can use the headinglevel parameter to assign specific heading levels on a spud-by-spud basis, making it easy to integrate spuds into any web page hierarchy. The value of the headinglevel parameter is the number associated with the HTML heading levels <h1> through <h6>.

Publish Your Calendar

To embed Trumba spuds on your web site, follow these steps:

Steps Actions
Find the web name of your calendar. In the calendar editor view (www.washington.edu/calendar/trumba), across the top of the page, look for the colored banner. The name of your calendar is the text following Published at: calendar/. The web name consists of a code for the campus (sea, tac, bot) and a code for the department (e.g., amath), unit, etc. In the following screenshot, the web name is highlighted in yellow:
For each spud, add the web name to the JavaScript below (placed between the two double quotes).
To the HTML <head> element, add the following: <style type="text/css"> .offscreen { position: absolute; left: -10000px; top: -10000px; } </style> <script></script> If you publish your calendar on an UW NetID protected page, please use src="https:// in the code above.
To show your calendar name, add the following code: <div role="region" aria-labelledby="calendar_name"> <h1 id="calendar_name">The Name of Your Calendar</h1> </div>

Embed the following spuds in the page body:

Spud Type	JavaScript code
Main calendar display	<div role="region" aria-labelledby="main_calendar_view"> <h2 class="offscreen" id="main_calendar_view"> Main Calendar View </h2> <script> var originalDocumentTitle = document.title; function onFetched() { // getEventSummary will return an object on event detail and null on calendar view. var eventSummary = spud.getEventSummary(); if (eventSummary) { document.title = originalDocumentTitle + ": " + eventSummary.description; } else { document.title = originalDocumentTitle;}} var spudId = $Trumba.addSpud({ webName: "", spudType:"main", url:{headinglevel: 3} }); var spud = $Trumba.Spuds.controller.getSpudById(spudId); spud.container.addEventListener("onFetched", onFetched); </script> </div> If you'd like to publish a specific display view on a separate Web page, add a template attribute in the url parameter, such as: `url: { headinglevel: 3, template: "month"}`See more template choices.
Keyword search box	`<script> $Trumba.addSpud({ webName: "", spudType: "searchlabeled", url:{headinglevel: 2} }); </script>`
Display view chooser via tabs	`<div role="region" aria-labelledby="calendar_display_view_selector"> <h2 class="offscreen" id="calendar_display_view_selector"> Change Calendar Display View </h2> <script> $Trumba.addSpud({ webName: "", spudType: "tabchooser", }); </script> </div>`
Date finder	`<script> $Trumba.addSpud({ webName: "", spudType: "datefinder", url:{headinglevel: 2} }); </script>`
Event type filter	`<script> $Trumba.addSpud({webName: "", spudType: "filter", spudConfig : "Type of Event", url:{headinglevel: 2} }); </script>`
Upcoming events	Note: If you prefer to publish a short list of upcoming events, you can use the upcoming spud code: `<div role="region" aria-labelledby="upcoming_events"> <h2 class="offscreen" id="upcoming_events">Upcoming Events</h2> <script> $Trumba.addSpud({ webName: "", spudType: "upcoming", url:{headinglevel: 3}, teaserBase : "the url of the page where the main spud is embedded" }); </script> </div>` Other spudType variations to try: upcomingtable upcomingpreview upcominggrouped upcomingphoto
(Optional) Ongoing event filter	Note: Add this spud only if your calendar does not display ongoing events by default. `<script> $Trumba.addSpud({ webName: "", spudType: "filter", url:{headinglevel: 2} }); </script>`
(Optional) Time zone picker	Note: Add this spud only if your calendar shows events that occur in multiple time zones. `<script>$Trumba.addSpud({ webName: "", spudType: "timezone", url:{headinglevel: 2} }); </script>`

Optional. Include the Calendar editor access link on your Web page so your editors don't have to remember the URL for accessing the Trumba back-end.
The page where you embedded the Main calendar display spud represents your Calendar Address in Trumba. Capture the full URL of this page and email us (help at uw).
A common mistake is adding the teaserBase parameter when the filter spuds are on the same page as the main calendar, which will cause undesired bahavior.

The Trumba iCal, XML, RSS, and JSON feeds of your calendar events can be accessed at: http://www.trumba.com/calendars/<web name>.ics http://www.trumba.com/calendars/<web name>.xml http://www.trumba.com/calendars/<web name>.rss http://www.trumba.com/calendars/<web name>.json