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.

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>.

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 (www.washington.edu/calendar/trumba), 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: http://www.trumba.com/calendar/name, 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;
    }
    </style>
    <script type="text/javascript" src="http://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">
    $Trumba.addSpud({
    webName: "",
    spudType:"main",
    url:{headinglevel: 3}
    });
    </script>
    </div>
    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 then add to:

Last modified: April 6, 2015