Promotion Spuds

You automatically create this group of customizable Promotion spuds each time you publish a calendar in Trumba® Connect.

Promotion spuds are designed to promote events from pages throughout your website. By adding Promotion spuds to your home and other pages, you increase awareness of upcoming events and drive traffic to the pages where full calendars appear.

You might occasionally use a Promotion spud on the same page as the Calendar spud to offer an alternative display of event information. For example, see the Student Development page where the Calendar spud groups events by date and the Promotion spud organizes events by type.

To appreciate the level of control you have over spud appearance, look carefully at the spud collection below. Most of the spuds have a white background while the Fader and Vertical Crawler are transparent.

What are spuds?

Crawler
close

Crawler Promotion Spud

expand What it does

  • Displays a horizontal scrolling list of upcoming events.
  • Click an event to open an event details page.

expand What you can customize

  • Colors and fonts.
  • Start and end dates.
  • Number of events to scroll before starting over.
  • Scrolling speed.
  • Whether to show or hide the border.
  • Which levels of featured events to display.

expand Try 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:500px; border: 2px solid #d8dec6; margin-bottom:20px;"> <script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script>
<script type="text/javascript">
$Trumba.addSpud({
webName: "trumbauevents",
spudType: "crawler",
teaserBase : "http://university.trumba.com/online_calendars/main_month.aspx" }); </script></div></body></html>

Upcoming Events
close

Upcoming Events Promotion Spud

expand What it does

  • Displays an interactive list of upcoming events.
  • Hover over an event to display brief details.
  • Click an event to open the event details page.
  • Click See all in the footer to navigate to the full calendar.

expand What you can customize

  • Colors, fonts, padding.
  • Start and end dates.
  • Whether or not to display hover popup window.
  • Number of events per page.
  • Whether or not to display header, footer, and border.
  • Which levels of featured events to display.

expand Try 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:2px solid #789149; margin-bottom:20px;"> <script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script>
<script type="text/javascript">
$Trumba.addSpud({
webName: "trumbauevents",
spudType: "upcoming",
teaserBase : "http://university.trumba.com/online_calendars/main_month.aspx" }); </script></div></body></html>

Upcoming Events
Upcoming Photo
close

Photo Upcoming Promotion Spud

expand What it does

  • Displays a list of upcoming events with photos.
  • Click More... links to open event details pages.
  • Click See all in the footer to navigate to the full calendar.

expand What you can customize

  • Colors, fonts, padding, and borders.
  • Photo size.
  • Start and end dates.
  • Number of events per page.
  • Which fields to display.
  • Whether or not to display border and footer.
  • Whether or not to display a hover popup.
  • Which levels of featured events to display.

expand Try 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:300px; border:2px solid #789149; margin-bottom:20px;"> <script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script>
<script type="text/javascript">
$Trumba.addSpud({
webName: "trumbauperformance",
spudType: "upcomingphoto",
teaserBase : "http://university.trumba.com/online_calendars/performing_arts_photo_events.aspx" }); </script></div></body></html>

Fader
close

Upcoming Fader Promotion Spud

expand What it does

  • Displays a list of upcoming events that fades from one group of events to the next.
  • Click an event to open the event details page.
  • Click See all in the footer to navigate to the full calendar.

expand What you can customize

  • Colors, fonts, and padding.
  • Start and end dates.
  • Number of events to display before starting over.
  • Number of events to display in each group.
  • Number of seconds a group of event is visible.
  • Number of seconds the fade lasts between groups.
  • Whether or not to display border and footer.
  • Which levels of featured events to display.

expand Try 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:2px solid #789149; margin-bottom:20px;"> <script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script>
<script type="text/javascript">
$Trumba.addSpud({
webName: "trumbauevents",
spudType: "upcomingfader",
teaserBase : "http://university.trumba.com/online_calendars/main_month.aspx" }); </script></div></body></html>

Vertical Crawler
close

Upcoming Vertical Crawler Promotion Spud

expand What it does

  • Displays a vertical scrolling list of upcoming events.
  • Click an event to open the event details page.
  • Click See all in the footer to navigate to the full calendar.

expand What you can customize

  • Colors, fonts, and padding.
  • Start and end dates.
  • Spud height.
  • Number of events to scroll before starting over.
  • Whether or not to show white space before starting over.
  • Scroll mode (continuous, by visible page, or by event).
  • How long to pause between scroll units.
  • Whether or not to display border and footer.
  • Which levels of featured events to display.

expand Try 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:2px solid #789149; margin-bottom:20px;"> <script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script>
<script type="text/javascript">
$Trumba.addSpud({
webName: "trumbauevents",
spudType: "upcomingvcrawler",
teaserBase : "http://university.trumba.com/online_calendars/main_month.aspx" }); </script></div></body></html>

Upcoming Preview
close

Upcoming Preview Promotion Spud

expand What it does

  • Displays a list of upcoming events, including event notes, grouped by date.
  • Click an event to open the event details page.
  • Click See all in the footer to navigate to the full calendar.

expand What you can customize

  • Colors, fonts, and padding.
  • Start and end dates.
  • Whether or not to display event notes.
  • Number of characters to display in notes.
  • Number of events per page.
  • Whether or not to display border and footer.
  • Which levels of featured events to display.

expand Try 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:2px solid #789149; margin-bottom:20px;"> <script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script>
<script type="text/javascript">
$Trumba.addSpud({
webName: "trumbauevents",
spudType: "upcomingpreview",
teaserBase : "http://university.trumba.com/online_calendars/main_month.aspx" }); </script></div></body></html>

Trumba Connect

Trumba University 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:2px solid #789149; margin-bottom:20px;"> <script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script>
<script type="text/javascript">
$Trumba.addSpud({
webName: "trumbauevents",
spudType: "datefinder",
teaserBase : "http://university.trumba.com/online_calendars/main_month.aspx" }); </script></div></body></html>

Event Submission
Day Summary
close

Upcoming Day Summary Promotion Spud

expandWhat it does

  • Displays an interactive list of events occurring on the current day.
  • Click an event to open the event details page.

expandWhat you can customize

  • Colors and fonts.

expand Try 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; margin-bottom:20px;"> <script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script>
<script type="text/javascript">
$Trumba.addSpud({
webName: "trumbauevents",
spudType: "daysummary",
teaserBase : "http://university.trumba.com/online_calendars/main_month.aspx" }); </script></div></body></html>

Date Table
close

Upcoming Date Table Promotion Spud

expandWhat it does

  • Displays a compact list of upcoming events by date.
  • Hover over an event to display details.
  • Click an event to open the event details page.
  • Click See all in the footer to navigate to the full calendar.

expandWhat you can customize

  • Colors and fonts.
  • Start date, end date, and number of events displayed.
  • Whether or not to display hover popup.
  • Whether or not to display footer.

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:2px solid #789149; margin-bottom:20px;"> <script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script>
<script type="text/javascript">
$Trumba.addSpud({
webName: "trumbauevents",
spudType: "upcomingdatetable",
teaserBase : "http://university.trumba.com/online_calendars/main_month.aspx" }) </script></div></body></html>

Upcoming Grouped
close

Upcoming Grouped Promotion Spud

expand What it does

  • Displays a list of upcoming events grouped by description. Most useful with calendars that contain repeating events.
  • Hover over an event to display brief details.
  • Click an event to open the event details page.
  • Click See all in the footer to navigate to the full calendar.

expand What you can customize

  • Colors, fonts, and padding.
  • Start and end dates.
  • Total number of events listed under event descriptions.
  • Whether or not to support hover popup windows.
  • Whether or not to display border and footer.
  • Which levels of featured events to display.

expand Try 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:2px solid #789149; margin-bottom:20px;"> <script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script>
<script type="text/javascript">
$Trumba.addSpud({
webName: "trumbauevents",
spudType: "upcominggrouped",
teaserBase : "http://university.trumba.com/online_calendars/main_month.aspx" }); </script></div></body></html>