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, select the top-level calendar. The name of the calendar is bold and has a black check mark to the left of the calendar name.
Click Publish
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 background color or text link/hyperlink 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. You can also select Edit Settings & Styles for each of the available calendar views to customize each calendar view.

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 pre-defined, user-defined, and sample fields. Event types are essentially event templates that display specific custom fields and data.

You can create event types from scratch. In this example, we'll create a new event type with multiple custom fields.

Create a new event type.
Create a custom field.

Create a "Performing Arts" 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 Create a new type.
In the Create a New Event Type form, for Type name, type "Performing Arts". Type a description if you want. This is useful primarily if more than one person will be adding events to your calendars and will appear as the pop-up tool tip.
Under Which Fields Should Be Included, you can add or remove fields so the events contain exactly the information you want. Under Predefined Fields check both Event Imageand Detail Image and select Add Fields to Type and the two fields are now part of this event type allowing images to be attached with events. Click OK.

Notice that the User Defined Fields box is empty. We'll go and create user defined fields (also referred to as custom fields) in the next section. Also notice under the User Definded Fields section there is a check box to show Sample Fields. Checking this box will display sample custom fields that can be added to your event types, however it is recommended that you create your own custom fields and not use the sample fields.

Continue with the steps below to create a custom field.

Create a "Age Range" 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 display Performing Arts events, you might want site visitors to be able to see only events related to a specific age range.

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 "Age Range". 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, select List of choices: [create a new list].
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 Possible choices click Add New Value and type the word "Adults" for the Age Range name and click OK.
Under Possible choices now select Add Multiple Values and in the expanded text window type: "Children, Teens, Seniors" and click Save Values. This is a fast way to enter multiple values for a list of choices.
For Select multiple values, select Yes.
Set the Display style as Drop Down.
For Default value, you might select a age range "default" if most of your performing arts events relate to one or more age ranges, or in this case, just leave Default value blank.
Set Value required. This means that when you or others in your organization create events that include the "Age Range" field, the field must have an age range value checked or you'll see an error message stating it is a required value.
For Owning calendar, choose the calendar that must be displayed for you to edit and view this custom field. The owning calendar can be your top level or a published calendar that will never be deleted. It is a good idea to designate one specific calendar on your account to own all custom fields and event types. For example, a calendar called called "Event Types & Custom Fields". This calendar can then be shared with other accounts so you are all using the same custom fields and event types.
For Visibility, notice that Allow this field to be published is checked by default. This means that the custom field will appear in events on your website calendar. Show this field on the event submission form is also checked by default and if the event submission form is enabled on your account, this field will also appear on the event submission form.
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 and uncheck Allow this field to be published.
Click OK.
Now, Age Range appears in the Fields section of the Define Custom Fields form.
In the Event Types section, click Performing Arts.
In the Edit Event Type form, in the Which Fields Should Be Included section, under User Defined Fields, select Age Range. Click Add Fields to Type.

List of the custom fields included in the Performing Arts 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 blue down arrow to the right of the calendar checked with a black check mark and then click Calendar Settings to display the settings for the calendar.
In the Event Types section of the form select Exclude Sample Types. For Default event type, select Performing Arts, and then click OK.
At the top of the calendar, click Add Event. In the Event type drop down, the Performing Arts event type you just created is displayed. Switch between the Standard and Performing Arts event types and notice how the fields in the event form changes.

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.