Supported properties for customizing spuds

In addition to URL parameters that fine-tune spud display or behavior, you can use properties. Properties can do things like:

Lead upcoming events or date finder spuds to your embedded calendar spud instead of the Trumba Connect hosted view.
Change the styles for the crawler spud.
Remove the upcoming events spud's header and footer.

Properties supported by multiple spuds

Property	What you set with it	Spuds/views that support it
teaserBase	Where to direct visitors when they click an event link in a spud Example	Date finder, upcoming events, and crawler spuds
spudConfig	Naming for multiple configurations of the same spud Example	All control spuds and promotion spuds

Main spud properties

Property	Description and example
detailBase	This is a URL that points to a page that contains your main calendar spud, for the purpose of displaying event details on a different page or in a new window. When a visitor clicks an event link on the main spud, it jumps to the page defined by detailBase to display the event details. Example
openInNewWindow	Add `openInNewWindow: "true"` in conjunction with the detailBase property to open event details in a new window. When a visitor clicks an event link on the main spud, it jumps to new window displaying the page defined by detailBase to display the event details. Example

Upcoming event spud properties

Property	Description and example
HideHeader	Add `HideHeader: "true"` to remove the header.
HideFooter	Add `HideFooter: "true"` to remove the footer.
HideBorder	Add `HideBorder: "true"` to remove the border.
BorderColor	HTML hexadecimal color value of spud border.
HeaderColor	HTML hex color value of spud header background.
teaserBase	See description under Properties supported by multiple spuds section.

Example

Upcoming events crawler spud properties

For CSS properties (all but Speed), you can specify any valid CSS value, including multiple values where allowed.

Example

Property	Description and example
Width	Specify an absolute or relative value to set the crawler width. `Width: "500px"` or `Width: "75%"`
FontSize	`FontSize: "1.2em"`
FontFamily	`FontFamily: "Georgia, Serif"`
FontWeight	`FontWeight: "normal"`
FontColor	`FontColor: "#800000"` or `FontColor: "maroon"`
HoverColor	Sets the color of the linked text when a visitor hovers the mouse over the link. Use the same format as for FontColor property.
BackgroundColor	Sets the color of the crawler background. Use the same format as for FontColor property.
Border	Adds a border around the crawler. Set values for line weight, style, and color. `Border: "medium solid #0066ff"`
Speed	The time in miliseconds that the crawler waits between scrolls. Setting a higher value slows down the crawler. Value must be an integer greater than or equal to 1. `Speed: "90"`
teaserBase	See description under Properties supported by multiple spuds section.

Examples

This section uses the Trumba University demonstration calendar to show how to use properties to do the following:

Customize the upcoming events spud and point it to your main calendar page instead of the Trumba Connect hosted site
Add a detailBase to open event details in a new page on your site
Open event details in a new window
Customize the crawler spud
Create multiple configurations of the same control or promotion spud

Tip For more examples, see the Examples section of the How the spud code works… topic, and the Spud FAQs.

Customize the upcoming events spud

Use this code to tell the upcoming events spud to display without a footer and set a custom header and border color.

The teaserBase also directs a visitor who clicks an event link to the main calendar hosted on the Trumba Connect site. To keep visitors on your site, you can replace the Trumba Connect URL with the URL of the page in which your main spud is embedded.

$Trumba.addSpud(
{ webName: "trumbauevents",
  spudType: "upcoming",
  HideFooter: "true",
  HeaderColor: "#cc99ff",
  BorderColor: "#8FFF1F",
  teaserBase: "http://university.trumba.com/online_calendars/main_month.aspx"});

Add a detailBase

The main spud defined by this code has a detailBase property to show event details in another main spud that's embedded in a separate page. In this case, the page is http://university.trumba.com/online_calendars/control_spuds.aspx.

Open event details in a new window

The main spud defined by this code uses the detailBase property along with the openInNewWindow property to show event details in new window for a spud that's embedded in a separate page. This particular example opens the details on a calendar's Trumba Connect hosted page. (The detailBase property should be set to the URL of the page that holds a main calendar spud.)

Customize the crawler spud

Here's a crawler that takes advantage of all of the customization properties and adds a URL argument.

$Trumba.addSpud (
{ webName: "trumbauevents",
  spudType: "crawler",
  Width: "100%",
  FontSize: "8pt",
  FontFamily: "Verdana, Sans-Serif",
  FontWeight: "bold",
  FontColor: "#0066ff",
  HoverColor: "#9933ff",
  BackgroundColor: "#330033",
  Border: "medium solid #0066ff",
  Speed: "90",
  url: { events: "15"},
  teaserBase: "http://university.trumba.com/online_calendars/main_month.aspx" });

Create multiple configurations of the same control or promotion spud

Use the SpudConfig property to publish the same control or promotion spud on multiple web pages with different settings or styles for a calendar. (Multiple configurations are not available for the main calendar view.)

The spud configuration name in the script identifies which spud configuration is used. The spudConfig name is case insensitive and must be unique for a particular spud type (for example, upcoming events). The example shows two configured upcoming events spuds that use different settings for different pages on a web site; the first is the default and the second has a spud configuration name of "futureevents". Notice the difference in the spud settings and scripts.