Selecting and Styling Calendar Views


Which versions of Series25 components are you using?

These articles have been prepared for schools using 25Live Pro and 25Live Publisher

After you complete your configuration work in Publish Settings, you are ready to begin selecting and styling the calendar views for your new calendar.  The Calendar Spuds tab contains all of the elements that make up your calendar view.  On this tab, you will see the spud code that generates the main calendar view as well as its associated pop-up view and Event Details view.


The Calendar Spuds tab also contains a mobile calendar view that 25Live Publisher will serve when it detects that a user is using a mobile device.  To set up your Main Calendar Spud, you will be required to make configuration choices concerning:

  1. The Main Calendar Spud,
  2. The Available Calendar Views,
  3. The Event Detail View,
  4. The Popup Detail View,
  5. The Mobile Calendar View, and
  6. The Mobile Calendar Detail View.

Edit Settings and Styles for the Main Calendar Spud

CLICK TO EXPAND

The first step in preparing your Main Calendar Spud is to review the Settings and Styles that should be applied to this calendar spud.  To set the Settings and Styles for the Main Calendar Spud:

  1. Locate the Main Calendar Spud region of the Calendar Spuds tab and click the Edit Settings & Styles link.
  2. The Main Calendar Spud Settings and Styles contain a group of tabs covering basic settings that impact all the elements of the calendar views.
  3. The General Settings control 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.
    1. The Display calendar list control is set to No by default.  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.
    2. The 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.
    3. The 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.
  4. The 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.
    1. There are two sections for controlling how the calendar list control will appear:  Settings and Styles.  The Settings 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.
    2. The Styles 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.  Border width is very often set to 1px for both boxes like the list control, borders around images, and table borders.  The font Size will need to be converted from pt to rem if you are taking the responsive approach to the typography.  Remember, the math is 8 divided by 10 (the original base text size) to arrive at 0.8rem.  It is also customary to set the Background color for the list control to white (#ffffff) instead of the off-white specified in the default settings.  That will often match your global background color.  You also have control of the calendar name's Size, Weight, and Box width.  The Calendar name size would be set to 0.8rem.
  5. The 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.
    1. The Settings group controls where the event action panel will show when multi-select Event actions are enabled.  The default setting is Both.  There are three options:  Top, Bottom, and Both. 
    2. The Styles 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 settings from CSS 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.  The Background color should be set to match the background setting of the global settings, normally white (#ffffff).  The Border color is normally set to match the border color in the global settings.  Border width should not be any larger than 1px.  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.  The Text size should be converted to rem units if you have been doing that in your other settings (8.25 divided by 10 = 0.825 rem).

      The CSS Box Model - Understanding Padding and Margin

      The CSS Box Model is an important element to understand when you are faced with setting padding and margin on calendar elements.  The following image illustrates the CSS Box Model:

      At the center of these concentric boxes is our web content.  Then there are box edges surrounding that content.  The Padding refers to the amount of space between the Content and the Padding box which allows your content to essentially float inside a larger box.    The Border is the border that exists around the border of the content box.  If set to 0px, then there is no viewable border.  Finally, the Margin (which is transparent) is extra padding around the content box itself.  The CSS Box Model allows us to group content and give proper spacing between parts of the content.  For more information concerning the CSS Box Model, you may visit the W3C's Recommendation 8 which covers all of the margin, border, and padding properties of CSS.  The Margin and Padding settings may be entered in px, em, or rem.

    3. The Button Styles control the styling of the buttons that users will click to activate specific event actions.  Most of the button styles are inherited from the global settings (e.g., Background color, Text color, and Border color.  The Padding contains both right and left padding larger than the top and bottom padding to put space between each of the buttons.  The 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.
    4. The More Actions Button 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.  The Background color is set to white by default and if you are using white backgrounds should remain white.  The 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.
  6. The 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.
    1. The Settings 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.

      What Does My Events Provide to Calendar Visitors?

      With Event Actions, you may allow site visitors to create their own visitor accounts.  These accounts give visitors access to the Event Actions web app where they can save and manage the events and calendars they care about.  It also allows them to save personal information like their name, e-mail address, cell phone number, and cell phone provider so that when they are taking event actions in the future these items will be automatically applied.  Users may create their visitor access by logging in with one of the following three options:  Facebook, Google, or Microsoft Live.

    2. The Styles group controls the font and link characteristics of the Calendar Actions Panel.  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.  The Font is inherited from the global settings but may be changed by clicking in the box.  The Text size should be set to rem units if that is what you have been doing with your new calendar (0.8rem).  The weight value may be set to normal, medium, or bold.  Typically, the normal text weight is perfect for these links.  Finally, the link colors are also inherited from your global settings.
  7. The Paging Buttons 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.
    1. 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.
    2. The 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.
    3. The Active Button settings control the Background color, Arrow color, and Border color of the Active paging buttons.
    4. The Inactive Button settings control the Background color, Arrow color, and Border color of the Inactive paging buttons.  Generally, these default settings work for the majority of calendars and match the behavior of inactive buttons on most web pages.
  8. The Search Status Panel 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.
    1. The Styles group controls the stylistic settings of the box that contains the search results.  You could choose to hide this panel entirely by clicking the Display drop-down box and selecting Hide.
    2. You may also alter the Padding and Margin settings for this box.  See discussion of the CSS Box Model if you need a better understanding about what these settings accomplish.
    3. The 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.
    4. The Border width on the majority of websites is set to 1px.  This places a thin border line around the entire Search Status Panel.
    5. The Font is inherited from the Global Settings but you may click in this textbox and replace it with a different font stack should you so choose.
    6. The Text size is in points.  If you have converted your font sizes to relative units like rem or em, you will want to convert it by dividing 8 by 10 to arrive at 0.8.
    7. The Link color is inherited from the Global Settings.  As you will want links to behave the same across your calendar, you should leave these unchanged.
    8. The No Events Warning Styles control the font and text size of the warning that appears when no events are returned from the search.  The Font is inherited from the Global Settings, but the Text size is 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.
  9. The Print View controls whether or not a Banner image, Calendar Name, and Print Date/Time display when a visitor prints the calendar.
    1. The 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.
    2. The Show Calendar Name will display the calendar name you set in the Publish Settings in the header of the printed page.
    3. The Show Print Date/Time will display the current date and time in the footer of the printed page.
  10. 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.

Selecting and Styling Calendar Views

CLICK TO EXPAND

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.


25Live Publisher and Accessibility

There are a couple of calendar views that are not readily accessible by screen readers.  If you are concerned about the accessibility of your calendars, you might consider alternatives to the following calendar views and promotional spuds:  Classic Month, Linear Grid, Upcoming Fader List, Upcoming Vertical Crawler, and the Upcoming Horizontal Crawler.  The Event Slider can be made accessible by turning off the animation on the spud.  For more information on this, read the Help documentation covering Accessibility Guidance (Trumba help pages not maintained by CollegeNET).


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



How many calendar views should I have for one calendar spud?

Although it is possible to display all 21 calendar views as options to your site visitors, it would quickly become overwhelming to your visitors.  The best practice is no more than three or four calendar views for each main calendar spud.  There may be times when you only perceive a need for one view.  Ultimately, you have to make the choice as to what you want to expose to users.  Having a couple of additional views can be beneficial but going too far with that concept can defeat your purpose of letting people know about your events so that they may attend.

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:

  1. Locate the Calendar View in the Available Calendar Views section and click the Edit Settings & Styles link.
  2. 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.  The General 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, Grouping, Group Header Format, Event Layout, View Chooser Label, Event Actions, Paging Buttons, Timeface Header Controls, List Groups, and List Subgroups.
    1. The Paging group 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.
      1. The 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.
      2. The 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.
      3. The Default page that the calendar begins displaying can be 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.
    2. The Grouping group controls how events are grouped on the calendar view.  This group also allows for the possibility of subgrouping.
      1. The Group by setting allows you to group the events on the calendar by Year, Quarter, Month, Week, Day, or a Custom grouping based on date ranges.
      2. The Subgroup by setting 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.
      3. The Multi-day events setting 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.
  3. The Group Header Format group controls how dates and day of the week format when grouping by day or week or when grouping by start time.
    1. The Group date format gives you a multitude of options in the ways you may format the date when grouping by day or week.
    2. The 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.
    3. The Event Layout 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.
      1. The 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.
      2. 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.
    4. 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.
    5. The Event Actions group contains additional settings for the event actions beyond what was set in the Global Settings.
      1. 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.
      2. 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.
    6. 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.
    7. 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.
    8. 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.
      1. The Size setting for the fonts is set in points. But, if you are using relative length measures like rem or em, you will need to convert the 12pt size by dividing 12 by 10 to arrive at a value of either 1.2rem or 1.2em.
      2. The Background color setting should match your global background color.  It is set to transparent by default.  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.
    9. The List Subgroups 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.
      1. The font Size is set in points.  But, if you are using relative length measures like rem or em, you will need to convert the 9pt size by dividing 9 by 10 to arrive at a value of either 0.9rem or 0.9em.
      2. The Background color may also have to be adjusted if you want it to be white like other backgrounds.
  4. 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.
    1. 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.
    2. 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.
      1. 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.
      2. The Ongoing events label is by default set to Ongoing through but you may replace it with your preference for text to indicate that this is a continuing event. 
      3. The Date format allows you to control the format of the date by selecting from a drop-down list of options.
      4. The Hide year when grouping setting, when set to Yes, causes the year to not display when you are grouping by time.
      5. The Hide event dates when grouped by day setting allows you to hide the date on the events when you are grouping by day.
      6. The Day of the week setting allows you to not include the day, include an abbreviated day format, or spell the day out completely.
      7. 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.
      8. The Show time setting when set to Yes will include the event time along with the event date.
      9. 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.
      10. The Time zone display is set to None by default but has options for both Short and Long time zone formats.
    3. 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.
      1. 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.
      2. 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. 
      3. 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.

        Setting Only the Max Image Width

        If you set the Max image width (pixels) and the Max image height (pixels) to the same value (e.g., 100px X 100px), you may get image distortion if the image is larger than the sizes specified.  A 100px by 100px image is a square image.  But, what happens if your image is 350px wide and 200px high?  Image distortion that looks like the carnival funhouse mirrors.  So, how do I avoid this problem?  Only set the Max image width (pixels) and leave the Max image height (pixels) blank.  This forces the issue on the width of the image but allows the height to be variable meaning that when a rectangular image is larger than the max-width when it is resized it will not distort.

    4. 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 the default setting of No to Yes to show the inline images.

      Inserting Images in the Event Description in 25Live Pro

      One of the HTML elements that is available in the Event Form's Event Description editor is the image tag, <img>.  This HTML element allows you to insert an image, or images, into your Event Description.  When you are doing this in your Event Description editor, be sure to insert the full URL where the image is located.  Relative URLs will produce a broken image symbol in the browser when viewers attempt to look at the event.

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

      1. The Spud width less than setting assists Publisher in determining when to use a different maximum image width usually needed for mobile devices.  The default size is set to 500px but you may replace this value with your own value.

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

        Inserting Images in the Event Description in 25Live Pro

        One of the HTML elements that is available in the Event Form's Event Description editor is the image tag, <img>.  This HTML element allows you to insert an image, or images, into your Event Description.  When you are doing this in your Event Description editor, be sure to insert the full URL where the image is located.  Relative URLs will produce a broken image symbol in the browser when viewers attempt to look at the event.

    6. 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.
    7. 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.
      1. The font Size setting is set in points by default.  If you have converted to using relative length units like rem and em, you will need to make your conversion by dividing 10 by 10 (the original global text size) to arrive at 1rem or 1em. 
      2. The Weight setting allows you to choose from a couple of options:  normal, medium, and bold.  The default setting for Title text is set to bold and you should consider keeping this setting.
      3. The Style setting controls whether the Title text will be normal, non-italicized text or whether it will become italicized.
      4. 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.
      5. 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.
      6. The Signup button spacing may be safely ignored given that the registration module is not turned on in 25Live Publisher.
    8. 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.
      1. The Font size setting controls the size of the text on the details of the calendar entry.  It is set to points by default.  If you have converted to using relative length units like rem and em, you will need to make your conversion by dividing 8 by 10 (the original global text size) to arrive at 0.8rem or 0.8em. 
      2. 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.
      3. 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.
    9. The Image Styles control the padding around the image, the border size, and the border color.
    10. 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.
    11. Images may have borders surrounding them.  The default setting of 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.
    12. 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.
  5. 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.

Selecting and Styling the Event Details View

CLICK TO EXPAND

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:

  1. Under the Event Detail View section of the Calendar View options, locate the Switch Detail Views link and click it.
  2. 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.
  3. Click the Detail View you want to use with this calendar view and click the OK button.

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

  1. In the Event Detail View group, locate and click the link labeled, Edit Settings & Styles.
  2. 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. 
  3. 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.
    1. The Field Settings control how the fields are displayed on the Event Details view when opened by a calendar visitor.
      1. The Field layout setting controls whether the fields are displayed using a Table or with a List view.
      2. The Show event template setting controls whether the Event Type is displayed on the Event Details for each event.  The default setting is set to Yes.  However, 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.
      3. The Show field labels setting controls whether or not the labels for each of the data fields will display to calendar visitors.  The default setting is set to Yes and should remain so.
      4. 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.
      5. 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.
      6. 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.
      7. 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.
    2. The Date/Time Options group controls how dates, days of the week, and times are displayed on the Event Description view.
      1. 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.  The default setting is set to No.  However, if you have lots of repeating events, you should 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.
      2. 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.
      3. 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.
      4. 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.
      5. The Show end date setting allows you to show the end date in addition to the start date for multi-day events.
      6. 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.
      7. 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.
      8. The Time zone display setting allows you to display the time zone along with the time on your events.  The default setting is None.  However, you may turn on either Short format or Long format.  Unless your campus has locations in multiple time zones, you may safely leave the setting to the default.
      9. 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.  The default setting of No means that the event date and time will display on the same line together.  Setting this option to Yes will place the event date first and then the time will be immediately below it on a new line.
    3. The Detail Image group controls the positioning of the Detail Image as well as the maximum image width and height specified in pixels (px).
      1. 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.
      2. The Max image width (pixels) setting defaults to 200px.  This size for the detail image could be on the larger side and wouldn't necessarily be the most mobile-friendly.  When building calendars for clients, we normally set the width to 125px or 150px to be a bit more mobile-friendly for users looking at calendars on cell phones.
      3. 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.
    4. The Inline Images 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.
    5. The Map Image 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.
      1. The Show map image setting allows you to control whether or not the map image will display or not.  The default setting is Yes to display the map.  Choosing No will turn off this functionality for this calendar's detail views.
      2. The Map Position setting allows you to control the positioning of the map image.  The default positioning of the Map image is inline 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.
      3. 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 default value is 300px but you may alter this if you want it to be larger or smaller.
      4. The Map height setting controls the maximum height of the map image.  The values convert to px so a value of 200 is 200px.  The default value is 200px but you may alter this to be larger or smaller as needed.  Note that the width and height specified by default is rectangular and not a perfect square.
      5. 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.
      6. 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.
    6. 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.
    7. The Back to Calendar Link setting controls both the positioning of the back to calendar link and allows you to choose your own text for the back link label.
      1. 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.
      2. The Back link label setting allows you to enter text for the link that will replace the default text.

    8. 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.
      1. The Show Event Actions setting controls whether the event actions are displayed in the detail view footer.  The default setting is Yes and should be left to that setting.
      2. 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.
      3. 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.
      4. 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.
      5. 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.
      6. 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.
      7. 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.
      8. 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.
    9. 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).
    10. The Facebook Comments Plugin 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.
  4. The Styles tab allows you to set the stylistic elements for the event detail view.  The Styles tab contains style formats arranged in 12 groups:  Page Styles, Title, Date, Event Info, Description, Sign-Up Buttons, Event Actions, Footer Links, Disqus/Facebook Comments Header, Event Action Styles, Button Styles, and More Action Button Styles.  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.
    1. The Page Styles group contains formatting for the Text size, the Link color, and the Horizontal rules color.  Both the Link color and the Horizontal rules color are inherited from your global settings and may be altered if you want to make changes.  The Text size will need to be reviewed if you decided to use relative lengths like the rem or em.  If you are using those, use the original base text size of 10pt and divide 9 by 10 to arrive at 0.9rem or 0.9em.
    2. The Title 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 (default behavior) to all capitalization, as was discussed earlier.
    3. The Date 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 is set to all uppercase characters by default but you have the option of altering this by clicking a different choice in the drop-down menu of options.
    4. The Event Info 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.
      1. The Label font, Label size, and Label color settings are all inherited from your global style settings.  However, you should verify that your alteration of the Text size to relative length units, if you chose to do that earlier, have inherited here.  If not, divide 9 by 10 to arrive at a 0.9 rem or 0.9em setting.
      2. The Label weight setting 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 which is why the default value is set to bold.  However, you may alter this setting by selecting from the drop-down menu.
      3. The Label text transform setting is 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.
      4. The Label wrap setting 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.
      5. The Label column width setting 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.
      6. All of the event data settings are 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.
    5. The Description 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.
    6. The Sign-Up Buttons 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.
    7. The Event Actions 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, Link color, Select menu font, and Select menu size.
      1. The Link size default setting is in points (9pt).  If you are using relative length fonts, you would alter this setting by dividing 9 by 10 to arrive at 0.9rem or 0.9em.
      2. The Link weight setting is set to bold by default.  You may alter this by selecting another option from the provided drop-down menu.
      3. The Link text transform setting allows you to control the formatting of the capitalizations of the links.  The same four options are available:  none, capitalize, uppercase, and lowercase.  The default setting is none which will resolve to initial capitalizations.
      4. The Select menu font setting is inherited from your global fonts.
      5. The Select menu size setting 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.
    8. The Footer Links group controls how the footer text and the permalink are formatted.  Many of the settings are inherited from the global settings including the Foot font, Footer color (for links), and the Permalink pop-up border color.  A couple of the settings will require you to review and make alterations as necessary.
      1. The Footer size setting controls the font size of any text in the footer region of the event detail view.  Since this setting is in points, if you are using relative length font sizes, you will need to divide 9 by 10 to arrive at either 0.9rem or 0.9em.
      2. The Footer weight setting controls the weight of the text in the footer region of the event detail view.  Three options are available:  normal, medium, and bold.  If bold text (the default setting) is too heavy a weight then you may choose between normal text and medium text which is an intermediate degree between normal and bold.
      3. The Footer text transform setting allows you to control the formatting of the capitalization of the links.  The same four options are available:  none, capitalize, uppercase, and lowercase.  The default setting is none which will resolve to initial capitalization.
    9. The Disqus/Facebook Comments Header group controls the styling of text as well as padding for the Disqus/Facebook comments.  Both the Font and the Color are inherited from your global settings.
      1. The Size setting 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.
      2. The Padding setting 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.

    10. The Event Action Styles group contains settings for the Font and Text size.  The font is inherited from your global settings.  If you are using relative length fonts, you would alter this setting by dividing 8.25 by 10 to arrive at 0.825rem or 0.825em.
    11. The Button Styles group controls the Background color, Text color, and Border color of buttons on the event detail view.  All three of those settings are inherited from global settings.  The Padding setting provides for more padding to the right and left of buttons to give spacing between buttons.  Finally, the Border corner rounding is set by default to 4px.  If you are rounding the corners of your buttons, you should match this value to the same value you set in the global settings.
    12. The More Actions Button Styles group setting controls the behavior of the Background color and the Text color for the More Actions menu.  The Background color seems to work best when it is set to white (#ffffff).  The Text color for the :link setting and the :hover setting should match the link settings from your global settings.
  5. 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.

Styling the Popup Event Detail Spud

CLICK TO EXPAND

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:

  1. Locate the Popup Event Detail Spud region of the Calendar Spuds tab and click the link to Edit Settings & Styles.
  2. The Edit Settings for Event Detail Popup will open containing two tabs:  Settings and Styles. 
  3. The Settings tab grants 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.
    1. The Display Settings contains one setting, the Popup Width.  The Popup Width allows you to set the width of the popup in pixels. The default setting is for a popup window of 325 pixels wide.  You may alter the size of the window to be smaller or larger.
    2. The Date/Time Options contain the same settings you have already seen in the calendar view and event detail view settings.  The settings for these Date/Time Options should remain consistent with your earlier choices of Date/Time Options.
      1. The Label ongoing events setting 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.
      2. The Ongoing events label setting text defaults to "Ongoing through" but you may alter the text by entering your own label text in the textbook.
      3. The Date format setting allows you to select the event date format on the popup window.  There are a large number of options from which to select.
      4. The Day of the week setting 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.
      5. The Show end date setting 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.  The default setting is Yes.
      6. The Show time settings controls whether the event time is included with the event date on the popup window.  The default setting is Yes.
      7. The Time format setting 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.
      8. The Time zone display setting controls whether or not the time zone will display after event times and specifies its format.  The default setting is None as most campuses operate in a single time zone and have no need for this option on their event times.  However, in instances where a campus has multiple locations in multiple time zones, this setting may become
  4. The Styles 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.
    1. The General settings control three elements of the popup window:  Border color, Border size, and Background color.
      1. The Border color setting is 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.
      2. The Border size setting is set to a 1px border.  This 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.
      3. The Background color setting is set to a default setting of white (#ffffff).  This setting should mimic what you have been using for the Background color throughout the other objects like the calendar view and event detail view.
    2. The Title settings control the stylistic elements of how the event title is displayed in the Event Detail Popup window.  The settings control the Font, the Font Size, the font Color, and the Font weight.
      1. The Font setting is 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.
      2. The font Size setting 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.
      3. The font Color setting is inherited from the Global header color.  You may change the font color by simply clicking in the text box and providing an alternate color.
      4. The Font weight setting controls the darkness of the title's text.  There are three choices:  normal, medium, and bold.  The default setting is bold which is generally the best setting for the title text on the Event Detail Popup view.
    3. The Location settings control the stylistic elements for how the Location is displayed on the Event Detail Popup window.  The settings control the Font, the font Size, the font Color, the Font style, and the Link color (both link and hover) settings.
      1. The Font setting is inherited from the Base font and typically should not be altered to maintain font integrity across the various elements of your calendar.
      2. The font Size setting defaults to 8 points (pt).  If you are using relative length fonts, like rem or em, you will need to convert this setting by dividing the value of 8 by the original default text size of 10 to arrive at either 0.8rem or 0.8em.
      3. The font Color setting is inherited from the Base text color.  It is a best practice to use the same font color throughout your calendar for your text elements.
      4. The font Style setting controls whether the Location text is displayed in normal text or italicized text.  The default setting is to display the Location name in italics.
      5. The Link color setting 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.
    4. The Date 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.
      1. The Font setting is 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.
      2. The Text size setting is set to 8 points (pt).  If you are using relative length fonts, like rem and em, you will need to convert this setting by dividing 8 by the original default text size of 10 to arrive at either 0.8rem or 0.8em.
      3. The font Color setting is inherited from the Base text color.  It is a best practice to use the same font color throughout your calendar for your text elements.
    5. The Description settings control the stylistic elements for how the Event Description is displayed on the Event Detail Popup window.  The settings control the Font, text Size, and Color.
      1. The Font setting is 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.
      2. The Text size setting is set to 8 points (pt).  If you are using relative length fonts, like rem and em, you will need to convert this setting by dividing 8 by the original default text size of 10 to arrive at either 0.8rem or 0.8em.
      3. The font Color setting is inherited from the Base text color.  It is a best practice to use the same font color throughout your calendar for your text elements.
    6. The Web Link 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.
      1. The Font setting is 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.
      2. The Size setting is set to 8 points (pt).  If you are using relative length fonts, like rem and em, you will need to convert this setting by dividing 8 by the original default text size of 10 to arrive at either 0.8rem or 0.8em.
      3. The Link color setting is inherited from the Base link color and generally should not be altered for consistency of the behavior of your calendar across the many spuds.
    7. The Event Links settings control the stylistic elements for how the event's event links are formatted.  There are four settings that control the Font, Size, Link, and Text transform.
      1. The Font setting is 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.
      2. The Size setting is set to 7 points (pt).  If you are using relative length fonts, like rem and em, you will need to convert this setting by dividing 7 by the original default text size of 10 to arrive at either 0.7rem or 0.7em.
      3. The Link setting is inherited from the Base link color and generally should not be altered for consistency of the behavior of your calendar across the many spuds.
      4. The Text transform setting allows you to alter how the event links are formatted.  There are four options:  none, capitalize, uppercase, and lowercase.  Uppercase, the default setting, 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.
    8. The Border Rounded Corners group contains only one setting, the Border corner rounding.  This setting requires a pixel value and defaults to the Global Settings,  Base border corner rounding.  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.
    9. 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.

Styling the Mobile Main Calendar View

CLICK TO EXPAND

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:

  1. Click the Edit Settings & Styles link located in the Mobile Table group.
  2. 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.
  3. The General Settings tab controls the settings that apply to the events and how they are displayed on the mobile calendar view.  They are arranged in 12 groups:  Display Settings, Paging, Grouping, Group Header Format, Event Layout, View Chooser Label, Event Actions, Paging Buttons, Timeface Header Controls, Table Groups, Table Column Headers, and Table. 
    1. The Display 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.
    2. The Paging 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.
      1. The Sort order setting 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.  The default setting is Ascending (Future).
      2. The Events per page setting 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. 
      3. The Default Page setting allows you to control the default landing page for the mobile calendar view.  There are four options:  Current day (the default setting), Next day, Current Group, and Custom Date.  The default choice 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.
    3. The Grouping settings give you control of how events are grouped as well as what to do with multi-day events.
      1. The Group by setting 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.
      2. The Multi-day events setting 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.
    4. The Group Header Format settings control the format of the date and day of the week.
      1. the Group date format setting 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.
      2. The 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.
    5. The Event Layout settings control the layout of the events on the calendar.  There are settings for the Default layout and Featured events layout.
      1. The Default layout setting controls how the layout of the majority of the events on your calendar.  The default setting is Standard Layout (1) which should be selected for the majority of your events.
      2. The Featured event layouts setting 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.
    6. The View Chooser Label setting allows you to alter the default name for the calendar view.  For instance, the Mobile Table will display the word, Tableon the View Chooser Control Spud.  You use this setting to apply your own choice of names for each calendar view.
    7. The Event Actions settings controls whether or not the Event Actions are displayed and whether or not to include the sign-up buttons.
      1. The Event action display setting 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.  The default setting is None but it is a better practice to choose the Multiple setting.  The Multiple setting adds 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.
      2. The 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.
    8. The Paging Buttons settings control whether or not the paging buttons display at the top of the mobile calendar view 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 both the Display top buttons and Display bottom buttons to Yes.
    9. The Timeface Header Controls setting adds padding around the timeface header.  The default settings are set to 0px.  In most cases, you may accept the default settings dependent on your font choices.
    10. The Table Groups settings control the format of the mobile calendar view table groupings.
      1. The Font setting is 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.
      2. The Size 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 12 by 10 to arrive at a font size of 1.2rem or 1.2em.  If you made this change in the Global Settings, you should see the conversion already completed here.
      3. The Color setting is 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.
      4. The Weight setting controls how dark the text will be for your group headers.  The default setting is bold.  There are three options:  normal, medium, and bold.  It is typical for group headers to be in bold text.
      5. The Text transform setting is 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.
      6. The Padding setting controls the padding around the group headers.  The setting has a 10px top pad with left and right being padded by 5px.  There is no padding below 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.
    11. The Table Column Headers settings control the formatting of the mobile calendar table's column headers.
      1. The Font setting is 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.
      2. The Size setting is inherited from the Global subgroup text size.  If you are using relative length units like rem or em you will need to divide 9 by 10 to arrive at a font size of 0.9rem or 0.9em.  If you made this change in the Global subgroup text size, you should see the conversion already completed here.
      3. The Weight setting controls how dark the text will be for your group headers.  The default setting is bold.  There are three options:  normal, medium, and bold.  It is typical for group headers to be in bold text.
      4. The Text transform setting controls the case of the characters in the column headers.  The choices are:  none (default), 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.
      5. The Color setting 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.
      6. The Background Color setting controls the background behind the column headers and is inherited from the Global subgroup background color.  If you are satisfied with the color (often white - #ffffff), you may accept the default value. If you want to alter it, click in the textbox and enter a new hexadecimal number for your chosen color.
      7. The Padding setting 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.
    12. The Table settings controls how the table cells are formatted.
      1. The Border color setting is 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.
      2. The Border width setting is the width in pixels of the borders.  The typical border width for table borders is 1px and should be left to that setting.
  4. The Calendar Actions Panel 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. 
    1. The Settings group options control whether or not the print link, subscribe link, and Show My Events link will display.
      1. The Show prink link setting defaults to No for the mobile calendar view.  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, change the default setting of No to Yes to display the Print link.
      2. The Print label setting allows you to supply your own label for the print link.  Simply enter the text for your Print label in the textbox.
      3. The Show subscribe link setting allows you to display a link to the subscribe popup.  The default setting is Yes which is a best practice to provide.
      4. The Subscribe label setting allows you to supply your own label for the subscribe link.  Simply alter the text for your Subscribe label from the default text, Subscribe.
      5. The Show My Events link setting allows you to display a link to My Events.  The default setting is Yes which is a best practice to provide.  
      6. The My Events label setting allows you to supply your own label for the My Events link.  The default setting is Yes which is a best practice to provide.  The My Events Label text defaults to My Events.
    2. The Styles group options control basic stylistic settings for the text of the links and the link colors.
      1. The Display setting controls whether or not the Calendar Actions Panel displays or is hidden.  The default setting is show.  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.
      2. The Font setting 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.
      3. The Text size setting controls the size of the font for each of the calendar actions.  If you are using relative length units like rem or em, you would divide 8 by 10 to arrive at a value of 0.8rem or 0.8em.
      4. The Weight setting controls how dark the text will be for your group headers.  The default setting is bold.  There are three options:  normal, medium, and bold.  It is typical for group headers to be in bold text.
      5. The Link color settings 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.
    3. The Events: Default 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.
      1. The Display Settings group provides the opportunity to show or hide update markers when new events are added to the calendar or existing events have been updated in 25Live Pro.  The default setting is No.  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.
      2. The Popup Settings group allows you to select a popup to display more details of the event when a visitor hovers over the event on the calendar.  The default setting is None for the Mobile Calendar View.  As mobile devices do not display popup windows, you should leave the default setting in place.
      3. The Date/Time Options group contains settings that control how dates and times are formatted for the Mobile Calendar View.
        1. The Date format setting 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.
        2. The Hide year when grouping setting 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.  The default setting of Yes will hide the year from the dates on the events in the group.
        3. The Time format setting 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.
        4. The Time zone display setting 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.  The default setting of 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.
        5. The Show all-day event duration setting will show the duration of an all-day event in the time field.  The default setting is set to No.  However, if you want to display the times for an all-day event, click the Yes radio button to turn on this functionality.
      4. The Date/Time Span Options group controls how end dates and times are displayed on the mobile calendar view.
        1. The Show end date setting 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.  The default setting of 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.
        2. The Show time setting determines whether or not the event time will be displayed along with the event date on your calendar entries.  The default setting of Yes is the typical choice for all calendar views.
      5. The Image Settings group controls the sizing of the Event Image on calendar entries in the Mobile Calendar View.
        1. The Max image width (pixels) setting 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.  The default setting of 50px is a mobile-friendly image size.
        2. The Max image height (pixels) setting 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.
      6. The Inline Images group contains only one setting, Show inline images.  This setting 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.  The default setting is No which is likely a 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.
      7. The Events group controls the format of text on the events in the mobile calendar view.
        1. The Font setting is 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.
        2. The Size setting controls the size of the text on your calendar entries.  The default setting is 8 points.  If you are using relative length units like rem or em, you should divide 8 by 10 to arrive at 0.8rem or 0.8em.
        3. The Cell padding setting 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.
        4. The Start date font weight setting controls the darkness of the font.  The default setting of bold typically works best but you have the option of normal or medium font weights.
        5. The Start date wrap and Start time wrap settings 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.  There are two options:  normal and nowrap.  The default setting of 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.
        6. The Title font weight setting controls the darkness of the Title on the calendar entries.  The default setting is normal.  If you want the title text to be darker choose between the medium and bold options.
        7. The Title font style setting controls whether the Title text is italicized or not.  The default setting is normal, non-italicized text.  If you want your Titles to be italicized on event entries, select the italic setting.
        8. The Signup button padding setting 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.
    4. 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.
  5. 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.

Setting Up the Mobile Calendar Detail View

CLICK TO EXPAND

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:

  1. The positioning and size of the Detail Image will need to be considered carefully.  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.  The other consideration you need to deal with is the Max image width (pixels).  The 200px default size is likely far too large for a mobile device.  You might consider reducing the Max image width (pixels) to an even smaller 100px or 125px.  But, if you find the images still too large at that level on a mobile device, you should adjust to even smaller widths.
  2. 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.
  3. Once you have completed setting all the Settings and Styles for the Mobile Calendar Detail View, click the OK button to save your changes.


PREVIOUSLY:  Working with Publish Settings for a Calendar
UP NEXT :  Selecting and Styling Control Spuds