Selecting and Styling Calendar Views

Main Calendar Spud

Locate the Main Calendar Spud region of the Calendar Spuds tab and click the Edit Settings & Styles link.

The Main Calendar Spud Settings and Styles contain a group of tabs covering basic settings that impact all the elements of the calendar views.

General Settings Tab

Controls whether or not the Calendar List Control displays and tells 25Live Publisher what to do if it detects that a user is using a mobile device.

Display Calendar List Control: 

Selecting Yes will display a radio button list of all your calendars mixed into this calendar.  It is customary not to use this calendar list control as there are two Control Spuds that contain calendar list controls that are more readily styled than this list control.

Enable Mobile Calendar View: 

Controls whether 25Live Publisher will display the mobile calendar view on mobile devices.  This setting should always be set to Yes.

Enable Mobile Detail: 

View controls whether 25Live Publisher will display the mobile detail view on mobile devices.  This setting should also always be set to Yes.

Embedded Calendar List Tab 

Contains a number of settings that would control the calendar list control that is available based on your responding Yes to the Display calendar list control in the General Settings tab.

There are two sections for controlling how the calendar list control will appear:  Settings and Styles.  

Settings

Include published calendar

Control whether or not the list control will include the published calendar (the calendar you are currently working on at the moment).  If Include published calendar is set to Yes, the calendar list will include the present calendar as a selectable option.  If, on the other hand, the present calendar is a container for mixed-in calenders, you would set this setting to No.  You can read more about mixed-in calendars by visiting Building a Mixed-in Container Calendar in 25Live Publisher.

Styles

This section controls the formatting of text, borders around the list control, the background color of the list control, and calendar name text and width.  

You will notice that a number of the stylistic settings like Font, Text color, Link color, and Border color are grayed out.  These are inherited global settings that you set on the Publish Settings → Edit Settings & Styles window.  

Size

If you are using relative length units like rem or em for your font Size, you will need to divide your desired point value by the original base text size to arrive at a value. For example, if your desired value is 8pt (points) and your original base text size is 10 pts, you will need to divide 8 points by 10 points base to arrive at a value of 0.8rem or 0.8em.

Border Width

Very often set to 1px for both boxes like the list control, borders around images, and table borders.  

Background color 

It is also customary to set the list control to white (#ffffff).  That will often match your global background color.  

You also have control of the calendar name's Size, Weight, and Box Width.

Event Actions Panel Tab

Contains stylistic settings covering everything about the event actions options on this calendar.  There are a couple of groups to review including:  Settings, Styles, Button Styles, and More Actions Button Styles.

Settings

This group controls where the event action panel will show when multi-select Event actions are enabled.

Styles

This group controls the box that contains the event actions options of your calendar.  See the information note below for an explanation of the CSS Box Model and what Padding and margin mean.  

Padding and Margin 

These CSS settings are arranged in a clockwise direction:  top, right, bottom, and left.  Larger pixel sizes mean larger amounts of padding around the object and margins between objects.  Some served fonts at times will require adding padding and margins around objects.  

Background Color 

Should be set to match the background setting of the global settings, normally white (#ffffff).  

Border Color

Normally set to match the border color in the global settings.  

Border Width

Should not be any larger than 1px.  

Font

If you want to change the font stack used for the Event Actions text labels, click the grayed-out font and enter a new font stack.  

Text Size 

Should be converted to rem units if you have been doing that in your other settings.

If you are using relative length units like rem or em, you will need to divide your desired point value by the original base text size to arrive at a value. For example, if your desired value is 8pt (points) and your original base text size is 10 pts, you will need to divide 8 points by 10 points base to arrive at a value of 0.8rem or 0.8em.

Button Styles

These styles control the styling of the buttons that users will click to activate specific event actions.  

Padding

Contains both right and left padding larger than the top and bottom padding to put space between each of the buttons.  

Background Color, Text Color, & Border Color

Inherited from the global settings.

Border Corner Rounding

Controls how the borders of your buttons behave.  If you want them to have soft rounding at the edges, add a pixel radius in this box. This setting corresponds to the border-radius CSS style which may contain a single border-radius for top, right, bottom, and left based on this setting.  Or, it may contain different values for each side of the button.

More Actions Button Styles

These styles control the Background Color and Text color of the drop-down list containing additional actions beyond those represented on the buttons styled in the previous step.  

Background Color 

Should remain white if you are using white backgrounds.  

Text Color 

Controls the link and hover colors for the links generated in the drop-down list.  These should match the link and hover colors used in the global settings.

Calendar Actions Panel Tab

Controls include the Print link and its label, the Subscribe link and its label, the My Events functionality, and the styles for the panel.

Settings

This group controls which additional links will appear as part of Calendar Actions.  You may turn off selective elements like print, subscribe to the calendar, or the My Events functionality by toggling from Yes to No.  You may also change the labels for each of the elements by entering text in the appropriate label textbox.

Styles

This group controls the font and link characteristics of the Calendar Actions Panel.  

Display

If you wanted to completely hide this panel from view you could change the show setting to hide.  However, that robs your users (and you) of very useful functionality as well as taking the opportunity of your visitors to forward your events to friends.  

Font

Inherited from the global settings but may be changed by clicking in the box.  

Text Size 

If you are using relative length units like rem or em, you will need to divide your desired point value by the original base text size to arrive at a value. For example, if your desired value is 8pt (points) and your original base text size is 10 pts, you will need to divide 8 points by 10 points base to arrive at a value of 0.8rem or 0.8em.

Weight 

This value may be set to normal, medium, or bold.  Typically, the normal text weight is perfect for these links.  

Link Colors

Inherited from your global settings.

Paging Buttons Tab

Control the formatting of the next and back buttons for paging.  These settings are arranged in four groups:  Settings, Button Styles, Active Buttons, and Inactive Buttons.

The Settings control whether the paging controls are built as buttons or images.  The more responsive and mobile-friendly approach is to choose buttons.  You should also always show the inactive buttons.  There are a number of different options for the previous and next arrow symbols (see image below) from which you may select for use on your new calendar.

Button Styles

Control the size of the arrows, the button width and height, and the separation between the two buttons.  

The Border corner rounding introduces a new concept:  outer rounding and inner rounding.  Setting a pixel radius value for the outer rounding will round off the outer edges of the arrow button while the inner rounding will round off the inner edge of the arrow button.  If you set a pixel radius for the outer rounding while setting the pixel radius of 0px for the inner rounding the buttons will be rounded on the outer edges while being square on the inner edges.

Active Button

These settings control the Background color, Arrow color, and Border color of the Active paging buttons.

Inactive Button

These settings control the Background color, Arrow color, and Border color of the Inactive paging buttons.  Generally, the default settings work for the majority of calendars and match the behavior of inactive buttons on most web pages.

Search Status Panel Tab 

Controls the styling of the results that appear above a calendar when a calendar search is conducted with the Search control spud.  It provides stylistic elements in two groups:  Styles and No Events Warning Styles.

Styles 

This group controls the stylistic settings of the box that contains the search results.  

Display

You could choose to hide this panel entirely by clicking the drop-down box and selecting Hide.

Padding and Margin

See discussion of the CSS Box Model if you need a better understanding about what these settings accomplish.

Background Color 

Controls the background of the search status panel.  It is typical to make this background match the background you used in your global settings or another color that fits within your campus's approved color palette.

Border Width

On the majority of websites is set to 1px.  This places a thin border line around the entire Search Status Panel.

Font 

Inherited from the Global Settings but you may click in this textbox and replace it with a different font stack should you so choose.

Text Size 

If you are using relative length units like rem or em, you will need to divide your desired point value by the original base text size to arrive at a value. For example, if your desired value is 8pt (points) and your original base text size is 10 pts, you will need to divide 8 points by 10 points base to arrive at a value of 0.8rem or 0.8em.

Link Color

Inherited from the Global Settings.  As you will want links to behave the same across your calendar, you should leave these unchanged.

No Events Warning Styles 

Control the font and text size of the warning that appears when no events are returned from the search. 

Font

Inherited from the Global Settings.

Text Size 

Set in points.  If you are using relative units like rem or em, you will need to divide 10 by 10 to arrive at a value of 1rem or 1em.  This places the font size at the original 16px global setting for Base text size.

Print View Tab

Controls whether or not a Banner image, Calendar Name, and Print Date/Time display when a visitor prints the calendar.

Banner Image

Can be used to upload a campus logo and then use it here so that every time someone prints the calendar it contains campus branding.

Show Calendar Name

Will display the calendar name you set in the Publish Settings in the header of the printed page.

Show Print Date/Time

Will display the current date and time in the footer of the printed page.

When you have completed your work with the Settings and Styles for the Main Calendar Spud, click the OK button.  You may also preview the results of your actions by clicking the Preview button.

The second step in preparing your Main Calendar Spud involves selecting which calendar views you want to use for this calendar and then styling those calendar views.  There are 21 available calendar views that are accessible by clicking the Add a Calendar View button.  When you add a calendar view to the Available Calendar Views, it drops out of the list of views you may add.

The calendar views range from list views, tabular views, daily and weekly views, and many more.  You should choose calendar views based on their appropriateness to the calendar content you are displaying.  The following image gives you a look at some of the available calendar views.  You may visit An Overview of 25Live Publisher's Calendar Views to find a summary of what each calendar view provides.

The Calendar Views that have already been applied when this calendar was created are found under the Available Calendar Views group.  By default, every newly created calendar starts with three calendar views pre-selected:  Classic Table, List, and Classic Month

For each calendar view you make available to site visitors, you will need to edit its settings and styles.  Some calendar views give you much more control over the settings than others.  To edit the settings and styles of a calendar:

Locate the Calendar View in the Available Calendar Views section and click the Edit Settings & Styles link.
Each calendar has two or more tabs under its settings, one for General Settings and a second one for event settings specific to event templates (your 25Live Pro Event Types).  The event template-specific settings and styles are part of the Featured Event functionality that applies to a couple of calendar views.  

General Settings

These settings are arranged in groups that will vary by calendar view and its customizability.  For the List View, the following General Settings groups apply:  

Paging 

Controls the sorting order of the events on the calendar, how many events appear on each page of the calendar and what the default landing page is for the calendar view.

Sort Order

Can be set to sort the events in an Ascending fashion (Future) or a Descending fashion (Past).  It is customary to sort in Ascending Sort Order.

Events Per Page

Controls how many events show up on each page of the calendar view.  But, it also offers the option of either Smart or Exact.  The Smart setting displays, as closely as possible, the number of events set in the textbox, while preventing events that occur within the same group from breaking across pages.  The Exact setting displays exactly the number of events set in the textbox.

Default Page

Choose the default page that the calendar begins displaying. Current day, Next day, Current Group, or Custom Date.  Standard behavior of most campus calendars is to have the calendar begin with the Current day.

Grouping

Controls how events are grouped on the calendar view.  This group also allows for the possibility of subgrouping.

Group by

Allows you to group the events on the calendar by Year, Quarter, Month, Week, Day, or a Custom grouping based on date ranges.

Subgroup by 

Allows you to subgroup by Week, Day, Start time, Event Location, Location or Venue, or Title.  For instance, you might group your events by month and then subgroup them by week.

Multi-day Events

Controls events with repeating occurrences.  When this is turned on, multi-day events that started in the past and are still ongoing will be displayed until the event ends.  This setting should be turned on for any calendar that will contain repeating events.

Group Header Format

Controls how dates and day of the week format when grouping by day or week or when grouping by start time.

Group Date Format 

Gives you a multitude of options in the ways you may format the date when grouping by day or week.

Day of the Week Format

Gives you a couple of options in the ways the day of the week gets formatted.  You may choose to not display the day of the week, abbreviate it, or spell it out.

Group Time Format

Event Layout 

This group contains a setting for the Default layout and a second setting for Featured event layouts.  As you can see in the image provided below, it is possible to have multiple Featured Level using different layouts.

Default Layout

Controls the event layout of the majority of your Event Templates.  The best practice is to set the Default layout to Standard Layout.

For each Featured Level you have set up in 25Live Publisher, you can apply a different event layout.  You begin that process by opening the drop-down list for each featured level and choosing from the following options:  New "Standard Layout", New "Featured Layout", New "Image Is Event Layout", and Same as "Default layout".  

For guidance on how to set up 25Live Publisher and 25Live Pro to make use of the Featured Event functionality visit the page, Featured Events in 25Live Pro and 25Live Publisher.

If you apply the New "Featured Layout" to multiple Featured Levels, each Featured Layout will get its own tab in the Settings and Styles.  This functionality allows you to format each featured layout differently from the others.

The View Chooser Label is blank by default.  The View Chooser, whether turned on in the Main Calendar Spud settings or whether you are using the View Chooser controls contains a Label to link to the appropriate calendar view.  If you leave this textbox blank, the View Chooser will display the label, List, to select that calendar view.  Any label entered in the textbox will replace the default terminology of List.
The Event Actions group contains additional settings for the event actions beyond what was set in the Global Settings.

The Event Action display controls how many event actions a visitor may take at a time.  There are three options:  Multiple, Single, and None.  The Multiple option allows a calendar visitor to select multiple events and perform an event action like adding them to their own calendar or receiving text reminders all at once.  The Single option allows a calendar visitor to only select one event at a time to perform an event action.  Finally, the None setting turns off the event action option to calendar visitors.  The best choice is to use the Multiple option.

The Show sign-up buttons controls whether the registration button appears on the event.  Since the registration module is not functional in 25Live Publisher, you should set this option to No.

The Paging Buttons group controls where the paging buttons will display on the calendar view.  You may display the buttons at both the top and the bottom of the calendar view pages by saying Yes to both the Display top buttons and Display bottom buttons.

The Timeface Header Controls control the padding around the calendar view box itself.  You may add extra padding by increasing one of the values for each side of the CSS box that contains the calendar view.
The List Groups group contains style settings for the Grouping headers.  There are only a couple of elements that normally need to be touched in this group of settings.

The Size setting for the fonts is set in points. 

If you are using relative length units like rem or em, you will need to divide your desired point value by the original base text size to arrive at a value. For example, if your desired value is 12pt (points) and your original base text size is 10 pts, you will need to divide 12 points by 10 points base to arrive at a value of 1.2rem or 1.2em.

The Background color setting should match your global background color. You will likely have to click in this box to change this to white (#ffffff) or whatever color you use as the background for your calendars.

List Subgroups 

This group contains style settings for the Subgroup headers.  There are only a couple of elements that normally need to be touched in this group of settings.

The font Size is set in points.  

If you are using relative length units like rem or em, you will need to divide your desired point value by the original base text size to arrive at a value. For example, if your desired value is 9pt (points) and your original base text size is 10 pts, you will need to divide 9 points by 10 points base to arrive at a value of 0.9rem or 0.9em.

The Background color may also have to be adjusted if you want it to be white like other backgrounds.

After you complete your work in the General Settings tab, you are ready to begin working with each of the event layout settings.  You will begin your work with the Default layout settings.  These settings apply to all event templates unless the event has a setting for one of the Featured Levels.  When an event has a setting for the Featured Event functionality, that event will use one of the other settings that may format differently. 

There are 8 groups of settings on each of these tabs as follows:  Display Settings, Date/Time Options, Image Settings, Inline Images, General Styles, Event Title Styles, Event Details Styles, and Image Styles.

Display Settings

The Display Settings control whether or not your want update markers to appear and what fields you want in the list of information on the calendar.  

The Display update markers set to Yes shows a marker when you add or change events on the calendar.  The List View calendar view allows the user to manipulate which fields appear in the list of event information on the calendar as well as allowing you to reorder the list of fields.  It even allows you to change the name of the Label for Location and Description (i.e., the Event Description from 25Live Pro).  You may also set a Max Length on the Description field so that an event with a very robust event description doesn't take up an entire page of the calendar view.
If you wanted to add a new field like the Web link (the Event Web Page from 25Live Pro's event custom attributes), you would click the add new field drop-down list to locate and add the additional field.

Date/Time Options

The Date/Time Options control how dates, times, and days of the week get formatted.  It also provides for the addition of the time zone if you are a campus that has multi-campus locations in different time zones.

The Label ongoing events setting when Yes is chosen includes a label for your multi-day events that may have started in the past but extend into the future.  For this option to function on the Calendar View you must select Yes for the Include events that started in the past in the Grouping section of the Calendar View settings.

The Ongoing events label indicates that an event is a continuing event. 

The Date format allows you to control the format of the date by selecting from a drop-down list of options.

The Hide year when grouping setting, when set to Yes, causes the year to not display when you are grouping by time.

The Hide event dates when grouped by day setting allows you to hide the date on the events when you are grouping by day.

The Day of the week setting allows you to not include the day, include an abbreviated day format, or spell the day out completely.

The Show end date setting when set to Yes will cause the end date of the event to be displayed in addition to the start date.  But, single-day events will not display an end date.

The Show time setting when set to Yes will include the event time along with the event date.

The Time format setting controls how the event time is formatted including a large variety of options for how AM and PM will be formatted.

The Time zone display determines whether the time zone format length.

Image Settings

The Image Settings group contains settings for the Event Image from 25Live Pro including controlling the positioning of the image and the maximum width and height of the image in pixels.

The Image position setting controls where the Event Image floats in relation to the calendar entry on the page.  There are three options:  No Image, Left, and Right.  Choosing Left or Right causes the event image to either float to the left or the right of the event on the calendar.  If you want to turn off the display of images for this calendar view, you would select the No Image option.

The Max image width (pixels) setting controls the maximum width of the image.  Images that are larger than this max width will be reduced to fit in the width specified. 

The Max image height (pixels) setting controls the maximum height of the image.  Images that are larger than this max height will be reduced to fit in the height specified.

Inline Images

The Inline Images setting controls whether or not images in the Event Description in 25Live Pro display in the Event Description in 25Live Publisher.  You insert those images with the HTML <img> tag in 25Live Pro's Event Description on the Event Form.  If you use images inside your event descriptions, you should change this to Yes to show the inline images.

Image Width Mobile

The Image Width Mobile setting controls the sizing of images if the width of the spud is smaller than a specified pixel size. The width of the spud is measured by the bounding box containing the Publisher spud code.  There are two settings associated with this group, Spud width less than and Max image width.

The Spud width less than setting assists Publisher in determining when to use a different maximum image width usually needed for mobile devices.  

The Max image width setting determines the maximum width of the event image if the Spud width less than value is evaluated to require a smaller image size.  In this instance, the maximum image width will be reduced from what you set in Max Image Width earlier.

General Styles

The General Styles settings control Margin, Padding, Border size, and Border color for the events covered under the Default tab.  The Border color will be inherited from your global settings.

Event Title Styles

The Event Title Styles settings control how the Title text behaves and is formatted for each event entry on the List View of your calendar.  Many of the settings are inherited from your Global Settings.  Remember that you are not tied to those global settings as they may be changed by simply clicking in the textbox and making alterations.

The font Size setting is set in points by default. 

If you are using relative length units like rem or em, you will need to divide your desired point value by the original base text size to arrive at a value. For example, if your desired value is 10pt (points) and your original base text size is 10 pts, you will need to divide 10 points by 10 points base to arrive at a value of 1rem or 1em.

The Weight setting allows you to choose from a couple of options:  normal, medium, and bold. Consider keeping this set to bold.

The Style setting controls whether the Title text will be normal, non-italicized text or whether it will become italicized.

The Text transform setting controls whether the Title text will be displayed as entered on the event form, with initial capitalizations, all capitalizations, or all lowercase.  Lowercase generally goes unused as it would put the entire title in lowercase (E. E. Cummings would be thrilled but your campus probably wouldn't!).  The default setting is none and most campuses choose to let the Event Title format come from how the event was titled in 25Live Pro which will very often be initial capitalizations anyways.  However, if you want to force the issue of how titles are transformed, this setting grants that option.

The Padding setting follows the CSS box model outlined earlier.  If you need to have additional space around the text, alter the pixel values of one of the regions of the box.

The Signup button spacing may be safely ignored given that the registration module is not turned on in 25Live Publisher.

The Event Details Styles control how the details of the event are formatted on the calendar entry.  The Font, Text color, Date/time color, and Location color are all inherited from the Global Settings but you may change any setting by simply clicking its textbox to activate it.

The Font size setting controls the size of the text on the details of the calendar entry.  

If you are using relative length units like rem or em, you will need to divide your desired point value by the original base text size to arrive at a value. For example, if your desired value is 8pt (points) and your original base text size is 10 pts, you will need to divide 8 points by 10 points base to arrive at a value of 0.8rem or 0.8em.

The Field label wrap controls whether or not the label will wrap if it runs out of space on the current line (think of text automatically wrapping in Microsoft Word).  The normal setting allows text to wrap while the nowrap turns off text wrapping.

The Field label font weight controls the font weight of the labels on the Event Details in the calendar entry.  There are three options:  normal, medium, or bold.  The best practice is to set labels in bold to make them stand out as labels instead of event information.

Image Styles

Theses styles control the padding around the image, the border size, and the border color.

The Image padding setting controls padding around the image.  You will note that the right padding is set to 10px by default whereas the top, bottom, and left padding is set to 5px.  Since images are often floated to the left of the calendar entry, the extra padding provides separation between the event text and the image.  If you floated the image to the right of the event's information, you would need the extra padding in the left padding setting.

Images may have borders surrounding them. 0px for Image border size removes the border from images.  When setting a border greater than 0px, you should err on the side of smaller pixel sizes.  The ideal border is 1px.  Each additional pixel will make the border bigger and blockier and is not aesthetically pleasing.

The Image border color is often set to black on the majority of websites but you may use any color that is part of your website's color palette.

You would repeat this process for each separate featured layout that you specified in the General Settings earlier.  The bottom line of what the Featured Events functionality provides is the ability to format the event's style settings to make it stand out from all other events.

The Event Detail View provides the view a calendar visitor receives when they click an event on the calendar.  There are two formats that you may use for the Event Detail View:  Event Detail and Event Detail-Enhanced.  The difference between these two options is that the Event Detail-Enhanced grants you control over where the Detail Image will appear on the Event Detail View along with additional formatting options.  As the enhanced version is a more powerful tool, you should consider using it instead of the standard Event Detail view that is chosen by default for each new calendar.   

To select which Event Detail View you will use with this calendar view, complete the following steps:

Under the Event Detail View section of the Calendar View options, locate the Switch Detail Views link and click it.

You will be presented with two options:  Event Detail and Event Detail-Enhanced.  You may preview either option by clicking the Preview link which will present you with a list of events to select from to see the event detail view under each formatting option.

Click the Detail View you want to use with this calendar view and click the OK button

here

Now you are ready to begin working with the settings and styles for the Event Detail View. To edit the Detail View Settings & Styles:

In the Event Detail View group, locate and click the link labeled, Edit Settings & Styles.

The Edit Settings for Event Detail window will appear.  There are two tabs covering the functionality and formatting of the event detail view:  Settings and Styles. 
The Settings tab contains settings in 10 groups:  Field Settings, Date/Time Options, Detail Image, Inline Images, Map Image, Sign-up Buttons, Back to Calendar Link, Footer, Disqus Comments, and Facebook Comments Plugin.
The Field Settings control how the fields are displayed on the Event Details view when opened by a calendar visitor.

The Field layout setting controls whether the fields are displayed using a Table or with a List view.

The Show event template setting controls whether the Event Type is displayed on the Event Details for each event. Since the Event Type is a concept really only relevant to users of 25Live Pro, it is customary to alter the setting to No to hide the event type from calendar visitors.

The Show field labels setting controls whether or not the labels for each of the data fields will display to calendar visitors.  The suggested setting is Yes.

The Description location setting controls whether or not the Event Description text will display above the fields or below the fields.  It is more customary to have the event description to be positioned below the event details fields.

The Location label setting allows you to alter the label for the Location field.  All you need to do is replace your own text in the textbox and the Event Details View will use that label.

The Event template label setting allows you to alter the label for the Event Template field.  If you chose to hide the event template in step ii above, you may ignore this setting.

The Link label setting allows you to alter the label for the event's web page link that may be set in the event custom attributes.

Date/Time Options

This group controls how dates, days of the week, and times are displayed on the Event Description view.

The Label ongoing events setting works exactly like it works in the Calendar View settings.  It includes a label for your events with multiple occurrences that started in the past and are extending into the future.  If you have lots of repeating events, consider setting this item to Yes.  Be aware that to display the ongoing events, you have to have selected Include events that started in the past in the Grouping section of the Calendar View settings.

The Ongoing events label is the label used when the Label ongoing events setting is set to Yes.  If you want to alter the label, simply replace the text in the textbox with your own.

The Date format setting controls how the event dates will be formatted.  The drop-down list contains many different options for how you may format the dates.

The Day of the week setting gives you the option to not display the day of the week, abbreviate the day of the week, or spell the full name of the day of the week.

The Show end date setting allows you to show the end date in addition to the start date for multi-day events.

The Show time setting allows you to control whether you include the event time along with the event date.  You should leave this setting to Yes.

The Time format setting allows you to control the differing formats for displaying times with AM and PM.  The provided drop-down list contains multiple options for formatting times.

The Time zone display setting allows you to display the time zone along with the time on your events. Unless your campus has locations in multiple time zones, you may safely leave the setting to None.

The On separate line setting allows you to control whether the event date and event time display on the same line or on a separate line. Setting this to No means that the event date and time will display on the same line together, while Yes will place the event date first and then the time will be immediately below it on a new line.

Detail Image

This group controls the positioning of the Detail Image as well as the maximum image width and height specified in pixels (px).

The Image position setting provides a drop-down list allowing you to control where the Detail Image floats in relation to the Details view text.  The Automatic setting positions the image based on its width and height making the positioning somewhat random.  There are options to float the image above the Details View text (Top), to the Left or Right of the Details View text, or below (Bottom) the Details View text.

 Best practice is to set the Max image width (pixels) to 125px or 150px to be a more mobile-friendly for users looking at calendars on cell phones.

The Max image height (pixels) setting is often set to the same value as the width value which ends up creating a square box for the image.  As mentioned earlier, this box approach to images can create distortion of the image when it gets compressed into the smaller-sized box.  If you are setting a height, you might want to consider creating a rectangular image size using both width and height.  However, the safest approach is to set only the image width and let the image height be variable.  That way you control the horizontal spacing of the image without having to specify a height.

Inline Images

This setting allows you to control whether or not Inline Images will display or not.  An inline image is an image that appears in the Event Description in 25Live Pro using the <img> tag.  If you are inserting images in your event descriptions, you should make sure that Yes is selected for Inline Images.

Map Image 

These settings allow you to decide if you want to include a map with your Event Details view or not.  These settings also allow you to control the map's positioning, width, height, style, and the link label to a full-sized version of the map.  The Map Image will only display if your locations have a latitude and longitude value.

The Show map image setting allows you to control whether or not the map image will display or not. Yes will display the map, while No will turn off this functionality for this calendar's detail views.

The Map Position setting allows you to control the positioning of the map image. Inline will position the Map image to the right of the event details.  However, if you are already floating an image to the left or right on your Event Details, you should select the Bottom setting to place the map below the Event Details text.

The Map width setting controls the maximum width of the map image.  The values convert to px so a value of 300 is 300px.

The Map height setting controls the maximum height of the map image.  The values convert to px so a value of 200 is 200px. Note that the width and height specified by default is rectangular and not a perfect square.

The Map Style setting allows you to control what displays by default in the map image, the Map itself or the Satellite view with and without labels.  Most calendars use the Map style and then there is a toggle on the map image that allows a site visitor to see the Satellite view.

The Map Link Label setting allows you to change the label being used to link to a full-screen version of the map image.  If you leave the Map link label blank, the Map Link will not be displayed.

The Sign-up Buttons setting controls whether or not the Event Details View will display the sign-up buttons.  As 25Live Publisher does not use the Registration module currently, you should set this setting to No.

Back to Calendar Link 

This setting controls both the positioning of the back to calendar link and allows you to choose your own text for the back link label.

The Show above event setting determines whether or not the back to the calendar link will appear above the detail view or both above and below the detail view.  Selecting Yes will display the Back To Calendar Link to display both above and below the detail view.  Selecting No means that the back link only appears below the detail view.

The Back link label setting allows you to enter text for the link that will replace the default text.

Footer

The Footer settings control whether or not to display the Event Actions, options to display Facebook, Twitter, and LinkedIn, whether or not to display the events Permalink, whether or not to display a QR code in the detail view footer, and whether or not to display the Prink link.

The Show Event Actions setting controls whether the event actions are displayed in the detail view footer. The recommended setting is Yes.

The Show Add to Calendar & Sign-Up setting controls whether or not the Add to My Calendar link will be displayed when registration is enabled on an event.  Since the Registration module is not turned on in Publisher, you should make sure this is set to No.

The Show post to Facebook, Show post to Twitter, and Show post to LinkedIn when set to Yes will add a clickable Facebook icon, Twitter icon, and LinkedIn icon in the detail view footer.  Adding these icons allows your visitors to add Facebook posts about your events, Tweet about your event, and add posts to LinkedIn about your event.  As these constitute free advertising of your event, you should consider setting all three to the Yes setting.

The Revert to Old Style Event Actions setting allows you to revert to an older version of Event Actions.  You should never revert to the Old Style Event Actions so the correct setting is No.

The Show Permalink setting provides the permalink in the footer.  The permalink is a permanent URL to the current event detail view.  Your calendar visitors could copy this link to share the URL with other people.

The Permalink label controls the label that appears next to the permalink icon.  If you don't like the label, Permalink, you may provide your own language in the textbox.

The Show QR code icon setting controls whether or not a QR code icon will be added in the footer of your event details.  Visitors may click the icon to download a QR code image file.  Visitors using mobile phones could scan the image and be taken to the event details view in a browser.

The Show QR code icon setting controls whether the print link will display in the footer.  For this version of the Detail View, the proper choice is to say Yes.  The Mobile Detail View would more appropriately be set to No.

Disqus Comments

The Disqus Comments settings allow you to turn on a Disqus comments region on the event detail for visitors to leave comments on the event.  The settings also allow you to provide a Disqus short name and customize the Disqus heading above the Disqus comments.  Unless you have someone who can monitor the comments being left on all of your event details for this calendar, you should leave this setting turned off (No).

Facebook Comments Plugin 

These settings allow you to turn on a Facebook plugin that provides another avenue for calendar visitors to comment on your event. The settings also allow you to alter the Comments heading, set the Comments width in pixels, set the Number of posts (comments) to show by default, and the Color scheme for the plugin.  Again, unless you have a dedicated employee to police and review the comments being posted on your events, you should consider setting this to No to not display it as an option on your events.

Styles Tab 

This tab allows you to set the stylistic elements for the event detail view. The good news is that many of the stylistic settings are inherited from your global settings.  A brief review will highlight elements you might need to alter. The Styles tab contains style formats arranged in 12 groups:  

Page Styles 

Text size

If you are using relative length units like rem or em, you will need to divide your desired point value by the original base text size to arrive at a value. For example, if your desired value is 9pt (points) and your original base text size is 10 pts, you will need to divide 9 points by 10 points base to arrive at a value of 0.9rem or 0.9em.

Link color

Inherited from your global settings and may be altered if you want to make changes.  

Horizontal Rules Color

Inherited from your global settings and may be altered if you want to make changes.  

Title 

This group contains formatting for the font and font size as well as the color of the title text.  You may also alter the Font weight of the title, perform a Text transform of the title, alter the Line height, and alter the Top and Bottom padding as well as the Horizontal rule padding.  Obviously, you may have to take the steps to alter the font size to relative length units as outlined above.  The Font weight and Text transform settings allow you to control the darkness of the title text as well transform it from initial capitalizations to all capitalization, as was discussed earlier.

Date 

This group contains formatting for the Font, Text size, and Color, all of which are inherited from your global settings.  If you altered the text size under the Page Styles group, check to make sure that this is inherited into the Text size box here.  If not, you may need to make manual alterations.  The Text transform will alter the format of your letters in respect to uppercase or lowercase letters. 

Event Info 

This group contains formatting for the labels and event data that will appear in the detail view for each event.  Most of the data is inherited which makes this group easy to style.  However, there are a few stylistic settings that you will want to review.

Label Font, Label Size, & Label Color

Each of these settings is inherited from your global style settings

Label Weight 

Controls the text darkness of the labels.  There are three options for the label weight:  normal, medium, and bold.  It is customary for labels to be in bold, however, you may alter this setting by selecting from the drop-down menu.

Label Text Transform

Used to transform the label text from one capitalization schema to another.  There are four options:  none, capitalize, uppercase, and lowercase.  The default setting is none.  This option allows the labels to be formatted in initial capitals much like capitalize would provide.

Label Wrap 

Controls whether or not longer labels will wrap to a second line in cases where the bounding box for the event detail is smaller.  The nowrap setting forces the labels not to wrap while the normal setting allows labels to wrap.  Typically, it is better to err on the side of caution and select normal wrapping.

Label Column Width 

Allows you to control the width of the label column in pixels.  It is blank by default so setting a width will control how much space your labels will have.  If you set a label column width, it becomes even more important that you set the Label wrap to normal to ensure that labels are not cut off.

Event Data Font, Event Data Size, & Event Data Color

Each of these settings is inherited from your global settings.  However, if you have converted to relative length units for your text size, you will need to review and make appropriate adjustments to the Event data size to ensure that it is consistent with all other text.

Description

These settings control how the text will be styled for the Event Description from 25Live Pro.  All three of these settings are inherited from the global style settings.  However, you may have to make alterations to the Size setting if you are using relative length units.

Sign-Up Buttons 

These settings control the Button font size, Inner padding, and Border corner rounding of any sign-up buttons in 25Live Publisher.  As Publisher does not utilize registration, you may safely skip these settings.

Event Actions 

These settings control how links and menu text for event actions are formatted in the event detail view of an event.  

A number of the settings are Inherited from your global settings including the 

Link Font

Inherited from your global settings

Link Size 

Default setting is in points.  

If you are using relative length units like rem or em, you will need to divide your desired point value by the original base text size to arrive at a value. For example, if your desired value is 9pt (points) and your original base text size is 10 pts, you will need to divide 9 points by 10 points base to arrive at a value of 0.9rem or 0.9em.

Link Color

Inherited from your global settings

Link Weight 

Set to bold by default.  You may alter this by selecting another option from the provided drop-down menu.

Link Text Transform 

Allows you to control the formatting of the capitalizations of the links.

Select Menu Font

Inherited from your global fonts

Select Menu Size 

Controls the font size of the menu items.  It is inherited from the Link size setting.  If you altered the Link size setting earlier, you should see that value inherited here.  If not, make a manual change to make this font size equal to the Link size.

Footer Links

This group controls how the footer text and the permalink are formatted. A couple of the settings will require you to review and make alterations as necessary.

Footer Font

Inherited from the global settings  

Footer Size 

Controls the font size of any text in the footer region of the event detail view.

If you are using relative length units like rem or em, you will need to divide your desired point value by the original base text size to arrive at a value. For example, if your desired value is 9pt (points) and your original base text size is 10 pts, you will need to divide 9 points by 10 points base to arrive at a value of 0.9rem or 0.9em.

Footer Color (for Links)

Inherited from the global settings

Footer Weight 

Controls the weight of the text in the footer region of the event detail view.

Footer Text Transform 

Allows you to control the formatting of the capitalization of the links.  The same four options are available:  none, capitalize, uppercase, and lowercase.

Permalink Pop-up Border Color

Inherited from the global settings

Disqus/Facebook Comments Header

This group controls the styling of text as well as padding for the Disqus/Facebook comments.  

Font

Inherited from your global settings.

Size 

Controls the font size.  If you altered the Link size setting earlier, you should see that value inherited here.  If not, make a manual change to make this font size equal to the Link size.

Color

Inherited from your global settings.

Padding 

Controls the padding around the header.  The default settings provide for a bit of extra padding above the header and a slightly smaller amount of padding at the bottom of the header.

Event Action Styles

Font

Inherited from your global settings.  

Text Size

If you are using relative length units like rem or em, you will need to divide your desired point value by the original base text size to arrive at a value. For example, if your desired value is 9pt (points) and your original base text size is 10 pts, you will need to divide 9 points by 10 points base to arrive at a value of 0.9rem or 0.9em.

Button Styles

Padding 

Provides for more padding to the right and left of buttons to give spacing between buttons.  

Background Color

Controls the background color of buttons on the event detail view.  

Text Color

Controls the text color of buttons on the event detail view.  

Border Color

Controls the border color of buttons on the event detail view.  

Border Corner Rounding

If you are rounding the corners of your buttons, you should match Border Corner Rounding value to the same value you set in the global settings.

Button Styles

Controls the behavior of the More Actions menu. 

Background Color

Seems to work best when it is set to white (#ffffff). 

Text Color

Controls the text color the :link setting and the :hover setting should match the link settings from your global settings.

Once you have completed work with all of the Settings and Styles for the detail view, you should click the OK button to save your settings. You may preview how your settings have affected the Event Detail view by clicking the Preview button.

The next step in getting the Calendar View spud ready to post on your campus web page is to work with the Settings and Styles of the Popup Event Detail Spud.  This popup appears on non-mobile devices when a visitor to your calendar rolls over the event on the calendar.  Mobile devices do not display popup windows.

To begin working the settings and styles for the Popup Event Detail Spud:

Locate the Popup Event Detail Spud region of the Calendar Spuds tab and click the link to Edit Settings & Styles.

The Edit Settings for Event Detail Popup will open containing two tabs:  Settings and Styles. 

Settings Tab 

This tabgrants you control of basic settings for the popup window.  

The Settings are contained in four groups:  Display Settings, Date/Time Options, Image Settings, and Field Settings.

Display Settings

Popup Width 

Allows you to set the width of the popup in pixels.

Date/Time Options 

This section contains the same settings you have already seen in the calendar view and event detail view settings. 

Label Ongoing Events 

Includes a label for multi-day events that started in the past but may still be part of an ongoing series.  For this setting to function, you must select Include events that started in the past in the Grouping section of the calendar view settings.  To turn this setting on, fill in the Yes radio button by clicking it.

Ongoing Events Label 

This setting text defaults to "Ongoing through" but you may alter the text by entering your own label text in the textbook.

Date Format 

Allows you to select the event date format on the popup window.  There are a large number of options from which to select.

Day of the Week 

Allows you to select the format for the day of the week that outputs along with the event start and end dates.  You may choose from the day of the week fully spelled out or abbreviated.  You may also set this option to None to not display the day of the week at all.

Show End Date 

Controls whether the end date is displayed along with the start date.  For single-day events, the end date will not display and only the end time will display. 

Show Time 

Controls whether the event time is included with the event date on the popup window. 

Time Format 

Controls how the AM and PM will display the times on the event.  This setting should be consistent with the choices you made for it in the Calendar View and Event Detail View settings. The drop-down menu contains a large number of different options for how the AM and PM will format in relation to your event times.

Time Zone Display 

Controls whether or not the time zone will display after event times and specifies its format. None is suggested if your campus operates in a single time zone and has no need for this option on your event times.

Styles Tab 

This tab gives you control of the stylistic settings for the Event Detail Popup.  

The styles are arranged in eight groups:  General, Title, Location, Date, Description, Web Link, Event Links, and Border Rounded Corners.

General 

These settings control three elements of the popup window.

Border Color

Inherited from the global Base border color.  Unless you want to use a different border color for the Event Detail Popup window, you may allow this setting to remain unchanged.

Border Size

A 1 px border size is the typical setting for borders on images, boxes, and other elements on web pages.  Larger pixel settings here will produce blockier borders that are generally not aesthetically pleasing.

Background Color

Should mimic what you have been using for the Background color throughout the other objects like the calendar view and event detail view.

Title 

These settings control the stylistic elements of how the event title is displayed in the Event Detail Popup window.  

Font

Inherited from the Global header font.  You may change the font stack by simply clicking in the text box and providing an alternate set of fonts.  However, it is a best practice to use the same font setting you have been using throughout the rest of your calendar.

Size

Font size defaults to 9 points.  If you are using relative length fonts, like rem or em, you will need to convert this setting by dividing the value of 9 by the original default text size of 10 to arrive at either 0.9rem or 0.9em.

Color

Inherited from the Global header color.  You may change the font color by simply clicking in the text box and providing an alternate color.

Font Weight 

Controls the darkness of the title's text.  There are three choices:  normal, medium, and bold.  Bold is generally the best setting for the title text on the Event Detail Popup view.

Location 

These settings control the stylistic elements for how the Location is displayed on the Event Detail Popup window.

Font

Inherited from the Base font and typically should not be altered to maintain font integrity across the various elements of your calendar.

Size 

If you are using relative length units like rem or em, you will need to divide your desired point value by the original base text size to arrive at a value. For example, if your desired value is 8pt (points) and your original text size is 10 pts, you will need to divide 8 points by 10 points base to arrive at a value of 0.8rem or 0.8em.

Color

Inherited from the Base text color.  It is a best practice to use the same font color throughout your calendar for your text elements.

Font Style 

Controls whether the Location text is displayed in normal text or italicized text.

Link Color 

Controls the color of the link color and the link color when hovering over it.  These settings are inherited from the Base link color and generally should not be altered.

Date 

These settings control the stylistic elements for how the Date is displayed on the Event Detail Popup window.  The settings control the Font, Text size, and font Color. 

Font

Inherited from the Base font.  Although it is possible to alter the font, it is a best practice to be consistent in your fonts across your entire calendar implementation.

Text Size

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 8pt (points) and your original base text size is 10 pts, you will need to divide 8 points by 10 points base to arrive at a value of 0.8rem or 0.8em.

Color

Inherited from the Base text color.  It is a best practice to use the same font color throughout your calendar for your text elements.

Description 

These settings control the stylistic elements for how the Event Description is displayed on the Event Detail Popup window. 

Font

Inherited from the Base font.  Although it is possible to alter the font, it is a best practice to be consistent in your fonts across your entire calendar implementation.

Size

Text size. 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 8pt (points) and your original text size is 10 pts, you will need to divide 8 points by 10 points base to arrive at a value of 0.8rem or 0.8em

Color

Inherited from the Base text color.  It is a best practice to use the same font color throughout your calendar for your text elements.

Web Link 

These settings control the stylistic elements for how the event's web link is formatted.  There are three settings for controlling your links:  Font, Size, and Link color.

Font

Inherited from the Base font.  Although it is possible to alter the font, it is a best practice to be consistent in your fonts across your entire calendar implementation.

Size

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 8pt (points) and your original base text size is 10 pts, you will need to divide 8 points by 10 points base to arrive at a value of 0.8rem or 0.8em

Link Color

Inherited from the Base link color and generally should not be altered for consistency of the behavior of your calendar across the many spuds.

Event Links 

These settings control the stylistic elements for how the event's event links are formatted. 

Font

Inherited from the Base font.  Although it is possible to alter the font, it is a best practice to be consistent in your fonts across your entire calendar implementation.

Size

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 8pt (points) and your original base text size is 10 pts, you will need to divide 8 points by 10 points base to arrive at a value of 0.8rem or 0.8em

Link

Inherited from the Base link color and generally should not be altered for consistency of the behavior of your calendar across the many spuds.

Text Transform 

This setting allows you to alter how the event links are formatted.  There are four options:  none, capitalize, uppercase, and lowercase.

• Uppercase converts the Link text to all uppercase characters.  
• Lowercase will convert the characters to all lowercase and remove any initial capitalizations.  
• Capitalize will ensure that the Link is formatted with initial capital letters including where a link is connected via two or more words each word will receive initial capitalization.  
• None is the choice if you want to not transform the text at all and output it as formatted in the underlying code of the page.
  

Border Rounded Corners 

Border Corner Rounding 

This setting requires a pixel value and defaults to the Global Settings. The pixel value sets a radius that will round off the corners of the popup box.  A 4px border corner rounding will produce a soft rounding to the edges of the four corners of the box.

When you complete preparing all of the Settings and Styles, click the OK button to save your settings.  You may preview those settings to see how they have impacted the popup window by clicking the Preview button.

After you complete work on the Calendar View, Event Detail View, and the Event Detail Popup View, you need to set up the Mobile Calendar View and the Mobile Calendar Detail View.  These two objects will return mobile-friendly views if the Publisher detects that the calendar visitor is using a mobile device.

To begin working on the settings and styles for the Mobile Calendar View:

Click the Edit Settings & Styles link located in the Mobile Table group.

The Settings & Styles window will open displaying three tabs:  General Settings, Calendar Actions Panel, and Events: Default.  The Events: Default tab may be split into multiple tabs for each Featured Level setting your Publisher environment contains.  Both the non-featured and featured events start under the Events: Default tab.  Your choices in the General Settings will determine if these tabs split apart into more tabs.

General Settings Tab 

This tab controls the settings that apply to the events and how they are displayed on the mobile calendar view.

Display Settings 

These settings control the Field list for the mobile calendar view. Essentially, these are the columns that will display in the Mobile Table View.  You may reorder the items or even add fields.  But, remember, adding fields increases the amount of labels across the columns and is not conducive to a true mobile view.  A more mobile-friendly approach is to keep the fields to the Start Date, Start Time, and Title and allow the Mobile Calendar Event Detail View to provide the details of the event.

Paging 

These settings control the Sort order of the events on the page, how many Events per page are displayed, and what Default page visitors to the calendar see when first visiting your web page containing the calendar.

Sort Order 

Controls whether events will sort Ascending (Future) with current events appearing first and then sorting future events to follow. Or, Descending (past) starting with past events and then sorting from there.  

Events Per Page 

Allows you to set a value for how many events you want to appear on each page of the mobile calendar.  It also offers the option to choose either Smart or Exact.  The Smart setting means that the Publisher calendar will attempt to fit the 15 events in the window provided for the calendar spud but if it can't it will push the events it can't fit to the next page.  The Exact setting means that the calendar will force 15 events per calendar page meaning that you will likely have a vertical scroll bar appear in your calendar view to make these events all viewable. 

Default Page 

Allows you to control the default landing page for the mobile calendar view.  There are four options:  Current day, Next day, Current Group, and Custom Date.  Current Day is typically the choice that most implementations want for their calendars.
However, on occasion, you may need to set custom dates.  Selecting the Custom Date option will open an additional textbox for you to enter the custom date.

Grouping 

These settings give you control of how events are grouped as well as what to do with multi-day events.

Group by 

Allows you to group calendar events by Year, Quarter, Month, Week, Day, or Custom.
The Custom option will open an additional set of text boxes for you to give your Custom grouping a Name, a State date, and an End date.  You may also add additional grouping dates and times by clicking the Add button.  For example, a campus has an academic calendar and they want to group by Fall Semester, Spring Semester, and Summer Semester so that the academic calendar items are grouped by term.  Each term would be entered in the Name field with a range of dates for that grouping to apply.

Multi-day Events 

Allows you to Include events that started in the past as part of your calendar entries.  Remember that when grouping, multi-day events are displayed in every group until the event ends.

Group Header Format 

These settings control the format of the date and day of the week.

Group Date Format

Controls the format for the day of the week in the group heading when you are grouping by day or week.  The drop-down menu contains multiple different date formats to choose from.

Day of the Week Format 

Controls how the day is formatted when grouping by day or week.  The day of the week will appear in the group heading in these instances.  There are settings for the day spelled out, abbreviated versions of the day, and a setting to exclude the day of the week.

Event Layout 

These settings control the layout of the events on the calendar.  There are settings for the Default layout and Featured events layout.

Default Layout 

Controls how the layout of the majority of the events on your calendar. Standard Layout should be selected for the majority of your events.

Featured Event Layouts 

Controls how the layout of your Featured Events will be formatted.  For each Featured Level, there will be an option to select an event layout different from the Default layout.  For each featured level, you may select between Featured Layout - Table and Featured Layout - List.  As the screen capture indicates, each Featured Layout - Table gets a number indicating that it is a separate layout and each of those five Featured Layout - Table settings will receive its own tab for formatting the layout.  For a more detailed discussion of the Featured Event functionality in 25Live Publisher, visit the Featured Events in 25Live Pro and 25Live Publisher document.

View Chooser Label 

View Chooser Label

This setting allows you to alter the default name for the calendar view.  For instance, the Mobile Table will display the word, Table, on the View Chooser Control Spud.  You use this setting to apply your own choice of names for each calendar view.

Event Actions 

These settings control whether or not the Event Actions are displayed and whether or not to include the sign-up buttons.

Event Action Display 

Controls whether or not a calendar visitor may execute event actions like adding the event to their own calendar, receiving e-mail and text updates, and more.  There are three options to choose from:  Multiple, Single, and None.  It's best practice to choose Multiple, which will add a checkbox next to each event on the calendar.  This allows a calendar visitor to select multiple events and take an event action on the whole group.  The Single setting allows them to take action on only one event at a time.

Show Sign-up Buttons 

Controls whether the calendar visitor sees the event sign-up buttons or not.  Since the registration module is not active in 25Live Publisher, you should always change this setting from Yes to No.

Paging Buttons

Display Top Buttons

Controls whether or not the paging buttons display at the top of the mobile calendar view. Since there will likely be scrolling on mobile devices, you should be more mobile-friendly and set to Yes.

Display Bottom Buttons

Controls whether or not the paging buttons display at the bottom of the mobile calendar view. Since there will likely be scrolling on mobile devices, you should be more mobile-friendly and set to Yes.

Timeface Header Controls 

Padding

This setting adds padding around the timeface header.  In most cases, you may accept the default settings dependent on your font choices.

Table Groups 

These settings control the format of the mobile calendar view table groupings.

Font

Inherited from the Global group font.  Unless you wish to use a different font stack with your mobile table calendar view, you may leave this setting to its default.

Size 

This setting is also inherited from the Global group size. 

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 base text size is 10 pts, you will need to divide 8 points by 10 points base to arrive at a value of 1rem or 1em

Color

Used to set the font's color for the Group headings.  This setting is inherited from the Global group color.  Unless you want to use a different header color for your groups, you may leave this setting to the default setting.

Weight

Controls how dark the text will be for your group headers. It is typical for group headers to be in bold text.

Text Transform

Inherited from the Global group text transform setting.  It is customary for this setting to be the same as used in the Global group text transform.

Padding 

Controls the padding around the group headers. The only reason you might need to alter these default settings concerns your font stack.  If a served font needs additional padding to fit better in the afforded mobile space, you would then tweak these settings.

Table Column Headers 

These settings control the formatting of the mobile calendar table's column headers.

Font

Inherited from the Global subgroup font.  Unless you wish to use a different font stack with your mobile table calendar view, you may leave this setting to its default.

Size

Inherited from the Global subgroup text size.  If you are using relative length units like rem or em you will need to convert your values.  If you made this change in the Global subgroup text size, you should see the conversion already completed here.

Weight

Controls how dark the text will be for your group headers. It is typical for group headers to be in bold text.

Text Transform

Controls the case of the characters in the column headers.  The choices are:  none, capitalize, uppercase, and lowercase.  Select which format you want to use for your headers.  If you want to let the default text format be utilized, simply leave this setting to none.

Color

Controls the color of the font for the column headers and is inherited from the Global subgroup text color.  If you want to use a different color, click in the textbox and enter a new hexidecimal number for your chosen color.

Background Color 

Controls the background behind the column headers and is inherited from the Global subgroup background color.  If you want to update the color, enter a hexadecimal number.

Padding

Controls the padding around and between each of the column headers.  You may alter this if it looks like you need more spacing around the column headers.

Table 

These settings control how the table cells are formatted.

Border Color

Sets the color used to create the horizontal and vertical border lines around the event content.  It is inherited from the Base border color which is normally the best setting.

Border Width

Controls the width in pixels of the borders.  The typical border width for table borders is 1px and should be left to that setting.

Calendar Actions Panel 

This tab contains both Settings and Styles for the Calendar Actions.  The Calendar Action include the Print link, the Show subscribe link and the Show My Events link. 

Settings 

This group options control whether or not the print link, subscribe link, and Show My Events link will display.

Show Print Link 

Since the viewer of this calendar will be on a mobile device, it is unlikely that they would be printing any documents.  If you want to give them the option, set this to Yes.

Print Label 

Allows you to supply your own label for the print link.  Simply enter the text for your Print label in the textbox.

Show Subscribe Link 

Allows you to display a link to the subscribe popup. Yes is the suggested setting.

Subscribe Label 

Allows you to supply your own label for the subscribe link.  Simply alter the text for your Subscribe label from the default text, Subscribe.

Show My Events Link 

Allows you to display a link to My Events. Yes is the suggested setting.

My Events Label

Allows you to supply your own label for the My Events link. Yes is the suggested setting. The My Events Label text defaults to My Events.

Styles 

This group options control basic stylistic settings for the text of the links and the link colors.

Display

Controls whether or not the Calendar Actions Panel displays or is hidden. If you want to hide the Calendar Actions Panel entirely, click the hide setting.  Making this choice will hide all of the links formatted under the Settings group.

Font

Controls which set of fonts will be used for the Calendar Actions panel links.  This setting is inherited by the Base font and typically it is not necessary to change this setting.  If you wish to use a different font stack, click in the textbox to activate it and make changes to the font stack.

Text Size 

Controls the size of the font for each of the calendar actions.  

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 8pt (points) and your original text size is 10 pts, you will need to divide 8 points by 10 points to arrive at a value of 0.8rem or 0.8em

Weight 

Controls how dark the text will be for your group headers. It is typical for group headers to be in bold text.

Link Color 

Control the color of links.  These settings are inherited from the Base link color.  Typically, you should not alter these settings for consistency in the behavior of links across the multiple spuds for the calendar.

Events: Default Tab 

This tab contains a group of settings that control how all non-featured events are formatted.  As this will be the majority of your events, paying attention to the details is important.  

There are seven groups of settings:  Display Settings, Popup Settings, Date/Time Options, Date/Time Span Options, Image Settings, Inline Images, and Events.

Display Settings 

Display Update Markers

This setting will show or hide update markers when new events are added to the calendar or existing events have been updated in 25Live Pro. To turn on the update markers, click the Yes radio button.  The update marker, an asterisk, will display for one cache cycle of the calendar.  When the Publisher feed, re-executes the event search driving your calendar, the update marker will be removed.

Popup Settings 

Popup Details Spud

This group allows you to select a popup to display more details of the event when a visitor hovers over the event on the calendar. As mobile devices do not display popup windows, you should leave this set to None.

Date/Time Options 

This group contains settings that control how dates and times are formatted for the Mobile Calendar View.

Date Format 

Controls the event date's format on the events.  Since you are working with a mobile calendar view, you will likely want to use either an abbreviated or numerical date format due to the smaller amounts of space available for the calendar.

Hide Year When Grouping 

Controls whether or not the year is hidden when grouping.  When you are grouping by time, the year will be included on the group heading.  If you want the year to appear for events that occur within the group, click the No radio button to include the year. Yes will hide the year from the dates on the events in the group.

Time Format 

Controls the am/pm formatting on event times in the mobile calendar view.  To be consistent with your non-mobile calendars, you should choose the same format you selected for the other calendar views.

Time Zone Display 

Determines whether or not the time zone will be included after event times as well as its format.  There are three options:  None, Short, and Long. None is appropriate for the majority of calendars.  If you have multiple campuses in multiple time zones, you should select between either Short or Long time zone formats.

Show All-day Event Duration 

Will show the duration of an all-day event in the time field. If you want to display the times for an all-day event, click the Yes radio button to turn on this functionality.

Date/Time Span Options 

This group controls how end dates and times are displayed on the mobile calendar view.

Show End Date 

Determines whether or not the end date displays on the event along with the start date.  If your event is a single-day event, only the end time will be displayed. Yes is appropriate for displaying multi-day events.  If you do not want to display the end date on the events on the mobile calendar view, select the No radio button.

Show Time

Determines whether or not the event time will be displayed along with the event date on your calendar entries. Yes is the typical choice for all calendar views.

Image Settings 

This group controls the sizing of the Event Image on calendar entries in the Mobile Calendar View.

Max Image Width (Pixels) 

Controls the maximum width allowed on the Event Image on calendar entries.  Event images that are larger than this maximum will be reduced to this width. 50px is a mobile-friendly image size.

Max Image Height (Pixels)

Controls the maximum height allowed on the Event Image on calendar images.  As with the width setting, images larger than this setting will be reduced.  It is normally safer to leave the height blank and set the maximum width.  This allows the height to be variable and avoids issues with distortion when the image is reduced to fit the 50px width setting.

Inline Images 

Show Inline Images 

Controls whether or not images that are included in the event details from 25Live will display or not.  These images are inserted using the HTML <img> tag.  

• If you want these images to be displayed, click the Yes radio button to turn on this functionality. However, you should be aware that images added via the <img> tag in the event description in 25Live Pro may be much larger than what is conducive to a mobile view. 
• No is likely be the more mobile friendly approach.  Test both settings on your mobile calendar view by viewing the calendar on a mobile device to see which option is more viable for your calendar.

Events 

This group controls the format of text on the events in the mobile calendar view.

Font

Inherited from the Base font.  If you want to use a different font stack, click the text box and enter a new font stack for the mobile calendar views event entries.

Size 

Controls the size of the text on your calendar entries.  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 8pt (points) and your original text size is 10 pts, you will need to divide 8 points by 10 points to arrive at a value of 0.8rem or 0.8em

Cell Padding

Controls the padding around the event entries on the mobile calendar view.  The default setting of 3px for top, right, bottom, and left padding should only be altered if your font choice requires more spacing around objects on the event entries on the calendar.

Start Date Font Weight 

Controls the darkness of the font. Bold typically works best but you have the option of normal or medium font weights.

Start Date Wrap and Start Time Wrap 

These setting control whether the date and time will wrap if there isn't enough space on the mobile device to display them in a single line. Nowrap will force the text to display on one line which may introduce scroll bars.  To allow the text to wrap, select the normal option.

Title Font Weight 

Controls the darkness of the Title on the calendar entries. If you want the title text to be darker choose between the medium and bold options.

Title Font Style

Controls whether the Title text is italicized or not. If you want your Titles to be italicized on event entries, select the italic setting.

Signup Button Padding

Controls the padding around the signup button.  You may safely skip alterations to these settings since you should have turned off the signup buttons in an earlier step in the process.

Event Layout

The remaining tabs for the calendar contain the same formatting choices outlined for the Default tab.  Each Featured Level may have its own settings that differ from the majority of your events that are controlled by the settings on the Events: Default tab.  The options on the Featured Level tabs differ depending on whether you selected Featured Layout - Table and Featured Layout - List. The Featured Layout - Table enlarges the font text for the event title while the Featured Layout - List adds the Featured Event label making the event stand out more prominently on the calendar.
Review the options on each tab that has an associated Featured Level Event Layout.  For more information on Featured Events, visit the Featured Events in 25Live page.

Once you have completed your work on all of the settings and styles, save your settings by clicking the OK button.  You may preview your settings by clicking the Preview button.

The last step in setting up the elements for the Calendar Spud is to set up the Mobile Calendar Detail View.  As with the Calendar Detail View, you may choose between the basic detail view and the enhanced detail view.  The difference between these two options is that the enhanced detail view allows you to control where the detail image floats in relation to the detail view text.  Once you have selected the version of the detail view you want to use for mobile you may edit the settings and styles for that view.

The Settings and Styles for the Mobile Calendar Detail View are essentially the same choices that you have to set up with the Event Detail View.  There are a few key differences to make note of when preparing your Mobile Calendar Detail View, including:

Detail Image

Controls the positioning and size of the Detail Image.

Image position

It is customary to position the image to either the Left or Right of the event details text in the Event Detail View but that would likely force a using a mobile phone to switch to landscape view. To avoid this, you should consider positioning the image above the details by setting the Image position to Top or alternatively allowing the image to be positioned automatically (Automatic) based on its width and height.  

Max Image Width (Pixels)

Consider setting this to 100px or 125px to be better viewed on mobile devices. But, if you find the images still too large at that level on a mobile device, you should adjust to even smaller widths.

Max Image Height (Pixels)

Controls the height of the Detail Image

Footer

The Footer settings will also be subtly different than those you set for the Event Detail View.  

There is no need to display the QR code icon in the mobile view as the concept of the QR code is that you would scan it with your mobile device.  

Additionally, you should be able to set the Show Print link to No as most users will not be printing from their mobile devices.  

Additionally, you can probably dispense with displaying the Show Permalink.

Once you have completed setting all the Settings and Styles for the Mobile Calendar Detail View, click the OK button to save your changes.