Publish Your Calendar

You can make your calendar visible in one of two ways, depending on your comfort level using Trumba spuds. (A spud is a snippet of JavaScript code that retrieves event information stored on Trumba servers.)

To publish your calendar, you can either:

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.

To publish your calendar, you will first find the web name of the calendar. The web name is all lower case, with the format sea_xxx, bot_xxx, or tac_xxx.

Publish Your Calendar

To find the web name of your calendar, follow this step:

  1. Steps Actions
  2. In the calendar editor view (, across the top of the page, look for the pale purple 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


To publish your calendar using the generic Trumba view, follow these steps:

  1. Steps Actions
  2. Find the web name of your calendar (see above).
  3. Enter the following URL in a Web browser:, replacing name with the name of your calendar.

To publish your calendar using Trumba spuds, follow these steps:

  1. Steps Actions
  2. Find the web name of your calendar (see above).
  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;
    <script type="text/javascript" src="" ></script>
  5. To show your calendar name, add the following code: <div role="region" aria-labelledby="calendar_name">
    <h2 id="calendar_name">The Name of Your Calendar</h2></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">$Trumba.addSpud({webName: "", spudType:"main"});
    Keyword search box <div role="region" aria-labelledby="calendar_keyword_search">
    <h2 class="offscreen" id="calendar_keyword_search">Search the Calendar(s)</h2>
    <script type="text/javascript"> $Trumba.addSpud({webName: "", spudType: "searchlabeled"});
    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"});
    Date finder <div role="region" aria-labelledby="calendar_date_selector">
    <h2 class="offscreen" id="calendar_date_selector">Select a Date on The Calendar</h2>
    <script type="text/javascript"> $Trumba.addSpud({
    webName: "", spudType: "datefinder"});
    Event type filter <div role="region" aria-labelledby="event_type_filters">
    <h2 class="offscreen" id="event_type_filters">Filter Events By Types</h2>
    <script type="text/javascript">
    $Trumba.addSpud({webName: "", spudType: "filter",
    spudConfig : "Type of Event"});
    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",
    teaserBase : "the url of the page where the main calendar view is displayed"});

    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.
    <div role="region" aria-labelledby="ongoing_event_filter">
    <h2 class="offscreen" id="ongoing_event_filter">Include/Exclude Ongoing Events</h2>
    <script type="text/javascript">
    $Trumba.addSpud({webName: "", spudType: "filter"});
    (Optional) Time zone picker Note: Add this spud only if your calendar shows events that occur in multiple time zones.
    <div role="region" aria-labelledby="time_zone_selector">
    <h2 class="offscreen" id="time_zone_selector">Select Time Zone</h2>
    <script type="text/javascript">$Trumba.addSpud({webName: "", spudType: "timezone"});
  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 then add to:

Last modified: December 18, 2014