Get Started Lesson 2: Publish and embed calendars

Time to complete: approximately 30 minutes

Tip You can print a printer-friendly version of this lesson by choosing Print from your browser's File menu. If you prefer to work with the lesson on-screen, it's probably easiest to have two browser windows open, one for the lesson content and the other for Trumba Connect.

In the first lesson in this series, you created a calendar with some custom fields and events. In this lesson, you'll learn how to publish a calendar and integrate it—using copy and paste—into a website.

Publish a calendar to the Web.
Integrate a calendar into a website.

Note To get the most out of this lesson, it's best if you have created a calendar that includes some custom fields and future events. If you haven't created a calendar, see Lesson 1.

Publish a calendar

Now that you have events on a calendar, you're ready to publish that calendar. Publishing is the first step toward integrating the calendar into a website, which you'll do later in this lesson.

In the process of publishing a calendar, you make a lot of choices, such as:

How you want to display your events.
How public you want the calendar to be.
Which spuds you want to publish along with the calendar.

We'll deal with a couple of those choices here and talk about others in subsequent lessons.

Publish a calendar and a filter spud

In the previous lesson, we created a calendar, added some events, and created custom fields that reflect ways calendar visitors might want to filter the events. For example, in the Community Events calendar, we decided visitors might want to filter by Event Type and Age Range.

During this publication process, we'll:

Publish the calendar, which automatically creates a main calendar spud as well as a collection of customizable control and promotion spuds.
Put filtering into action by basing a filter control spud on the custom fields we created.

Tip You'll learn a lot more about spuds in Lesson 3 in this series. But, for now, here's a brief explanation of the term. Every view of events that you create in Trumba Connect, including the main calendar, is a spud. Spud is Trumba's word for widget. Spuds are little interactive programs that you add to any webpage to provide site visitors with customized views of event information. Using spuds allows you to update information in one place and distribute it in different ways in multiple locations.

If you haven't already created custom fields and added events to a calendar, see Create custom fields in the previous lesson.
In the Trumba editing environment, above the Community Events calendar, click Publish.
On the Publish Community Events page, under Default Calendar View, leave the Classic Table view selected.
Tip At this point, you don't have to worry too much about the view you choose. You can preview the view later in the process and change it if you want.
Under Publish Settings, Calendar name is already filled in with the name you gave your calendar when you created it. For Unique web name, type a web name for your calendar, or use the default web name provided. For this calendar, we used the name community-events-demo. Because each published calendar must have a unique name on the Trumba servers, type the following name for your community events calendar: community-events-yourname.
Tip When you're publishing your actual calendar, it makes sense to choose a name that is easy to remember. This name becomes part of the code that you copy and paste to integrate your calendar into your website. To see if a name is already taken, click Check availability.
For now, we'll ignore the other settings. Click Publish at the bottom of the page to publish your calendar.
On the Publishing Control Panel page, select the Calendar Spuds tab. In the Main Calendar Spud section, at the bottom of the Main Calendar Spud box, click Preview.

You see a preview of how your events will display in your published calendar.

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

Close the preview window.
On the right side of the Main Calendar Spud title bar, click Add a Calendar View. Select 3 Columns by clicking on the thumbnail image, and then click OK. On the Edit Settings for 3 Columns page, notice the options you have for controlling event display. For now, click OK to accept the default values.
At the bottom of the Main Calendar Spud box, click Preview again.

In the preview window, switch between Classic Table and 3 Columns view to see the advantages of each.
Close the preview window.
There are lots of other settings on the Publishing Control Panel page but we'll deal with those in future lessons. For now, click the Control Spuds tab, and then click Add a Control Spud.
In the Add Spud window, click the Filter thumbnail, and then click OK.
On the Edit Settings page, for Event Template, select the event template you created in the first lesson. For Filter by, select Event Type, and then, for Allow, select Multiple Values.
For [add new filter], select Age Range, and then, for Allow, select Multiple Values.

The filters for your filter control spud should look like this.
Click OK.
To preview the filter you just created, on the Publishing Control Panel page, click the Hosted View tab, and then, at the bottom of the Hosted View box, click Preview.
In the preview window, to the left of the calendar, you see the Event Type and Age Range filters.

Event Type and Age Range filter spuds on the hosted calendar preview page.
- Clear the Arts and Culture check box. The Jonah and the Big Whale event disappears. Select the check box again.
- Clear the Seniors check box. The Gentle Tai Chi event disappears. Select the check box again.
Close the preview page. On the Publishing Control Panel page, click Done.
Back in the Trumba editing environment, at the top of the calendar to the right of the calendar name, you'll see Published at and a link to your published calendar on a page hosted by Trumba Connect. Click the link to see the calendar.

Because you published the Community Events calendar, it's now described as a publication rather than a calendar. When you display it, it appears in the Current Publication list.

Integrate your calendar into your website

Everything you need to integrate the main calendar (and other spuds) into your website is available in the Publishing Control Panel.

Each spud is accompanied by some code enclosed in a <script> tag. You copy and paste that code (including the tags) into pages on your site to embed the spuds there.

For example, this is the code associated with the Community Events calendar created in Lesson 1:

The blue elements indicate the unique web name we chose when we published the calendar (community-events-demo) and the spud type (main).

Interested in more detail about spud code? See Customize spud code.

Integrate spuds into your website

To try integrating a spud into a website, you must be able to create and preview HTML pages.

In the Trumba editing environment, above the Community Events calendar, click Publish.
On the Publishing Control Panel page, click the Calendar Spuds tab.
The code for the calendar spud is displayed in a gray box in the Main Calendar Spud section.
Copy the code and paste it into the <body> portion of an HTML page.
View the page in a browser.
The calendar displays in Classic Table view, the default view we selected when we published the calendar. In the next lesson, you'll learn how to give site visitors the option of choosing alternate views.
To add the filter control spud to the webpage, on the Publishing Control Panel page, click the Control Spuds tab.
In the Filter box, copy the code and paste it into the <body> portion of the HTML page under the main calendar code.
Your HTML page should look something this:
<!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> Spuds test page </title></head>

<body>

<script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script>
<script type="text/javascript"> $Trumba.addSpud({ webName: "community-events-demo", spudType : "main" }); </script>
<noscript>Your browser must support JavaScript to view this content. Please enable JavaScript in your browser settings then try again. <a href='http://www.trumba.com'>Events calendar powered by Trumba</a></noscript>

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

</body>
</html>

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


Trumba Help Center	What’s New \| FAQ \| Support Forum \| Email Support
See Also Lesson 1 Create calendars, fields, and events Lesson 3 Control and promotion spuds Lesson 4 Scheduled calendar email Lesson 5 Event and calendar actions Lesson 6 Event registration	Get Started Lesson 2: Publish and embed calendars Time to complete: approximately 30 minutes Tip You can print a printer-friendly version of this lesson by choosing Print from your browser's File menu. If you prefer to work with the lesson on-screen, it's probably easiest to have two browser windows open, one for the lesson content and the other for Trumba Connect. In the first lesson in this series, you created a calendar with some custom fields and events. In this lesson, you'll learn how to publish a calendar and integrate it—using copy and paste—into a website. Publish a calendar to the Web. Integrate a calendar into a website. Note To get the most out of this lesson, it's best if you have created a calendar that includes some custom fields and future events. If you haven't created a calendar, see Lesson 1. Publish a calendar Now that you have events on a calendar, you're ready to publish that calendar. Publishing is the first step toward integrating the calendar into a website, which you'll do later in this lesson. In the process of publishing a calendar, you make a lot of choices, such as: How you want to display your events. How public you want the calendar to be. Which spuds you want to publish along with the calendar. We'll deal with a couple of those choices here and talk about others in subsequent lessons. Publish a calendar and a filter spud In the previous lesson, we created a calendar, added some events, and created custom fields that reflect ways calendar visitors might want to filter the events. For example, in the Community Events calendar, we decided visitors might want to filter by Event Type and Age Range. During this publication process, we'll: Publish the calendar, which automatically creates a main calendar spud as well as a collection of customizable control and promotion spuds. Put filtering into action by basing a filter control spud on the custom fields we created. Tip You'll learn a lot more about spuds in Lesson 3 in this series. But, for now, here's a brief explanation of the term. Every view of events that you create in Trumba Connect, including the main calendar, is a spud. Spud is Trumba's word for widget. Spuds are little interactive programs that you add to any webpage to provide site visitors with customized views of event information. Using spuds allows you to update information in one place and distribute it in different ways in multiple locations. If you haven't already created custom fields and added events to a calendar, see Create custom fields in the previous lesson. In the Trumba editing environment, above the Community Events calendar, click Publish. On the Publish Community Events page, under Default Calendar View, leave the Classic Table view selected. Tip At this point, you don't have to worry too much about the view you choose. You can preview the view later in the process and change it if you want. Under Publish Settings, Calendar name is already filled in with the name you gave your calendar when you created it. For Unique web name, type a web name for your calendar, or use the default web name provided. For this calendar, we used the name community-events-demo. Because each published calendar must have a unique name on the Trumba servers, type the following name for your community events calendar: community-events-yourname. Tip When you're publishing your actual calendar, it makes sense to choose a name that is easy to remember. This name becomes part of the code that you copy and paste to integrate your calendar into your website. To see if a name is already taken, click Check availability. For now, we'll ignore the other settings. Click Publish at the bottom of the page to publish your calendar. On the Publishing Control Panel page, select the Calendar Spuds tab. In the Main Calendar Spud section, at the bottom of the Main Calendar Spud box, click Preview. You see a preview of how your events will display in your published calendar. The dates for your events may be different from the dates shown here. Close the preview window. On the right side of the Main Calendar Spud title bar, click Add a Calendar View. Select 3 Columns by clicking on the thumbnail image, and then click OK. On the Edit Settings for 3 Columns page, notice the options you have for controlling event display. For now, click OK to accept the default values. At the bottom of the Main Calendar Spud box, click Preview again. In the preview window, switch between Classic Table and 3 Columns view to see the advantages of each. Close the preview window. There are lots of other settings on the Publishing Control Panel page but we'll deal with those in future lessons. For now, click the Control Spuds tab, and then click Add a Control Spud. In the Add Spud window, click the Filter thumbnail, and then click OK. On the Edit Settings page, for Event Template, select the event template you created in the first lesson. For Filter by, select Event Type, and then, for Allow, select Multiple Values. For [add new filter], select Age Range, and then, for Allow, select Multiple Values. The filters for your filter control spud should look like this. Click OK. To preview the filter you just created, on the Publishing Control Panel page, click the Hosted View tab, and then, at the bottom of the Hosted View box, click Preview. In the preview window, to the left of the calendar, you see the Event Type and Age Range filters. Event Type and Age Range filter spuds on the hosted calendar preview page. Clear the Arts and Culture check box. The Jonah and the Big Whale event disappears. Select the check box again. Clear the Seniors check box. The Gentle Tai Chi event disappears. Select the check box again. Close the preview page. On the Publishing Control Panel page, click Done. Back in the Trumba editing environment, at the top of the calendar to the right of the calendar name, you'll see Published at and a link to your published calendar on a page hosted by Trumba Connect. Click the link to see the calendar. Because you published the Community Events calendar, it's now described as a publication rather than a calendar. When you display it, it appears in the Current Publication list. Integrate your calendar into your website Everything you need to integrate the main calendar (and other spuds) into your website is available in the Publishing Control Panel. Each spud is accompanied by some code enclosed in a <script> tag. You copy and paste that code (including the tags) into pages on your site to embed the spuds there. For example, this is the code associated with the Community Events calendar created in Lesson 1: <script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script> <script type="text/javascript"> $Trumba.addSpud( { webName: "community-events-demo", spudType: "main"}); </script> <noscript> Your browser must support JavaScript to view this content. Please enable JavaScript in your browser settings then try again. <a href='http://www.trumba.com'>Events calendar powered by Trumba</a> </noscript> The blue elements indicate the unique web name we chose when we published the calendar (community-events-demo) and the spud type (main). Interested in more detail about spud code? See Customize spud code. Integrate spuds into your website To try integrating a spud into a website, you must be able to create and preview HTML pages. In the Trumba editing environment, above the Community Events calendar, click Publish. On the Publishing Control Panel page, click the Calendar Spuds tab. The code for the calendar spud is displayed in a gray box in the Main Calendar Spud section. Copy the code and paste it into the `<body>` portion of an HTML page. View the page in a browser. The calendar displays in Classic Table view, the default view we selected when we published the calendar. In the next lesson, you'll learn how to give site visitors the option of choosing alternate views. To add the filter control spud to the webpage, on the Publishing Control Panel page, click the Control Spuds tab. In the Filter box, copy the code and paste it into the `<body>` portion of the HTML page under the main calendar code. Your HTML page should look something this: <!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> Spuds test page </title></head> <body> <script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script> <script type="text/javascript"> $Trumba.addSpud({ webName: "community-events-demo", spudType : "main" }); </script> <noscript>Your browser must support JavaScript to view this content. Please enable JavaScript in your browser settings then try again. <a href='http://www.trumba.com'>Events calendar powered by Trumba</a></noscript> <script type="text/javascript" src="http://www.trumba.com/scripts/spuds.js"></script> <script type="text/javascript"> $Trumba.addSpud({ webName: "community-events-demo", spudType : "filter" }); </script> </body> </html> Tip When you view the page in a browser, you'll notice that placing the spuds in a table would display them at more appropriate widths and in better positions in relation to one another.
Privacy \| Terms \| Public Calendars
© 2004–2013 Trumba Corporation. All rights reserved. Click for trademark information.