Themes & CSS

Like RapidWeaver, RapidCal relies completely on Cascading Style Sheets (CSS). The goal is to fit the calendar as well as possible in the web site’s theme, so the styles defined by RapidCal merely contain positional information and avoid changing the theme-defined properties. There are a few exceptions to this, like the spot color that you must choose to match better the theme’s colors and increase the esthetical compatibility of the calendar.

You may go much further in your control of the calendar’s appearance, by redefining its styles or by adding extra properties. This requires a minimal understanding of CSS that you can easily reach by searching for examples and tutorials on the Internet.

This is absolutely not mandatory; you can skip this chapter entirely if you like the calendar’s standard layout. However, if you are interested, you will find here all the information you need to make it look completely different.

For example, to make the all-day events appear in bold:

.rapidCal .allDay {
    font-weight: bold;
}

This style should be entered in RapidCal’s Calendar Style pane, in the Custom CSS field.

All the styles used by RapidCal are listed below. You can override (replace) any property of any style, and add extra properties and extra styles, to make the calendar fit your theme perfectly.

.rapidCalWrapper	the main "div" around the whole data
.rapidCalHeader	the wrapper around the header, use "display: none;" to hide the title
.rapidCalHeader table	the header's table
.rapidCalHeader .monthTitle	the month and year title above the calendar
.rapidCalHeader .goPrev	the leftward arrow to previous month, on top left
.rapidCalHeader .goNext	the rightward arrow to next month, on top right
.rapidCal	the div around the main calendar
.rapidCal table	the calendar’s table
.rapidCal td	the table cells for days
.rapidCalToday	a special class for today's td
.rapidCalToday p	style for today's date
.rapidCal .dayHeader	the weekdays row
.rapidCal ul	the events list in the day cell
.rapidCal li	a single event
.rapidCal .allDay	all-day events
.hasTooltip	used if the event has a tooltip
.rapidCal .weekNumber	week number cells
.rapidCal .prevMonth	day cells belonging to previous month in the main calendar
.rapidCal .nextMonth	day cells belonging to next month in the main calendar

The spot color is used in three different places:
— as background-color for ".allDay",
— as text-shadow color for dates (in td),
— as color in ".weekNumber".
Each of these can be overridden separately in the relevant style.

These are the styles used in the mini-calendars area:

.rapidCalMini	the main "div" around the area
.rapidCalMiniWrapper	the wrapper is a div in vertical mode (in the sidebar), it is a table in horizontal mode
.rapidCalMini td	day cells in the mini-calendar
.rapidCalMiniEvent	day that contains an event in the mini-calendar
.rapidCalMiniToday	special style for today's cell in the mini-calendar
.rapidCalMiniPrevMonth	previous month mini-calendar wrapper
.rapidCalMiniNextMonth	next month mini-calendar wrapper
.rapidCalMiniMonthSelect	central area wrapper, use ".rapidCalMiniMonthSelect p" to override text properties.
.rapidCalMini a	links within the area
.rapidCalMiniPrevMonthDay	days in the mini-calendars that belong to previous month
.rapidCalMiniNextMonthDay	days in the mini-calendars that belong to next month

These are the styles used for the RSS/Webcal links:

.rapidCalRSS	the RSS link
.rapidCalWebcal	the webcal link

And finally the style for the calendar's description:

.rapidCalDescription	the description text when mini-calendars are in the sidebar
.rapidCalMiniMonthSelect .description	the description text when it appears along with the mini-calendars below the main calendar

Here’s an example of a more radical customization: you can add a small picture to the page using the page assets mechanism in RapidWeaver, then show that picture in the calendar background of each day. To do that, insert this in Custom CSS, changing the picture’s name appropriately:

.rapidCal td {
    background-image: url(assets/mypicture.png);
    background-repeat: no-repeat;
    background-position: left top;
}

... and you’re done! Set the repeat and position properties as appropriate.

There is no limit to what can be done with CSS tricks. If you obtain some interesting or spectacular result with RapidCal, let us know!