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:

 

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

  1. Steps Actions
  2. 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: Trumba calendar name
  3. 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:

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:

  1. Steps Actions
  2. 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: Trumba calendar name
  3. For each spud, add the web name to the JavaScript below (placed between the two double quotes).
  4. 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.
  5. 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>
  6. 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>
  7. 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.
  8. 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).
  9. 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