Selecting and Styling Control Spuds

Click here to view related articles.
Pre-Publisher Cycle
Selecting a Security Framework for Your Publisher Environment
Building a Publisher Functional Security Group
Building a Generic Publisher User Account
Preparing 25Live Data for Publisher
Building Calendars Using Event Categories or Resources
Publisher Cycle
Creating Effective Searches for Publisher Calendar Feeds
Creating a Calendar Feed from Your Search
25Live Publisher: Customizing Your Calendar for Publication
           1. Working with Publish Settings for a Calendar
           2. Selecting and Styling Calendar Views
           3. Selecting and Styling Control Spuds
           4. Selecting and Styling Promotion Spuds
           5. Styling E-mails and Feeds
Setting Up and Styling Event Actions
Configuring Custom Fields and Event Templates
Embedding Publisher Spud Code in Websites
Post-Publisher Cycle
Analytics in 25Live Publisher
Monitoring Published Calendars and Making Modifications to Existing Calendars
Additional Publisher Resources
Example Publisher Calendars
Displaying a 25Live Publisher Feed in an Outlook Calendar (Desktop)
Displaying a 25Live Publisher Feed in an Outlook Calendar (Office 365)
Displaying a 25Live Publisher Feed in Google Calendar
Matching Series25 Fields with Publisher Fields
Setting Up Disqus Comments and Facebook Comments on Your Calendar Spuds
Installing the 25Live SharePoint Web Part


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: 

Control spud options

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.
Add a control spud button in the control spud tab

The Add Spud window will open.  Click on the control spud you want to add to your calendar to select it.
Add spud window

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.
Control spuds tab

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 and styles tabs

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.
General settings options

Styles

Contains all of the settings to style the Calendar List Control.  

GeneralHeaderCalendar List AreaCalendar Items
Calendar NameFooterBorder Rounded Corners

Styles tab settings

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.
General settings

Header

Displayed above the control's contents.
Header settings

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 list area settings

Calendar Items

Controls formatting of the calendar items in the control's list of calendars.
Calendar items settings

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.
Calendar name settings

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.

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. Footer settings

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.
Border rounded corners setting


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.
OK and Preview buttons

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.
Filter control


The Settings and Styles will open by default for you to setup the filter.
Settings and styles tabs

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.
Settings tab

Filters

Filter settings

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 settings

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.
Filter by dropdown optionsAs 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.
Filter settings

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.
Filter control fields set to allow single valueFor 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.
Filter control fields set to allow multiple valuesThese options would produce a filter that looks like the following image.  A visitor has to select the category before seeing the second filter.
Preview for filterIn 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.
Blank filter value settings

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.
Mobile settings

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.  

GeneralHeaderFilter Box AreaDrop-down Items
Multi-select ItemsFooterBorder Rounded Corners

 Edit settings for filter styles tab

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.
general settings

Header

Contains a number of style settings controlling how the header text for the filter will be formatted. 

Header settings

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.  
Filter box area settings

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.
Drop down item settings

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 items settings

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.

Contains settings for the footer of the Filter Control.
footer settings

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.
Border rounded corners setting


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.
OK and Preview buttons

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.
Edit settings and styles button for search

The Edit Settings for Search window will display with two tabs:  Settings and Styles.
Settings and styles tabs

Settings

Settings tab

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.
Search button image dropdown

Styles

GeneralHeaderSearch Text Box
Go Button
Border Rounded Corners


Styles tab settings

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.
general styles

Header

Contains settings controlling how the header for the search control will be styled including the font characteristics.
header styles

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 settings

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 rounded corners setting

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.
OK 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.

Month list control

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.
Edit settings and styles for month list 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

Month list settings

Base Styles

Control basic information concerning the text on the Month List Control as well as the background color behind the list of months.
Base styles settings

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
Selected month styles settings

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.
month without events styles settings

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.
Month with events styles settings

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.
OK and Preview buttons

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 and styles for view chooser tabbed

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

Edit settings for view chooser tabbed

General Styles

General styles settings

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.
Tab font styles settings

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 tab font styles settings

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.
Style dropdown options

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.
Tab item styles

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 rounded corners setting

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.
OK and Preview buttons  

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.
Go to Date, Timezone Picker, and View chooser spuds