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.
The Trumba spuds listed in the table below support the following functionality:
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>.
<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.<div role="region" aria-labelledby="calendar_name">
<h1 id="calendar_name">The Name of Your Calendar</h1>
</div>
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:
|
(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> |
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