Page tree
Skip to end of metadata
Go to start of metadata

Experienced webmasters may want more control of their public calendar view than is provided by localendar's Color Preferences editor.

For those individuals, we provide "hooks" into all of the public calendar views via a set of CSS placeholder classes. Feel free to implement these classes in your site to change your calendar's appearance. This is a great way to change font sizes, link colors, or other attributes not covered by our Color Preferences editor.

These classes let you alter the title text (eg, mt-usr), monthname text (eq, mm-usr), and event title text (eg, m-usr) for the 3 base calendar views: Month, Week, and Day. The classes ending in al and ar (mal,mar,wal,war,dal,dar) are applied to the forward/backward arrows on their respective calendar views.

CSS class

What it affects

.m-usr

Event Names shown on the Month view

.mt-usr

Calendar Title as shown on the Month view

.mm-usr

Month Name as shown on the Month view

.mal-usr

Left-arrow on the Month View

.mar-usr

Right-arrow on the Month View

.mj-usr

The month name abbreviations at the top of the Month Block view

.w-usr

Event Names shown on the Week view

.wt-usr

Calendar Title as shown on the Week view

.wal-usr

Left-arrow on the Week View

.war-usr

Right-arrow on the Week View

.w-date-usr

The data labels (text and day #) on the left of the Week view

.d-usr

Event Names shown on the Day view

.d2-header-usr

Section headings on the Today+Happening Soon view

.d2-date-usr

Date labels on the Today+Happening Soon view

.dj-usr

Day Names at the top of the Day view

.dj_diffmonth-usr

Day Numbers in the date blocks for prev/next month dates of the Month Block view

.dj_weekend-usr

Day Numbers in the date blocks for weekend dates of the Month Block view

.dj-weekday-usr

Day Numbers at the top of the Day view

.dt-usr

Calendar Title as shown on the Day view

.dal-usr

Left-arrow on the Day View

.dar-usr

Right-arrow on the Day View

.list-daylabel-usr

The Date/Day Label on the Month,Week,Day List Views

.list-row-usr

The entire row for an event in the list-view styles (useful if you want to add extra left padding, for example)

.list-event-title-usr

Event title on the Month,Week,Day List Views

.list-event-desc-usr

Event description on the Month,Week,Day List Views that include the Event description

.dayname-abbr-usr

The Day name abbreviations shown across the top of the Month Block views

.holiday

Holiday name text shown on all non-list style views

.lc_holiday_usr

Holiday name text shown on list style views

.pinitem_title

Event title on Pinboard-style view

.merged-usr

The names of any merged calendars (shown in the legend at the bottom of your calendar)

.category-usr

The names of any categories (shown in the legend at the bottom of your calendar)

<ac:structured-macro ac:name="unmigrated-wiki-markup" ac:schema-version="1" ac:macro-id="d4830933-d7fe-4808-8a4f-fc6193fcd7ac"><ac:plain-text-body><![CDATA[

.view_style_[mode]

The currently displayed style of the calendar. [Mode] values include M0 (Month Block), M1 (Month List), M6 (Month Pinboard), W0, W1, D0, D1, etc. You can use these modes to set custom colors, fonts, etc on specific calendar view styles. To properly use this class to style all the elements in the calendar for a specific view, you'll need to make sure to include an asterisk ( * ) as part of your CSS. For example:

<style>.view_style_M1 *{font-size:32px;}</style>

For more information on using this particular hook, please view the [Making your calendar responsive] page.

]]></ac:plain-text-body></ac:structured-macro>

.lc_mobile_usr

This class is only present on the Event Detail popup if the user is viewing an event from a mobile device (refer to Making your calendar responsive)

Handy Hint

Some members choose to add their custom CSS classes as HTML in their calendar's Title or Footer fields (found under General Options)
If you go this route, you'll need to put your CSS in between <style> and </style> tags. For example:

<style>.m-usr{font-size:32px;}</style>

Hiding elements on your calendar

You can also use the classes above to hide certain elements on your calendar. Here is an example of using custom CSS in your Calendar Title (under Options->General) to hide the Month Name on the month-block view:

<style>.mm-usr{display:none;}</style>
  • No labels