Get Started 3: Spuds, publishing, and integrating calendars

The Trumba editing environment opens to your new calendar, which shows as active (and selected with a check mark) under Current Publication on the left.

Notice the three default views available when you first set up a new calendar: Classic Table, List, and Classic Month.

The dates for your events may be different from the dates shown here.

Close the preview window.

1. On the right side of the Main Calendar Spud title bar, click Add a Calendar View.

   Notice the choices you have for controlling the event display.

2. Select the 3 Columns thumbnail image, and then click OK.
3. Check out the options available.
4. Accept the defaults for now, and then click OK again.
5. At the bottom of the Main Calendar Spud box, click Preview.

   You now have four views available, Classic Table, List, Classic Month, and 3 Columns. The following screenshot shows the 3 Columns view.

   

   Preview window, with the current, available views listed in tabs at the top.

Note The Month List spud is available, but not enabled by default for your hosted calendar. To enable it, go to the Publishing Control Panel > Hosted View tab, click Edit Settings & Styles, and then set Select month list spud to Yes.

You can always click Preview on the Hosted View tab to see your enabled spuds in action.

1. At the bottom of the Filter box, click Edit Settings & Styles.
2. On the Edit Settings for Filter page, for Filter by, pull down the [add new filter] menu, select Neighborhood, and set it to allow for Single Value:

   

   Adding the Neighborhood field to your filter spud.

3. Accept the other defaults (for now), and then click OK.
4. To preview the change to the filter, on the Publishing Control Panel page, click the Hosted View tab, and then, at the bottom of the Hosted View box, click Preview.
5. In the preview window, to the left of the calendar, you now see that the Neighborhood custom field has been added to the filter spud.

   

   Neighborhood custom field added to the filter spud.

Tip Even if you've created the new Neighborhood custom field, and added that field to the Filter spud, you'll still need to add an event to your calendar with the Neighborhood field set in order to see it added to the filter on your hosted calendar. Fields/values appear on the calendar only if they exist on an event.

Notice that you have the Date Finder, Day Summary, and Event Slider spuds on your default calendar.

Preview window showing the DateFinder and Event Slider spuds outlined in red, and the Day Summary spud outlined in blue.

Note that field Spud will appear on the same page as the main calendar spud isn't selected on your default promotion spuds, as highlighted in red in the screenshot below.

When you don't set this field, your spud code includes the teaserBase property, as shown highlighted in blue in the screenshot below. The teaserBase property delivers the URL to which visitors are directed when they click an event, title, or footer link in a promotion spud. For more information, go to Spud Properties.

Try toggling the field on and off again to see this change in the code.

Spud code for the Date Finder spud, with the teaserbase line highlighted in blue.

To do so, you replace the URL in the teaserBase property for each promotion (e.g., in the spud code snippet that you've embedded on your website) with the URL for your own calendar page.

The most efficient way to do this is to:

1. Go to the Edit Publish Settings page.
2. Under Publish Settings, in the Calendar address field, type the URL for the calendar page on your website.
3. Click OK.

Now, each time you create a promotion spud, the calendar address URL automatically replaces the default value in the teaserBase property.

Note For the Event Slider spud on your default hosted calendar, notice that in Publish Settings, the Featured event field is set to Featured events. For more information, go to Feature Events for Higher Visibility and Customize the Event Slider.

1. On the Promotion Spuds tab, click Add a Promotion Spud.
2. On the Add Spud page, select Photo Upcoming, and then click OK.
3. On the Edit Settings for Photo Upcoming page, on the Settings tab, under Display Settings, click [add new field], and then add Audience and Event Type.
4. Under Paging, for Events Per Page, type 3.
5. Under Display Options, for Footer calendar link label, replace the default with View our full calendar.
6. Click the Styles tab. Under General, for Border size, type 2px. Under Other Fields, change the font size to 9pt. Click OK.
7. On the Promotion Spuds tab, in the Photo Upcoming box, at the bottom left, click Preview. For our sample calendar, we see:

   

   Previewing the Photo Upcoming spud.

   Notice how the custom Audience and Event Type fields and the footer link label we updated appear in the spud preview.

The code for the main calendar spud is displayed in a gray box in the Main Calendar Spud section.

The calendar displays in Classic Table view, the default view generated by the wizard.

Tip When you view the page in a browser, you'll notice that placing the spuds inside a table will display them at more appropriate widths and in better positions in relation to one another.

For the purposes of the following procedure, create a test HTML page for the calendar and control spuds, called calendarpage.html, and one for the promotion spuds, called promopage.html. To try it:

1. On the Publishing Control Panel page, click the Control Spuds tab.
2. In the View Chooser Tabbed box, copy the spud code, and then paste it into the calendarpage.html page.

   At this point, you might want to contain the spud code in a table so that the main calendar and other spuds look better on the page.

   For example, our code for calendarpage.html looks like the following:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Main calendar and control spuds test page</title>
   </head>
   
   <body>
   
   <h1>Main calendar and control spuds</h1>
   
   <table width=800 border=0 cellpadding=10 cellspacing=0>
   

   <tr valign=top>
   

   <td width=200>

   <script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script>
   <script type="text/javascript">
   $Trumba.addSpud({
   webName: "your-calendar-events",
   spudType : "tabchooser" });
   </script>
   <script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script>
   <script type="text/javascript">
   $Trumba.addSpud({
   webName: "your-calendar-events",
   spudType : "filter" });
   </script>

   </td>
   <td width=600>

   <script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script>
   <script type="text/javascript">
   $Trumba.addSpud({
   webName: "your-calendar-events",
   spudType : "main" });
   </script>
   

   </td>

   </tr>

   </table>
   
   </body>
   </html>

3. Now, if you've added Photo Upcoming (see the section above called: "How do promotion spuds work on your hosted calendar?"), go to the Promotion Spuds tab.

   In the Photo Upcoming box, copy the spud code, and then paste it into the promopage.html page.

   Tip The promotion spud will look better if you enclose it in a table with an assigned width of 300 pixels or so.

4. To customize the code you just pasted so clicks on the promotion spud open calendarpage.html, replace the default URL in the teaserBase property with calendarpage.html.
   <script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script>
   <script type="text/javascript">
   $Trumba.addSpud({
   webName: "your-calendar-events",
   spudType : "upcomingphoto" ,
   teaserBase : "calendarpage.html" });
   </script>
   
5. Open promopage.html in a browser. Click an event title or the link in the footer of the Photo Upcoming spud to go to the full calendar page.