Display Your Calendar Online

Last updated: August 6, 2024

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. loweIn the screenshot below, 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:

  • 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:

  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 screenshot below, 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 type="text/javascript" src="//www.trumba.com/scripts/spuds.js" ></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 type="text/javascript">
    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 type="text/javascript">
    $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 type="text/javascript">
    $Trumba.addSpud({
    webName: "",
    spudType: "tabchooser",
    });
    </script>
    </div>
    Date finder <script type="text/javascript">
    $Trumba.addSpud({
    webName: "",
    spudType: "datefinder",
    url:{headinglevel: 2}
    });
    </script>
    Event type filter <script type="text/javascript">
    $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 type="text/javascript">
    $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 type="text/javascript">
    $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 type="text/javascript">$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