Customize spud code

You might already be quite familiar with integrating Trumba® Connect calendar spuds into your website by using the code that Trumba Connect displays on various tabs in in the Publishing Control Panel. But how does this code work? How does your main calendar spud know when a visitor has taken an action on an adjacent view-chooser spud? And can you manipulate a spud from outside of the Trumba editing environment?

This topic and the related topics it links to describe the components that make up a spud, what steps are involved in displaying a spud on a page, and how to control spud behavior and styles through the spud API.

The two primary code components for creating spuds
Arguments supported by the $Trumba.addSpud() method
Examples

Note The spud API and related topics assume that you are familiar with the way programming languages and URL parameters work, and that you can easily find your way around HTML or other web programming-language code.

The two primary code components for creating spuds

When you publish a calendar, Trumba Connect displays your Publishing Control Panel. This is where you add and configure your spuds. When you add a spud, in addition to customizing its styles and behavior, Trumba Connect generates the code you need to put it in your web pages. The code contains these two components:

The spud controller
The $Trumba.addSpud() method

For your main calendar, the code in the Publishing Control Panel looks something like this:

Where you replace name with the web name of your calendar and type with the type of spud you want to embed.

The spud controller

The first <script> tag in the Trumba Connect generated code runs the spud controller (spuds.js):

<script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script>

The spud controller presides over the spuds on your web page, monitoring requests made on each one. It facilitates communication among the spuds on the page and communication between each spud and the Trumba Connect source database.

Note The script that runs the spud controller needs to appear on your page only once, regardless of how many spuds you insert. The spud controller needs to be run before the code for the first spud on the page. For example, you can put it in the <head> section of an HTML page. (In the Publishing Control Panel, the script is included with every spud, because any spud could be the first spud on a page, and some spuds can be the only spud.)

The $Trumba.addSpud() method

This method takes one parameter, which is an associative array of arguments, using the JSON (JavaScript Object Notation) syntax. Two arguments are required to display the spud, and others are optional for refining spud styles and behavior.

The $Trumba.addSpud() method defines which calendar on the Trumba server to request data from and which spud to use to present the data. It also registers the spud with the spud controller, so that the spud can communicate with other spuds on the page and with the database that holds your source calendar data.

The spud is displayed according to the style and behavior attributes that you set in the Publishing Control Panel in your Trumba editing environment. However, the $Trumba.addSpud() method can also take local properties that override the control panel settings.

Arguments supported by the $Trumba.addSpud() method

To display a spud, the $Trumba.addSpud() method requires two arguments: webName and spudType.

The method supports additional optional arguments that customize the spud display. Normally you use the Publishing Control Panel to customize a spud's styles and behavior. However, if you want a particular instance of the spud to behave differently, you can use these optional arguments to locally override its settings in the Publishing Control Panel.

Note The $Trumba.addSpud() method and all arguments and parameters that you use with it are case sensitive.

Argument	Type	Description and Values
webName (required)	string	The web name of the calendar you published and want to integrate into your website. For example, `webName : "trumbatribune"`
spudType (required)	string	Type of spud you want to embed. Some spud types: main : Main calendar spud datefinder : Mini month date finder upcoming : Upcoming events spud crawler : Upcoming events crawler spud monthlist: Month list spud chooser : View chooser filter: Filter spud search : Search spud mix : Calendar List spud
spudId	string	Id of the DIV that you want to contain the spud. You can insert spuds in-place into your document or into an explicit DIV location. If you insert spuds in-place do not pass this parameter. The spud will be written directly into the page using `document.write()`. If you need to place the spud into a DIV that has already been declared on your page, you can pass a `spudId` argument with the id of this DIV.
url	object	Associative array of extra url parameters. The URL parameters override views and behavior set in the Publishing Control Panel. What URL parameters are supported? Can you show me an example?
*	*	Additional spud-specific properties. A spud's supported properties are listed on the spud's page. Use the links in the spudType row above to view a spud's page.

Examples

Here are a couple of examples that show different arguments with the Trumba Tribune demonstration calendar. You can find more in the spud properties page.

Notes As stated above, these properties override the Publishing Control Panel settings. We recommend that you use the control panel to customize spuds unless you want to change the appearance or behavior of one instance of a spud on your site.

Also, the code samples below do not include the spud controller or script tags, so if you copy and paste the code, you need to add those missing lines.

The first example displays the Upcoming Events Crawler spud with local properties.

$Trumba.addSpud(
{ webName: "trumbatribune",
  spudType: "crawler",
  url: { events: 7 },
  Speed: 30,
  Width: 450px,
  BackgroundColor: "#660000",
  teaserBase: "http://tribune.trumba.com/online_calendars/display_locate_events.aspx"});

Here's what the above example looks like:

The next example displays the main calendar spud in Table view with events that take place in the North Cith region. You display the North City events by using parameters for a Region filter that has been set up for the calendar, which looks like the following picture. Tell me more about filtering events.

$Trumba.addSpud(
{ webName: "trumbatribune",
spudType: "main",
url: { template: "table", filter1: "North City"} });