Get Started Lesson 3: Customize events and 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.

When your customers visit your website calendar, you want them to:

See your calendar as an integral part of your website that reflects your organization's branding and design.
Get an accurate picture of the specific events your organization sponsors.

Trumba® Connect gives you all the tools you need to customize the colors, fonts, and other aspects of your website calendar and create events tailor-made to meet your requirements.

In this lesson, you'll learn how to:

Customize your calendar and other calendar spuds.
Create event types that contain custom fields.

Customize calendars and other spuds

When you publish a calendar in Trumba Connect, you automatically create a collection of customizable event widgets called spuds. In this lesson, we'll walk through a couple of the many available customization options to give you a sense of the possibilities.

Note You can also customize email messages that you send from your calendars and about your events. You'll see how that works in Lesson 4 of this series.

The customization options we'll work through include:

Choosing the ways that calendar visitors can view your events
Customizing the View Chooser spud.

Choose the ways that calendar visitors can view your events

You give calendar visitors control over the way events are displayed by including a View Chooser spud on the same page as your website calendar. During the calendar publishing process, you decide which calendar view is the default and which other views visitors can choose.

Note To benefit from these examples, its best if you have created a top-level calendar and at least two subcalendars, each of which contains a few future events. If you haven't created any calendars, see Lesson 1 in this series.

Go to the Trumba Connect home page. Click Sign in to sign in to your Trumba account.
In the calendar list, click the arrow to the right of the top-level calendar's name, and then click Go to calendar to display the top-level calendar.
Click Publish above the calendar.
If your calendar is already published, you'll be on the Publishing Control Panel page. On the Publish Settings tab, click Edit Publish Settings to return to the Edit Publish Settings page, and then go on to the next step.
If you hadn't published your calendar yet, you'll see the Publish Settings page. Go on to the next step.
For Default Calendar View, click 3 Columns. This is the view in which events will be displayed by default on your website calendar.
Under Mix-in Events from These Calendars, select the two subcalendars that contain future events. Click OK.
On the Publishing Control Panel page, click the Calendar Spuds tab. Under Available Calendar Views, you see two or three (if you completed lesson 2 in this series) views displayed. The view with the darker-colored header is the default view you just chose on the Publish Settings page. The other views are the view options that will appear in the View Chooser spud.
Under Classic Table, click Remove to eliminate that view. You'll be prompted to confirm that you want to remove it.
In the menu bar at the top of the Main Calendar Spud section, click Add a Calendar View. Click Compact List, and then click OK.
On the Edit Settings page, accept the default settings by clicking OK.
Compact List now appears under Available Calendar Views.
To see previews of how the default and optional calendar views look, click Preview just above the heading Available Calendar Views.

Not happy with the event colors in the previews? You can change them. On the Publish Settings tab in the Publishing Control Panel, click Edit Calendar Colors.
After you've looked at all the views, close the preview window.
To see the list of view choices your calendar visitors will have, click the Control Spuds tab. Under View Chooser, click Preview.
If you don't see View Chooser on the Control Spuds tab, click Add a Control Spud. Click View Chooser, click OK, and then click OK again.
In the Preview window, click the arrow to expand the View drop-down list.
Close the preview window. Go on to the next section in this lesson to see an example of how to customize a Control spud.

Customize the View Chooser spud

You can customize the calendar and other spuds so that they integrate into your overall website design and reflect your organization's branding. In this example, you'll customize the View Chooser spud.

On the Publishing Control Panel page, click the Control Spuds tab.
Tip If you don't know how to get to the Publishing Control Panel page, complete the previous Give it a Try steps in this lesson.
Under View Chooser, click Edit Settings & Styles.
Click the Styles tab. Under View Label, you can change the font, size, color, and weight of the label text.
- The font matches the font for the default calendar view. Because the View Chooser sits next to your website calendar, in most cases you'll leave the font alone.
- Change the size to 11pt.
- The current hexadecimal value for the font color is displayed. Replace the current color with this value: #ff1493.
- Leave the weight as bold.
Under View Dropdown, you can change the font size and the spud width.
- Change the size to 10pt.
- For Width, type "120px" (120 pixels).
Click the Settings tab. For Label, replace the existing text with "Event display:".
Click Preview.

The font size is fairly large, the color is hot pink, the spud width displays too much empty space in the drop-down list, and the label is a bit long. You probably wouldn't want to keep these settings but it gives you an idea of the customization options available to you. Close the preview window, click Reset to Default, and then click OK.
To see how many options you have for customizing the appearance of the main calendar spud, click the Publish Settings tab, click Edit Calendar Colors and Edit Styles & Icons.

Tip To preview all of your spud customization at once, click Preview all Spuds in the menu bar on the Publish Settings tab in the Publishing Control Panel.

Create event types

In Trumba Connect, you can create as many event types as you want to reflect the range of events your organization sponsors. Each event type can contain a combination of standard and custom fields.

You can create event types from scratch or modify a built-in type. In this example, we'll modify a built-in type.

Create a new event type based on a built-in type.
Create a custom field.

Create a "Product seminar" event type

The ability to create event types gives you control over exactly what information appears in your published events.

Go to the Trumba Connect home page. Click Sign in to sign in to your Trumba account.
Under Other Tasks, click Define custom fields.
On the Define Custom Fields page, under Event Types, click the built-in type Presentation.

The Built-in Event Type form opens where you see a list of the fields included in the Presentation event type.
This looks like a reasonable model for a Product seminars event type. You definitely want the Presenter and Contact fields and you can get rid of the fields you don't want later. Click Create Copy.
In the Create a New Event Type form, for Type name, type "Product seminar". Type a description if you want. This is useful primarily if more than one person will be adding events to your calendars.
Under Which Fields Should Be Included, you can add or remove fields so the events contain exactly the information you want. Under Selected fields, in the Remove column, select all the fields except "Presenter" and "Contact". Click Update Field List.
Under Predefined Fields, select Cost. Click Add Fields to Type.
Notice that the User Defined Fields box is empty. We'll go and create a user defined field after we finish creating this event type.
Under Selected Fields, you can determine the order in which the fields appear on your event form. In the box to the left of Cost, type "2". Click Update Field List.
At the bottom of the form, click OK.
In the Define Custom Fields form, in the Event Types section, Product seminar appears at the top of the list.
Continue with the steps below to create a custom field.

Create a "Product name" custom field

You can create as many custom fields as you want and include them in one or more event types. One way to think about which custom fields you might need is to consider how you want your customers to filter, or limit, the events they see. For example, if you offer product seminars on several different products, you might want customers to be able to see only events related to one specific product.

On the Define Custom Fields page, at the bottom of the Fields section, click Create a new field.
Tip If you aren't on the Define Custom Fields page, in the Other Tasks list, click Define custom fields.
On the Create a New Custom Field page, in the Field Name section, for Field name, type "Product name". Type a description if you want. This is useful primarily if more than one person will be adding events to your calendars.
For Field type, leave the default Single line of text selected.
Tip You might want to take a look at the entire Field type list to get a sense of how many options you have.
For Default value, you might type a specific product name, if most of your product seminars relate to that product. In this case, just leave Default value blank.
Select Value required. This means that when you or others in your organization create events that include a "Product name" field, the field must have a product name in it or you'll see an error message.
For Owning calendar, choose the calendar that must be displayed for you to edit this custom field.
For Visibility, select Allow this field to be published. This means that the field will appear in events on your website calendar.
Tip Custom fields can also be useful internally when more than one person in an organization creates events. For example, you could include a field for who last created or edited an event. Because you wouldn't want these fields to appear in your website calendar, you would set Visibility to Hide this field from published views.
Click OK.
Now, Product name appears in the Fields section of the Define Custom Fields form.
In the Event Types section, click Product seminar.
In the Edit Event Type form, in the Which Fields Should Be Included section, under User Defined Fields, select Product name. Click Add Fields to Type.

List of the custom fields included in the Product seminar event type. The order of your fields may differ slightly.
Click OK at the bottom of the form.
At the bottom of the Define Custom Fields form, click Done.
In the calendar list, click the arrow to the right of one of the subcalendars, and then click Go to calendar to display the subcalendar. Click Settings above the calendar.
In the Event Types section of the form, for Default event type, select Product seminar, and then click OK.
At the top of the calendar, click Add Event. In the Event type field, the Product seminar event type you just created is displayed. Switch between the Standard and Product seminar event types and notice how the fields in the event form change.

Tip Once you have created your custom fields, you can assign them as filters during the publishing process. Then, you can add a Filter spud to your website next to your calendar so that your site visitors can limit the events they see.