Get Started Lesson 2: Integrate your calendar and calendar spuds into your website

If you haven't published your top-level calendar, when you click the Publish button, you'll see the Publish Settings page. Under Mix In Events From These Calendars, select the subcalendars you created. Click Publish at the bottom of the page.

On the Publish Settings tab, you see a summary of the settings you chose when you first published your calendar. In addition, you have some options:

• To return to Publish Settings page and change those settings, click Edit Publish Settings.
• To customize Add to My Calendar and other icons that appear on your calendar and in event details, click Edit Icons.
• To customize global styles that affect many views of your calendar, click Edit Styles.
• To customize event colors, click Edit Calendar Colors.
• To preview your calendar and all the other spuds you've customized, click Preview all Spuds.

This tab focuses on your published calendar, which is the Main calendar spud.

• At the top, you see some code in a <script> tag. This is code that you can copy and paste into the code for a page on your site to display your Trumba calendar.

  

  Click Preview to see how your events look in the view you chose when you first published the calendar.

• Under Available Calendar Views, you see the views that are available to your site visitors if you add a View Chooser spud to your site. You'll learn more about the View Chooser spud below
• Depending upon how much of the first lesson you completed, you see only the Classic Table view or the Classic Table and 3 Columns views. To add another view, on the Main Calendar Spud menu bar, click Add a Calendar View. Click List, click OK, and then click OK again.

  

  You can remove, customize, and preview each view. The view with the darker-colored header is the default view, the view site visitors see when they first navigate to the calendar page on your website.

Control spuds do what their name implies. When you include these spuds on the same web page as your calendar, your visitors can use them to control which events are displayed and how they are presented.

• Click the Control Spuds tab.
• Click Add a Control Spud in the menu bar. Click View Chooser, click OK, and then click OK again.
• Back on the Control Spuds page, click Preview under the View Chooser spud to get an idea of how the spud looks and what it does.

  

  In the View Chooser preview, notice that the views you see in the drop-down list correspond to the views you added to the Calendar Spuds tab in the Publishing Control Panel.

  See a View Chooser spud in action.

Include Promotion spuds on pages throughout your website to "tease" site visitors with event information. By clicking links in a Promotion spud, visitors can see event details or go to the page on your site that includes the full calendar. If you choose, visitors can also hover over an event description to see a popup containing event details.

• To see what Promotion spuds are available, click the Promotion Spuds tab, and then click Add a Promotion Spud. Click Upcoming Events. On the Edit Settings page, click OK.
• Back on the Promotion Spuds tab, click Preview below the Upcoming Events spud to see a preview of how the spud will look on your website.

  

  See an Upcoming Events spud in action.

When you publish a calendar, a web page for the calendar is automatically created that is hosted on the Trumba Connect website. To view the hosted calendar, click the Hosted Calendar tab in the Publishing Control Panel, and then click Preview.

In this example, productbseminars is the unique Web name that this calendar's publisher chose when they originally published the calendar.

The hosted page is useful primarily as a way to preview your calendar with its associated Control spuds.

• The first section looks like this:
  <script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script>

  This code controls communication between a spud and your calendar data on the Trumba Connect servers and between spuds, if you embed more than one on a page. We provide this code with every spud, in case you use a spud by itself. However, if you embed multiple spuds on the same page, it's best to paste this code just once, preferably in the <head> portion of your page.

• The second section looks something like this:
  <script type="text/javascript">
  $Trumba.addSpud(
  { webName: "productbseminars",
    spudType: "main"});
  </script>

  This is the code for the spud itself. productbseminars is the unique Web name that this calendar's publisher chose when they originally published the calendar (your spud code will include the web name you chose). main is the type of spud, in this case the main calendar spud.

Tips

• Remember to copy and paste just the second "spud" section of the code if you're embedding a spud into a page where another spud is already embedded.
• In some cases, you many need to place spuds into an HTML div or table to display them at their appropriate widths.
• Most of the promotion spuds include an additional line in the second section of the code that looks like this:
  teaserBase: "URL of the page that contains your main calendar spud" });

  The teaserBase URL should match the URL of the page on your website where the main calendar spud is embedded. Replace the placeholder URL with the correct URL after you paste the code into your web page.

• You can find lots of additional information about embedding spuds by clicking Help at the top of the Publishing Control Panel page.