Spuds Defined

You’ve probably heard of widgets, also known as gadgets or docklets. “Spuds” are specialized Trumba® Connect widgets.

We chose the term “spud” somewhat facetiously as a play on the concept of “mashups.” A mashup is a web page that brings together content from more than one source. The IT world borrowed the term “mashup” from a hip-hop music practice of mixing two or more songs together to create a new song.

A spud is actually a small piece of JavaScript™ code that retrieves event information stored on the Trumba servers. To display event information on your website, you copy and paste the spud code into your web pages (to create your own mashups).

Spuds embedded into your web pages act like windows. What you see through the windows is your event information on the Trumba servers. The exact view depends upon the specific spud that you’re using. Because spuds are windows into your hosted data, changes you make in the Trumba Connect editing environment show up immediately on your site.

Create and Paste a Spud: A Walk Through the Process

To help clarify the power and flexibility of spuds, let’s walk through the process of creating and embedding a spud using the Trumba Tribune calendar as an example. The steps refer to the picture on the right.

Step 1

In the Trumba Connect editing environment, we create the Trumba Tribune calendar. We add events and customize the way the calendar looks and behaves. Trumba Connect creates a spud for the calendar and provides us with the spud’s JavaScript code.

Step 2

As we create and customize our Trumba Tribune calendar, all of our event and settings data is stored on the Trumba servers. The spud code that Trumba Connect provides acts as a bridge between those servers and our web page.

Step 3

In the Trumba Connect editing environment, we copy the JavaScript code for the Trumba Tribune calendar spud. Then we paste that code into the code for the Display & Locate Events page on the Trumba Tribune website.

Step 4

Visitors to the Display & Locate Events page view and interact with the calendar. They always see the latest information. When we add or update events, those events are saved to the Trumba servers and immediately passed to the calendar spud on the website.

See for Yourself How Spuds Work: Try It On Your Own Webpage

To see this spud in action on your own web page, take the following steps:

  1. Copy the code on the right.
  2. Open an HTML, text editing, or word processing program.

    If you use Microsoft® Windows operating system, you can open Notepad. If you use Mac OS®, open TextEdit or a word processing program.

  3. If you're using TextEdit or a word processing program, immediately save or format the file in plain text (.txt) format.
  4. Paste the code into the program window.
  5. Save the file (again) and close the program.
  6. If the file doesn’t have an .htm or .html extension, rename it so it does. For example, you might name the file trumbaspud.html.
  7. Open a Web browser and drag the file you just created into the browser window.

Trumba Tribune calendar spud code for you to copy:

<html><head><title></title></head><body> <div style="width:600px; padding:24px 25px; border:1px solid #000000; margin-bottom:20px;">
<script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script> <script type="text/javascript">
$Trumba.addSpud(
{ webName: "trumbatribune",
  spudType: "main"});
</script></div></body></html>

Tip

If you get a message that the content is blocked or your browser can’t run scripts, you may have to allow blocked content or enable JavaScript in your browser’s settings.

Trumba Connect

Trumba Tribune is a demonstration website for Trumba Connect, a web-hosted online calendar solution. For more information about Trumba Corporation and the Trumba Connect product, please visit www.trumba.com.

About this spud
close

Date Finder Control Spud

expandWhat it does

  • Navigates to specific dates in the calendar spud.
  • Click the arrows to move between months.
  • Click a date to display it on the Calendar spud.
  • Hover over a date to display a list of events.

expandWhat you can customize

  • Colors (including weekdays, weekends, and dates with events) and fonts.
  • Show or hide hover popup.

expandTry it on your own web page

Copy the spud code and paste it into the code for your own web page. Detailed steps

<html><head><title></title></head><body> <div style="width:200px; border:1px solid #000000; margin-bottom:20px;"> <script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script>
<script type="text/javascript">
$Trumba.addSpud({
webName: "trumbatribune",
spudType: "datefinder",
teaserBase : "http://tribune.trumba.com/online_calendars/display_locate_events.aspx" }); </script></div></body></html>