Click here to view related articles.
The next step in preparing your calendar for your campus web page is to select the control spuds you want to make available to your calendar's visitors and then style those control spuds. The purpose of the control spud is to give the visitor to your calendar some limited control over what they are viewing. The following control spuds are available:
The control spuds provide different types of functionality that can be quite useful to calendar visitors trying to find events on campus that fit their interests as well as making navigation of the calendar quicker and easier.
Adding a Control Spud
To add a control spud to your calendar:
Locate and click the Add Control Spud button located in the upper right region of the Control Spuds region.
The Add Spud window will open. Click on the control spud you want to add to your calendar to select it.
Click the OK button to add the control. You will immediately be presented with the Settings and Styles for this new control. These settings and styles are reviewed in the following steps.
Setting Up and Styling the Default Control Spuds
Every newly published calendar begins with three control spuds pre-enabled: Search, Month List, and View Chooser Tabbed. These three controls are the most commonly used control spuds and will need to be styled prior to placing them on a webpage with your Calendar View spud.
Calendar List Spud
The Calendar List control should be used when you are working with mixed-in or sub-calendars. This control gives the user a list of all the calendars that are mixed together or make up a group of top-level and sub-calendars. Using this control, a visitor may select which calendar views they want to see and turn off those that they are not interested in seeing.
Setting Up and Styling the Calendar List Control
Eventually, you will build a more complex calendar containing mixed-in calendars and possibly even sub-calendars. In that case, you will want to supply the Calendar List control for your calendar's visitors. To set up and style the Calendar List Control, you will first need to follow the instructions for adding a control spud. This process will immediately trigger editing of the Settings and Styles for this control.
The Calendar List Control contains two tabs: one for Settings and a second for Styles.
Settings
General Settings
Label
Customizes the Label which will appear above the calendar list.
Include Publication
Allows you to choose whether or not to include the current publication in the list control list. For standalone calendars, Yes is recommended. But, in the instance where you have created a "container calendar" with no events of its own to mix the calendar feeds together, choose No.
Styles
Contains all of the settings to style the Calendar List Control.
| General | Header | Calendar List Area | Calendar Items |
| Calendar Name | Footer | Border Rounded Corners |
General
Border Size
Contains only a single setting for the Border size of the border that surrounds the Calendar List Control. If you want a border to surround the calendar list control, simply enter a pixel value. The best practice for borders is a 1px border.
Header
Displayed above the control's contents.
Font
Used to set the font used for displaying the Header text. This setting is inherited from the Base font. Generally speaking, it is a best practice to maintain consistency in your fonts across all the various elements of your calendars. However, if you want to use a different font stack for this Header, just click in the textbox and replace the existing font stack with a new one.
Size
Controls the size of the font used in the Header.
If you are using relative length units like rem or em, you will need to divide your desired point value by the original text size to arrive at a value. For example, if your desired value is 10pt (points) and your original text size is 10 pts, you will need to divide 10 points by 10 points to arrive at a value of 1rem or 1em.
Color
Controls the font's color for the heading. To use a color other than black, simply replace the default value with a new hexadecimal color value.
Weight
Controls the darkness of the font in the header. As this is a header, it really should be in bold text. However, you have options to alter this to either normal or medium font weights.
Background Color
Controls the background behind the Header text. The most prevalent setting is white (#ffffff). Leaving this setting as transparent will often work but if your text is in dark colors and the background is also dark you risk not being able to easily view the header text.
Border Color
Controls the border immediately below the Header text. It is customary to use the same border color you used in your Global Settings for this value.
Padding
Controls padding around the Header text. If you determine due to your font choices that you need a little more spacing increase the value of the appropriate padding.
Border Bottom
Controls the relative thickness of the bottom border immediately below the Header text. This setting is inherited from the General Settings → Border size setting. It is customary to have at the least a thin separating line underneath the header text so a 1px bottom border will likely be sufficient.
Calendar List Area
Displayed above the control's contents.
Border Color
Inherited from the General Settings → Border size setting and produces a border around the entire calendar list.
Calendar Items
Controls formatting of the calendar items in the control's list of calendars.
Padding
Controls padding around each calendar listed in the control. The default settings generally work well for the majority of calendars.
Max Scroll Height
Controls the maximum size of the calendar list and controls space for the calendar items. If you need more space because you have numerous calendars mixed together, increase the scroll height until you are satisfied with your choice.
Calendar Name Wrap
Controls whether or not the calendar list items' text will wrap to a new line if they cannot fit in the width of the bounding box. Setting this to Normal turns on the wrapping functionality. Choosing nowrap will turn off wrapping, but that is normally not a best practice as this control is meant to fit in small amounts of screen real estate and needs to allow wrapping to be successful.
Calendar Name
Controls the styling of the calendar names linked in this control.
Font
Controls the font used for the calendar names listed in the control. Base font is the suggested setting to maintain consistency of fonts across your calendar implementation.
Size
Controls the font size of the calendar names listed in the control.
If you are using relative length units like rem or em, you will need to divide your desired point value by the original text size to arrive at a value. For example, if your desired value is 10pt (points) and your original text size is 10 pts, you will need to divide 10 points by 10 points to arrive at a value of 1rem or 1em.
Left Padding
Adds a small amount of space between the border of the control and the listed calendar item. Setting this to a positive value will indent the calendar name from the border. If you want more or less padding, update the existing value.
Footer
Controls the footer of the calendar list control which contains the options for the links to turn on all of the calendars in the list or turn them all off. 
Font
Controls the font used to display the footer text. This setting is inherited from the Base font setting and should typically not be altered to maintain consistency of your fonts across all the elements of your calendar.
Size
Controls the font's size for the footer text.
If you are using relative length units like rem or em, you will need to divide your desired point value by the original text size to arrive at a value. For example, if your desired value is 10pt (points) and your original text size is 10 pts, you will need to divide 10 points by 10 points to arrive at a value of 1rem or 1em.
Color
Controls the color of the font for all non-link text. To use a color other than black, simply replace the default value with a new hexadecimal color value.
Link Color
Contains the colors for the link itself and the color when you hover over the link. These settings are inherited from your Base link color set in the Global Settings and should not be altered.
Background Color
Controls the color of the background of the footer region of the calendar list control. Best practice is to ensure that this background matches the background color you have used throughout the rest of your calendar, which is often white (#ffffff).
Padding
Controls spacing around the Footer text. If you feel the need to have more spacing between the calendar list items and the footer, increase the padding values appropriately.
Border Rounded Corners
Border Rounded Corners
This setting is inherited from the Base border corner rounding setting you set in your Global Settings. If you want to alter your choice for this control, simply click in the textbox and set a new pixel value.
When you are satisfied with your choices, click the OK button to save your settings. You may preview how your choices have affected the calendar list control by clicking the Preview button.
Filter, Go to Date, & Search Spuds
The Filter, Go to Date, and Search controls all give the user access to control the content being displayed on the calendar.
The Filter control allows the user to filter the content based on criteria selected by you when you build the filter. The criteria can include things like the location assigned, categories on the event, and many more.
The Go to Date control allows the user to go to a date on the calendar that they enter in the search box.
Finally, the Search control provides a search box for the user to enter a keyword in order to find events that match that keyword.
Setting Up and Styling the Filter Control
The Filter Control gives the visitor to your calendar a way in which to filter the events listed on the calendar. As with all elements of a Publisher-based calendar, you have a series of settings and styles that you need to make decisions concerning both the behavior of the filter as well as its look and feel. Your choices in the Settings will drive whether or not your filter performs its task with a drop-down menu or with checkboxes.
To edit the Settings and Styles for the Filter Control:
Add the filter to your Control Spuds Tab for this calendar by clicking to select the Filter and clicking the OK button.
The Settings and Styles will open by default for you to setup the filter.
Settings
Contains all of the settings that determine how the filter will behave. The Settings are arranged in three groups: Filters, Blank Filter Value Settings, and Mobile.
Filters
Event Template
Concerns which event template will be used for building the associated custom fields that your filter may use when filtering events on the calendar. As such, you will likely want to review the event template that you want to select and make sure that the right combination of custom fields are available. The drop-down list will contain all of the event templates that you may choose from for this calendar.
Filter By
Controls what custom data field your visitors will use to filter the event calendar's events. As you can see, the list can be long! A commonly used filter is the Location filter.
As you see, in the image below, once you select a filter like the location field you have the option to change the Label for that filter. You will also be asked to determine whether or not you want this filter to be a Single Value or Multiple Values.
- Single Value: Will create a drop-down list of locations contained on the events in this calendar. But, you may only select one location at a time.
- Multiple Values: Will create a checkbox list of the locations contained on the events in this calendar allowing you to check multiple locations to filter by.
Also note that in a Single Value filter, you have the option to select All Values. You may also change the label from All Values to language of your choosing.
The Filter control also allows for up to five unique custom fields to be used by calendar visitors in filtering events. Notice that when you select a second filtering data field, you have the option to change from Single Value to Multiple Values. Also, note that you may choose to only display the secondary filter after a calendar visitor selects the primary filter by checking the box labeled Display filters only after selection is made in the previous filter. A two layer filter using Location and Categories can be quite useful for a multi-campus institution.
For example, a multi-campus institution would have multiple campuses with events in multiple locations on a comprehensive events calendar. They might choose to filter by Categories first and allow for Multiple Values. This approach would be keying on Campus event categories so that a calendar visitor could choose one or more campuses' events to look at while excluding the rest of the campuses. The secondary filter would not display until the visitor has selected the category or categories. Then, the Location drop-down menu would display producing a list of all of the locations used in this calendar at the campus or campuses selected. If you altered the Location filter to Multiple Values you would get a checkbox of all of the locations used on the events in the calendar from the selected campuses. That could produce a very long list of checkbox items for locations.
These options would produce a filter that looks like the following image. A visitor has to select the category before seeing the second filter.
In this example, once CSV Import has been checked then the visitor would be presented with the second option to filter by a specific location.
Blank Filter Values Settings
Contains settings for what the filter should do when some calendar entries have no value. For instance, let's say a Location filter was being used but there were calendar announcements on the calendar that contained no location value. These settings tell the filter control how to respond.
Show Blank Filter Value
Controls whether or not you will display the option to filter by a value to find all the events without a location or whatever criteria you have applied as your filter item. If you would like to use this option, select the Yes radio button to make it active.
Blank Value Label
Controls the label for filtering to just those items on the calendar that have no value set for this criteria.
Mobile
Force Single Select on Mobile
Controls whether a mobile device's filter options will be multiple items or a single item by drop-down list. Since you often want to conserve space on mobile devices, you should be more mobile-friendly by selecting Yes.
Styles
The Styles tab contains all the stylistic elements needed to style the Filter Control so that it matches the stylistic formatting of your other calendar attributes.
| General | Header | Filter Box Area | Drop-down Items |
| Multi-select Items | Footer | Border Rounded Corners |
General
Border Size
Controls the border size surrounding the control. If you want to set a slight border around the control, you should enter a 1px value.
Header
Contains a number of style settings controlling how the header text for the filter will be formatted.
Font
Inherited from the Base font in your global settings and should not be altered.
Size
Controls the size of the font.
If you are using relative length units like rem or em, you will need to divide your desired point value by the original text size to arrive at a value. For example, if your desired value is 10pt (points) and your original text size is 10 pts, you will need to divide 10 points by 10 points to arrive at a value of 1rem or 1em.
Color
The font color is controlled by this setting and may be left as black (#000000) or may be altered to another color you use on your website that is part of your website's color palette.
Weight
It is typical for header text to be presented with a bold font weight but you have the option to convert the header to either normal weight text or medium weight text.
Background Color
Controls the background of the filter control. Best practice is to set a white (#ffffff) background.
Border Color
Typically, this should be set to the value you have been using for borders in your Global Settings.
Padding
Controls spacing around the header.
Border Bottom
Control the size of any border you place at the bottom of the filter header text. This setting is inherited by the Border size setting set in the General group settings.
Filter Box Area
Contains a number of stylistic elements that control styling of the filter box area itself. 
Border Color
Inherited from the Border color global setting and should not be different for the control.
Background Color
It's usually best set to this to a white (#ffffff) background. However, other lightly shaded colors would work as well.
Padding
Controls the spacing around the Filter Box Area itself.
Drop-Down Items
Contains stylistic settings for the drop-down menu generated when you select Single Value for the filter value of a data element on the Settings tab.
Dropdown Font
Controls what font is used for the drop-down items. It is inherited from the Base font setting of the global settings and should be left to the default value for consistency of fonts across the elements of your calendar.
Dropdown Font Size
Controls the size of the font used for your drop-down items.
If you are using relative length units like rem or em, you will need to divide your desired point value by the original text size to arrive at a value. For example, if your desired value is 10pt (points) and your original text size is 10 pts, you will need to divide 10 points by 10 points to arrive at a value of 1rem or 1em.
Dropdown Width
Controls the width of the drop-down menu. You may alter this setting by selecting a different pixel size. Narrower widths will produce more wrapped text while wider widths will produce larger drop-down menus with less wrapped text.
Dropdown Border Width
Controls the width of any border around the list of drop-down items. If you don't want a drop-down border leave the field blank. If you want a border, normally a 1px border is sufficient.
Dropdown Background Color
Controls the background behind the drop-down items. Customarily, this will be set to white (#ffffff) but other colors may be applied from your campus's color palette.
Multi-Select Items
Contains stylistic settings for the checklist options when you select Multiple Values for the filter value of a data element in the Settings tab.
Multi-select Item Font
Controls what font is used for the list of checkbox items. It is inherited from the Base font setting of the global settings and should be left to the default value for consistency of fonts across the elements of your calendar.
Multi-select Item Font Size
Controls the size of the font used for your list of checkbox items.
If you are using relative length units like rem or em, you will need to divide your desired point value by the original text size to arrive at a value. For example, if your desired value is 10pt (points) and your original text size is 10 pts, you will need to divide 10 points by 10 points to arrive at a value of 1rem or 1em.
Multi-select Item Color
Controls the color of the font used for the checkbox items. The default value is set to black (#000000). However, you may use other colors from your campus's color palette if you so choose.
Padding
Controls the spacing around the checkbox items. It set a default padding of 2px for top, right and bottom margins with left padding being set to 0px. If you want to have more padding, increase these values. The left padding setting causes the items to line up next to the border of the control.
Max Scroll Height
Controls the height of the item list before a scroll bar is added to navigate additional checkbox items. The default value is set to 300px.
Multi-select Item Wrap
Controls whether or not the list item's text will wrap or not in the space afforded for the control. You have the options of normal and nowrap. It is a best practice to allow your text to wrap so the normal setting is preferable.
Footer
Contains settings for the footer of the Filter Control.
Font
Controls what font is used for the footer text. It is inherited from the Base font setting of the global settings and should be left to the default value for consistency of fonts across the elements of your calendar.
Size
Controls the size of the font used for all footer text.
If you are using relative length units like rem or em, you will need to divide your desired point value by the original text size to arrive at a value. For example, if your desired value is 10pt (points) and your original text size is 10 pts, you will need to divide 10 points by 10 points to arrive at a value of 1rem or 1em.
Color
Controls the color of the font used for the footer text. The default value is set to black (#000000). However, you may use other colors from your campus's color palette if you so choose.
Link Color
These settings include one for the link and one for when you hover over the link in the footer. These settings are inherited from your Base link color settings in your Global Settings and should not be changed for consistency in the behavior of links across your calendar elements.
Background Color
Controls the color of the background behind the footer text. It is customary for a white (#ffffff) background to be used but you may use other colors from your campus's color palette if you so choose.
Padding
Controls the spacing around the footer text. The default setting is for 0px of top, right, bottom, and left padding. If you want more spacing around the footer text, increase these values above zero.
Border Rounded Corners
Border Rounded Corners
This setting is inherited from your Base border corner rounding setting from your global settings. If you decide you do not want the corners of your filter control rounded, you may set this to 0px. Remember that older browsers like Internet Explorer Version 8 and below will not round the borders of boxes as those browsers do not contain support for this CSS3 functionality.
When you are satisfied with your choices, click the OK button to save your settings and styles. You may preview your settings and styles by clicking the Preview button.
Setting Up and Styling the Search Control Spud
To edit the Settings and Styles of the Search Control spud:
Click the Edit Settings & Styles link in the Search Control spud group.
The Edit Settings for Search window will display with two tabs: Settings and Styles.
Settings
General Settings
Label
Customizes the Label for the search control. You may change the label by entering text in place of the default text.
Search Settings
Input Prompt
Allows you to enter a prompt to display when the calendar visitor encounters the search box. For instance, you could enter text like Enter a keyword to search for events in this box and the Search box will contain this text as a prompt.
Search Button Image
Provides the image used as the search button. It defaults to a magnifying glass. You could upload an image (18x18 pixels) to replace the magnifying glass or choose to have no image.
Styles
| General | Header | Search Text Box |
| Go Button | Border Rounded Corners |
General
Border Size
This style controls whether or not a border will be placed around the entire Search Control. If you want a border bounding the control, set a Border size of 1px.
Header
Contains settings controlling how the header for the search control will be styled including the font characteristics.
The Font setting controls the font used for the Header text. This style is inherited from the Base font style and typically does not need to be changed. However, if you want to use a different font stack you may click in the textbox and replace the inherited offering.
Size
Controls the size of the Header text.
If you are using relative length units like rem or em, you will need to divide your desired point value by the original text size to arrive at a value. For example, if your desired value is 10pt (points) and your original text size is 10 pts, you will need to divide 10 points by 10 points to arrive at a value of 1rem or 1em.
Color
Controls the color of the Header text. You may alter this to another color by entering an alternative hexadecimal color code.
Weight
Controls the darkness of the Header text. As this is a header, it is typical for it to use the Bold font weight. However, you have the option to alter this to either normal or medium.
Background Color
Controls the background behind the Search Control. It is a best practice to set a background color for this control spud. A white background (#ffffff) is the choice for most calendars.
Border Color
Provides the color of the border for the Header text. This border color is not inherited but it is a best practice to use the same border color you set in your Global Settings.
Top Padding
Controls how much spacing is added above the Header text. If you want to add some spacing, enter a pixel value to add more top spacing.
Left Padding
Controls the padding to the left of the Header text. If you want to add some additional spacing, enter a pixel value to add more left padding.
Border Bottom
Controls the padding below the Header text. It is inherited from the Border size setting. If you want additional spacing below the Header text, click to activate the text box and enter a pixel value.
Search Text Box
Controls the styling of elements on the textbox itself.
Border Color
This setting is inherited from the global Border color setting.
Background Color
It's recommended that you set the background color to the same background for the Search Text Box. The typical color choice is for a white background (#ffffff).
Margin
Controls the top, right, bottom, and left margins of the Search Text Box. If you want a larger margin, simply modify this setting adding a numerical pixel value.
Padding
Controls the padding surrounding the Search Text Box.
Textbox Font
Inherited from the Base font. As you want your fonts to be consistent across all areas of your calendar, it is a best practice to not alter this font stack. However, if you want to use a different font stack, simply click in the textbox to activate it and then alter the font stack.
Textbox Font Size
Controls the size of the text in the Search Text Box.
If you are using relative length units like rem or em, you will need to divide your desired point value by the original text size to arrive at a value. For example, if your desired value is 10pt (points) and your original text size is 10 pts, you will need to divide 10 points by 10 points to arrive at a value of 1rem or 1em.
Textbox Width
Controls the width of the textbox used to enter keywords. Should you find that the default setting is not wide enough, you may increase it to allow for more text to appear in the textbox.
Textbox Font Weight
Controls how dark the text is in the search text box. The options are bold, medium, or normal. Since the majority of search text boxes output normal text, it is a best practice to do this with the search text box's text
Textbox Border Width
Controls the size of the border surrounding the text box. As most search text boxes have a border surrounding them, a 1px border will put a border around the textbox defining its area.
Go Button
Control the formatting of a Go button in place of the magnifying glass icon for executing the search.
Go Button Font
Inherited from the Base font and should remain an inherited element for consistency of fonts across your calendar implementation.
Go Button Font Size
Controls the size of the text on the Go Button.
If you are using relative length units like rem or em, you will need to divide your desired point value by the original text size to arrive at a value. For example, if your desired value is 10pt (points) and your original text size is 10 pts, you will need to divide 10 points by 10 points to arrive at a value of 1rem or 1em.
Go Button Font Weight
If you want a darker text setting for the text, you may set this option to either medium or bold.
Text Color
Needs to be set so that the text will be visible on the button created. If the Background color setting is a dark color, the Text color should be set to a lighter color.
Background Color
Need to be set so that the text will be visible on the button created. If the Background color setting is a dark color, the Text color should be set to a lighter color.
Border Color
Controls the border surrounding the Go Button. You may set a black border to put a demarcation around the box or you may leave it blank.
Border Width
Controls the width of the border surrounding the Go Button. If you provide a border color, you will need to set a Border width of 1px or greater.
Button Padding
Controls the amount of padding around the Go Button. If you find the 2px default settings to tight, you made add space around the button to make the Go Button a bit larger.
Space Between Box and Button
Controls the spacing between the Search Text Box and the Go Button. If you want more separation between the text box and the button, increase the amount of pixels by altering this setting.
Border Rounded Corners
Border Corner Rounding
Applies to the would round the corners of the Go Button as well as the borders of the bounding box. This setting is inherited from the Base border corner rounding. It is often a good idea to leave this to the same rounding as the global setting.
Once you have completed preparing all the Settings and Styles for the Search Control, click the OK button to save these settings. If you would like to preview the Search Control, click the Preview button.
Month List Spud
The Month List control allows calendar users to jump to a future month containing upcoming events. This useful control saves calendar users time in navigating around the calendar. Instead of using the next buttons to get to the next page of events to navigate the calendar. This control speeds that process up for calendar users.
Setting Up and Styling the Month List Control
The Month List Control gives calendar visitors the ability to jump to a future month of the calendar view to see what events may be occurring during that month. Typically, this control is placed to float above the Calendar View to improve the efficiency of visitors in finding your events.
To edit the Settings and Styles for the Month List Control:
In the Month List Control group, click the Edit Settings & Styes link to begin styling this control.
The Edit Settings for Month List window will open. Unlike other settings and styles windows you have experienced, there are only style settings for the Month List Control.
Edit Settings for Month List
| Base Styles | Selected Month Styles | Month Without Event Styles | Month With Event Styles |
Base Styles
Control basic information concerning the text on the Month List Control as well as the background color behind the list of months.
Outer Padding
Controls the padding around the list of months. If you want some additional padding around the control, increase the padding values to 1px or greater.
Background Color
Inherited from the Base background color setting. This will often be white (#ffffff).
Font
Controls the font used for the month names on the control. The font setting is inherited from the Base font and normally should not be changed. If you want to use a different font stack for this style, click in the textbox to activate it and then enter the new font stack.
Font Size
Controls the size of the text.
Text Transform
Controls the formatting of the calendar months capitalization.
Selected Month Styles
Control the color of the font and the font weight for the
Color
Controls the color of the font for the selected month. It is customary to set the selected month to Black text (#000000). This will indicate that the month is selected and be in keeping with your campus's color palette.
Font Weight
Controls the darkness of the font for the selected month. It is customary to make this text bold. However, you may also choose between medium and normal text weights.
Month Without Events Styles
Control how months that do not have any scheduled events will be displayed in the control.
Color
Controls the color of the month text when there are no events present. If you use black text to identify the selected month, you'll want to alter this setting as it is inherited from the Base text color. Since most software applications gray out elements that you cannot select, a gray font color will work effectively to represent that there are no available events in that month.
Font Weight
Controls the darkness of the text for months without events. Since these months will likely be represented with a gray font color, normal works best.
Months With Events Styles
Control how months that do have scheduled events will be displayed and behave on the Month List Control.
Color
Controls the color of the links when you view the month list control and the color when you hover your mouse pointer over the month on the month list control. These settings are inherited from the Base link color and should be left to the default setting to maintain design cohesiveness across all of your views and controls.
Link Text Decoration
Controls whether links are underlined when you first view them on the calendar entry. The two options available are none and underline. If you have set all of your other links to one of these two settings, you should be consistent and have the Months With Event Styles links behave in the same manner.
Link Hover Text Decoration
Controls whether links are underlined or not when you hover over the month in the Month List Control. The two options available are none and underline. You should have the hover text decoration behave in the same manner your links behave for design consistency.
Font Weight
Controls the darkness of the text of the calendar months with events. Bold typically works well for the months on this control.
Once you are satisfied with your style settings, click the OK button to save your changes. Remember that you may preview how your settings have altered the Month List Control by clicking the Preview button.
Timezone Picker Spud
The Timezone Picker control allows calendar users to alter the time on events to their time zone. Most campuses will not need this functionality but this control is an option to add it to your calendar.
View Chooser & View Chooser Tabbed Spuds
Finally, the View Chooser and the View Chooser Tabbed controls offer different options for allowing calendar users to alter the calendar view. Since the Calendar Spud can provide users multiple calendar views to select from, these controls allow the user to switch between those views.
The Viewer Chooser is great if you prefer offering the choices in a drop-down menu.
The View Chooser Tabbed is great if you want the calendar view choices to float above the calendar view itself.
Each control has its own control spud javascript allowing you to add as many of these controls to your calendar as you like.
Setting Up and Styling the View Chooser Tabbed Control
There are two types of View Chooser control spuds available for use with your calendars: View Chooser Tabbed and View Chooser. The View Chooser is formatted as a drop-down list. The more commonly used of these two options is the Viewer Chooser Tabbed control.
To edit the Settings & Syles of the Viewer Chooser Tabbed control:
Locate the View Chooser Tabbed control and click the Edit Settings & Styles link.
Edit Settings for View Chooser Tabbed
The Edit Settings for View Chooser Tabbed window will load.
| General Styles | Tab Font Styles | Selected Tab Font Styles |
| Tab Item Styles | Tab Rounded Corners | Tab Divider Styles |
General Styles
Padding
If you want additional padding, increase the pixels to a value greater than zero.
Tab Font Styles
Controls the behavior and formatting of the font of the text on the Viewer Chooser tabs.
Font
Inherited from the Base font and should keep that setting. However, you may change it by clicking in the textbox and providing an alternate font stack.
Size
Controls the font size of the text on the Tabs.
If you are using relative length units like rem or em, you will need to divide your desired point value by the original text size to arrive at a value. For example, if your desired value is 10pt (points) and your original text size is 10 pts, you will need to divide 10 points by 10 points to arrive at a value of 1rem or 1em.
Weight
Controls the relative darkness of the text generated by your chosen font stack. Bold is recommended for the text on your tabs.
Color
Controls the color of the text on the Tabs before you hover over that text to make a selection of a calendar view. It is a best practice to set this to the same color as your base link color.
Hover Color
Controls the color of the text on the Tabs when you hover over that text to make a selection of a calendar view. It is a best practice to set this to the same color as your base link hover color.
Selected Tab Font Styles
Controls the formatting of the selected calendar view on the Tabs.
Selected Color
Controls the color of the font for the calendar view you have selected on the View Chooser Tabbed control. If you want the selected text to use the same font color as normal text, set this option to that color. Very often, black (#000000) is selected for this setting.
Weight
Controls the darkness of the selected text. This value is inherited from the Weight setting and should be left to this default value.
Style
Controls whether or not the font on the selected tab will be normal text or italicized text. If you want the selected view's text to stand out more than the color and weight provide, alter this setting to italic.
Tab Item Styles
This group contains stylistic settings for the View Chooser tabs. These settings control the formatting of the tabs including their height, background color, border size, border color, selected tab background, hover background color.
Height
Controls the height of the tabs in the Viewer Chooser Tabbed control. Typically 20 pixels, is sufficient height for the tabs. If your font size is too large, you might need to increase the pixel height.
Background Color
Controls the background of the tab itself. The default setting is typically sufficient for the majority of most calendar implementations. If you want to set your own background color, remember that whatever background you set the text needs to be clearly visible. Some combinations of the font color set earlier and the background color set here do not work well together for general usability.
Background Color Fade
Adds a gradient to the Background color so that the background of the tab itself will have a gradient consisting of colors between the background color setting and the background color fade setting.
Border Size
Controls how thick the borders will be around the tabs. The typical border size for most elements of a web page is a 1 pixel border.
Border Color
Controls the color of the borders around the tabs. You may want to update the color or match it to the border color you set in your Global Settings.
Selected Background Color
Controls the background of the Selected tab. It should be a slightly different color from the Background color.
Selected Background Color Fade
Adds a gradient to the Selected background color with a gradient of colors between the two Selected colors.
Hover Background Color
Controls the background of the tab when you hover over it. It normally is set to the same color you set on the Selected background color.
Hover Background Color Fade
Adds a gradient to the Hover background color with a gradient of colors between the two Hover colors.
Tab Rounded Corners
Tab Corner Rounding
This setting will round the corners of the tabs. Users of Internet Explorer Version 8 or lower will receive square tabs as those versions of the browser do not support this CSS style. It is a good choice to set the Tab corner rounding to the same setting as your rounding ratio for your buttons.
Tab Divider Styles
Display Tab Divider
Controls the tab dividers for each tab and contains two options: show and hide. If you want to display the tab dividers, leave this setting to show. It is a best practice to display the tab dividers.
To save your settings, click the OK button. You may preview the results by clicking the Preview button.
Other Control Spuds
There are a couple of additional less frequently used control spuds. These control spuds include a Go to Date control, a Timezone Picker control, and a View Chooser control. The Go to Date control allows the calendar visitor to enter a date and then go to that date on the calendar. It works similarly to the Search control but instead of entering a keyword, you enter a date. The Timezone Picker control allows the calendar visitor to change the timezone in which events are displayed. Typically, this control is only needed where an institution has multiple campuses distributed over multiple time zones. Finally, the View Chooser contains the same functionality as the View Chooser Tabbed allowing the calendar visitor to switch between different calendar views by clicking that view's name. In the case of the View Chooser, the control creates a drop-down list of the calendar views available to calendar visitors. As such, where screen real estate is limited, you could place this control in a left navigation region of a web page with the calendar being in the right region of content. All of these additional controls are configured the same as those we have reviewed. Each contains both a Settings and a Styles tab to format the control consistently with all your other calendar elements.