FAQ content

Events: Customize a calendar's look & feel

In this article

You can customize a calendar's Look & Feel with a variety of options through its Settings, Colors, and Custom CSS. These options can help improve the user experience for both staff and patrons by hiding unneeded elements and allowing folks to more quickly focus on what's important.

Please note that most options under Settings and Colors affect the admin calendar and full calendar widget only, so be sure to read the descriptions carefully. For modifying the public calendar, use the calendar's custom CSS or system-wide CSS.

Getting there

  1. Click Events from the command bar.
  2. Click the calendar's title from the Modify/View Calendar column on the Calendar List tab.
Clicking a calendar title to modify/view it.
  1. Click the Look & Feel tab.
Look & Feel tab

Settings

The Settings allow you to customize the display of the calendar's admin view and full calendar widget. Unless otherwise noted, these changes will not be reflected on your public calendar page.

  1. Use the Settings panel to make the following changes:​
    1. Default View: this allows you to set the default view of the admin calendar and full calendar widget.
      • basicWeek: this will set the default view to one week. This is the same as clicking on the "Week" button of your calendar.
      • agendaDay: this will set the default view to a single day's events. This is the same as clicking on the "Day" button of your calendar.
      • agendaWeek: this will set the default view to one week, in agenda (list) format. This is the same as clicking on the "Agenda" button of your calendar.
      • month: this will set the default view to one month. This is the same as clicking on the "Month" button of your calendar.
    2. Start Day: choose whether you want your weeks to begin on Sunday or Monday. This applies to the admin view, full calendar widget, and public calendar page (monthly view).
    3. Show Weekends: this allows you to show or hide weekends from your calendar, which can help save space if you don't schedule events on Saturdays and Sundays. This applies to the admin view and full calendar widget.
    4. Show Past Events: this allows you to show or hide past events from your full calendar widget and public calendar page (monthly view).
    5. First Hour: this determines the first hour that displays on the "Day" and "Week" views of your admin calendar and full calendar widget. For example, if you set this to 8am, then the calendar will automatically be scrolled down to 8am when you view it.
    6. Minimum Time: this is the earliest time that will display on the "Day" and "Week" views of the admin calendar and full calendar widget. For example, if you set this to 6am, then you will be unable to scroll up past 6am.
    7. Maximum Time: this is the latest time that will display on the "Day" and "Week" views of the admin calendar and full calendar widget. For example, if you set this to 10pm, then you will be unable to scroll down past 10pm.
    8. Time Slots: this sets the length of your time slots, in minutes, on the "Day" and "Week" views of the admin calendar and full calendar widget. If you want events to appear larger, choose a smaller time slot. If you want more events to display on-screen at once, choose a larger time slot.
    9. Overlap Events: if you have events with overlapping times, this will determine if the events should also visually overlap on the "Day" and "Week" views of the admin calendar and full calendar widget. If you choose "No," then events will instead appear side-to-side during the overlapping times.
    10. Show End Time: this option allows you to display or hide the end time of single day events.
  2. Click Save.
placeholder

Advanced Settings

In the Advanced Settings you can customize the calendar header buttons and change how dates and times appear in the admin calendar and full calendar widget.

  1. At the bottom of the Settings panel, select the Show Advanced Settings link to reveal the options.
The advanced settings link
  1. Calendar Header Buttons: this allows you to control which buttons display above your calendar. This applies to the admin view and full calendar widget.
    • You can position buttons to the left side, center, and right side of the calendar.
    • To add a button, enter its value in the position text field where you want it to display. Values separated by a comma will display adjacent to one another. Values separated by a space will display with a small gap between them.
    • You can choose from the following values, which are case sensitive: title, prev, next, prevYear, nextYear, today, basicWeek, agendaDay, agendaWeek, month, listDay, listWeek, listMonth
    • To remove a button, simply remove the value from the text fields.
The Calendar Header Buttons
  1. Format Instructions: this section provides the full list of available formats and the case-sensitive values used to apply them to the Title, Column and Time Formats (the following three sections).
  2. Title Format: this determines what will be displayed in the title above the admin calendar and full calendar widget.
    • Day: this determines what will be displayed in the title when using the "Day" view.
    • Week / Basic Week: this determines what will be displayed in the title when using the "Week" and "Agenda" views.
    • Month: this determines what will be displayed in the title when using the "Month" view.
  3. Column Format: this determines the text that displays in the column headings of the admin calendar and full calendar widget.
    • ​Day: this determines what will be displayed in the column headings when using "Day" view.
    • Week / Basic Week: this determines what will be displayed in the column headings when using the "Week" and "Agenda" views.
    • Month: this determines what will be displayed in the column headings when using the "Month" view.
  4. Time Format: this determines how times will be formatted for calendar events in the admin calendar and full calendar widget.
    • Basic Week​: this determines how times will be formatted when using the "Agenda" view.
    • Day/Week: this determines how times will be formatted when using the "Day" or "Week" view.
    • Month: this determines how times will be formatted when using the "Month" view.
  1. Click Save.
The Format Instructions, Title Format, Column Format and Time Format.

Colors

Here you can customize the colors of the admin calendar and full calendar widget. These changes will not be reflected on your public calendar page. For that, you'll need to edit your calendar's custom CSS code.

  1. Click Colors to expand the panel. Click a color swatch to use the color picker to select the colors you want, or enter the hex code of the colors in each field. You can customize the following elements:
    • Calendar Title text color: this is the title of the calendar that displays the month and year.
    • Calendar Header text color: this is the text color of the days of the week.
    • Calendar Header background color: this is the background color of the days of the week.
    • Calendar Border color: this is the border color of the calendar.
    • Calendar Day Number color: this is the text color of each day number on the calendar (for the active month).
  2. Click Save.
Customizing a calendar's colors with the color picker.

Custom CSS

For making advanced customizations to the style of your calendar, you can add custom CSS code. The code you add will apply to the admin view of your calendar, the main calendar, homepage and the embeddable/widget calendars. 

In addition, this is where you can customize the default CSS code for your calendar's mini-calendar widget.

  1. Click Custom CSS to expand the panel.
  2. Add or edit the CSS code in the text box.
    1. You can customize the CSS used for the mini-calendar widget in this space.
    2. Click the Reset CSS to System Default button to remove your customizations and restore the default CSS code.
  3. Click Save.
customizing a calendar's CSS