Styling the SharePoint calendar

The calendar has a lot of built in functionality, which ends up with javascript,
images, etc. coming out of the SharePoint application itself. Because of that, you
lose a lot of control over the visual, but you can still do a lot with colors and fonts,
which is where you want to spend most of your effort. The trick is to convince your
designer or design team of that fact. Given that, most of the style changes you
make will probably deal with backgrounds and borders, possibly margins. Some
have background-image set and some do not. For some you may also work with
fonts and colors. Have fun with it, though and use your imagination. There is a lot
of flexibility within the constraints that do exist.

One final note, while this is pretty comprehensive and detailed, I did leave out a few
trick you can apply to text within some of the items. Get a copy of the IE Developer
Toolbar and dig around if there are other thing you are required to change and use
some of the more advanced techniques I show toward the end for styling text within
the appointments as necessary.
The top bar
.ms-calheader
This is the top bar. Note that in edit mode, it will always be white, so don’t let that
fool you.

On the top bar, there are actually several other styles yo may want to work with,
shown below in hideous colors to make them stand out.
The styled blocks are as follows:
Blue: .ms-cal-navheader
Purple: .ms-cal-nav-buttonsltr
Red: .ms-cal-nav
Yellow: .ms-cal-navselected
But note that these are only for the containing objects.

To style the text inside the containing objects, you will need to use some more
advanced style tricks.

To get at the text of the selected view (Day, Month, Week) you can use the
technique
SPAN.ms-cal-navselected A

To get the text of the unselected views, use

SPAN.ms-cal-nav A

To get the expand all and collapse all you can use
A.ms-cal-nav NOBR

The text of the current day/ week/month is accessed simply with the same class
definition you would use for that piece of the background
.ms-cal-navheader

Note there is a very small TD in between the blue and purple that doesn’t have a
class or ID to style.

The graphics are as follows:

Previous button - http://server/_layouts/images/prevbuttonltr.gif
Next button - http://server/_layouts/images/nextbuttonltr.gif
Day Icon - http://server/_layouts/images/day.gif
Week Icon - http://server/_layouts/images/week.gif
Month Icon - http://server/_layouts/images/month.gif

Week Empty
.ms-cal-weekempty –This style is used for some blank space on the month and
week calendar views. The first two show its placement on the month view and the
third shows its use on the week view. IT doesn’t appear on the day view. On the
month view it appears above and to the left of each week box at the extreme left of
the week rows. On the week view, it only appears in the one spot shown.

The month View

The first four for the month view are related (.ms-cal-week, .ms-cal-weekB,
and .ms-cal-weekbox, ms-cal-selected)
They all style the box to the left of the weeks on the calendar. ms-cal -week and
cal-weekB do the whole box, with ms-cal-weekB only doing the bottom row and ms-
cal -week doing the rest.
ms-cal.weekbox styles a DIV that sits inside and is smaller than the TH components
style by ms-cal-week and ms-cal-weekB, but only on the current week. The effect
is to have top and bottom boxes on the current week that can be styled differently
than the other weeks, if you give ms-cal- weekbox a different style than ms-cal-
week and ms-cal-weekB . if you don’t care about the outer boxes on the current
week, don’t bother with ms-cal-weekbox.
Another thing to note, is that by default, ms-cal-weekbox doesn’t have a
background-image so if you are going without images, you don’t have to set it to
none, like you do for the ms-cal-week and ms-cal-weekbox.
The TH that holds .ms-cal-week provides the mouse over functionality and can be
used to change the style when you mouse over the outside box. Remember, though
that if you use ms-week-box only the current week will be impacted by ms-cal-
weekselected and only the top and bottom boxes at that.
There is also an image inside the ms-cal-weekbox you can use, named ms-cal-
blankimage. Its really just there though to give mouse functionality to the week box
(mouseover and click, etc) so there isn’t much you can do with it.
.ms-cal-week

.ms-cal-weekbox

div inside TH of ms-cal-week.

.ms-cal-weekB
same as .ms-cal-week but for last row of days.

.ms-cal-weekday

There is also a TH with a style of ms-cal-weekname that wraps the DIV with .ms-cal-
weekday, but it doesn’t appear to have any impact
The next four style the day label over each day block

.ms-cal-topday

day label and header

.ms-cal-topdayover is the mouseover state of the day label and header

.ms-cal-topdayfocus is the selected day (if not today)
.ms-cal-topdayfocusover is the hover state of .ms-cal-topdayfocus

To get at the text of these labels, though you will have to use an approach like
.ms-cal-topdayfocus DIV A
{
color:blue;
font-weight:normal;
}
Because the text is inside an Anchor tag (<A>) wrapped in a DIV
Don’t forget to get the over class, too with your font changes.
Next come the styles that impact the area where appointments are displayed. (if
there is no appointment in the block).
Each block is made up of multiple cells for holding appointments. You get three to
begin with, if you go over three another row is added with a more link. Clicking that
adds rows to show the rest of the appointments and a collapse link. There is also a
bottom row that is always blank.
Basically, for each row of days, there are multiple rows to hold appointments
(depending if you have expanded or collapsed the appointments over 3). So you
have one big row with many rows inside it.
In each of these rows there is a TD that uses one of the following styles:

.ms-cal-nodataMid is used for any row but the bottom row, that is a day from a
month other than the current month. For example stray days from the previous
month that are in the first week of the calendar or the first days of the next month
in the last row of the calendar.

.ms-cal-workitem is used for all the days of the week, except the currently
selected day non workdays (typically Saturday and Sunday) and the stray days
mentioned above. This covers most of your days and is typically any day of the
month except Saturday or Sunday or the day that is currently selected.

.ms-cal-todayitem The cells in the currently selected day use this style. The
currently selected day doesn’t have to be today, but the last one selected on the
day calendar or on a link that got you to the calendar.
.ms-cal-noworkitem Cells for the days marked as not work days (typically
Saturday and Sunday but uniquely defined for each Site Collection in the Site
Collection
(http://server/_layouts/regionalsetng.aspx )

Finally, for each of the appointment day cells mentioned above, there is a matching
cell at the bottom row that will always be blank (as far as I have been able to tell).
These are as follows:
.ms-cal-nodataBtm2 – matches .ms-cal-nodataMid

Bottom cell for all the non month days

.ms-cal-workitem2B – matches ms-cal-workitem

bottom cell of work day

.ms-cal-todayitem2B matches .ms-cal-todayitem

bottom cell for today

.ms-cal-noworkitem2B matches .ms-cal-noworkitem

bottom row for non work days

The Day view
Without any appointments showing, days on the day view are broken into hours
where each hour has 6 main cells, in two rows of three. The top row of three are for
on the hour and the bottom three are for the half hour.
All of these cells are styled by one of the following
.ms-cal-eworkhour – This style impact all of the cells in the work day (as defined
in the site collection administration). Out of the box these are all the white cells.
.ms-cal-enoworkhour – This style impact the right two cells for on the hour
(remember these are the two at the right) after the work day (as defined in the site
collection administration). It does not impact any before the work day cells.

.ms-cal-dayhour This style impacts the top two right cells of each hour cell, the
two on the right
.ms-cal-dayhalfhour This style impacts the bottom two right cells of each hour
cell, the two on the right
In the graphic below, .ms-cal-dayhour is beige and.ms-cal-dayhalfhour is green
(darkseagreen to be precise). Note that the last two work hours of the day are
impacted but the first hour is not. Don’t ask.
Setting either of these overrides any settings on ms-cal-eworkhour (and ms-cal-
enoworkhour).

On the left side of the grid, the styles are .ms-cal-dayhourF and .ms-cal-
dayhalfhourF
Notice that only ms-cal-dayhour impacts the after hours cells. .ms-cal-dayhalfhour
doesn’t impact the after hours cells and neither impact the before hour cells. The
same is true for ms-cal-dayhourF and ms-cal-dayhalfhourF. You can add the !
important attribute to the style and it will then impact all of the before and after
hours as well as work day. My guess is that the behavior of ms-cal-dayhour on the
after hour cells was an oversight.

Another option is to do the following:

To style the after hours cells use
TD.ms-cal-enoworkhour DIV.ms-cal-dayhourF for the top left cell
TD.ms-cal-enoworkhour DIV.ms-cal-dayhalfhourF for the bottom left cell
TD.ms-cal-enoworkhour DIV.ms-cal-dayhour for the top right two cells
TD.ms-cal-enoworkhour DIV.ms-cal-dayhalfhour for the bottom right two cells

To style the before hours cells, change the TD.ms-cal-enoworkhour to TD.ms-cal-

enoworkhourF

The reason this works is that the cells are actually a TD styled with ms-cal-
enoworkhour or ms-cal-enoworkhourF wrapped around a DIV styled with ms-cal-
dayhour, ms-cal-dayhourF, ms-cal-dayhalfhour, or ms-cal-dayhourF. So what you
are telling the browser is that when you find a div with that class inside a TD with
the named class, use the styles specified.

The last two things on these appt cells is the very bottom row and the very top row.
The very bottom row uses the class ms-cal-enoworkhourB for the TD’s and the
very top row uses the class ms-cal-enoworkhourF, but remember you have to do
the enclosure trick above to get at just these.

Reviewing then, here is what we have for the appointment cells:

Top right cells (two cells) of a day’s hour view during work hours

.ms-cal-dayhour (Right top two cells of day’s hour view for work hours)

.ms-cal-dayhourF (Left top cell of day’s hour view for work hours)
.ms-cal-dayhalfhour (right side, bottom two cells)

.ms-cal-dayhalfhourF (bottom left cell)

.ms-cal-eworkhour is a containing TD that wraps each of the above DIV’s for work
hour cells

.ms-cal-enoworkhour is a containing TD that wraps each of the above DIV’s for

non work hour cells except the very top row (.ms-cal-enoworkhourF) and the very
bottom row (.ms-cal-enoworkhourB).

Here is a graphic that shows the structure of all but the top and bottom rows: The
yellow are non-work hours (before the work day) and the white the following couple
hours of work day.
The only other things to style on the day calendar are the hour labels and an edge
piece to the left of those labels.
The label block is divided into two pieces: The hour piece that has the number of
the hour and the half our piece below it that is empty. Each of these has a
corresponding hove state class.
.ms-cal-workhourhour
Top half of hour label block

.ms-cal-workhourhourover is the hover state

.ms-cal-workhourhalfhour
Bottom half of hour label block

.ms-cal-workhourhalfhourover is the hover state

But as with the appointment cells, there are different classes for the first and last
hours of the day.
.ms-cal-workhourF (and .ms-cal-workhourFover for the hover state)
Is for the top half of the label for first hour on the calendar
.ms-cal-workhourBhalfhour (and .ms-cal-workhourBhalfhourover for the
hover state)
Is for the bottom half of the label for last hour on the calendar

To the left of each day label is a very small spacer styled with
.ms-cal-weekedge
This was also used in the month cal and used in week cal for the left edge of the
calendar
The Week View
Having gone this far, now, the week calendar should be almost done.

Each of the appointment cells on the week calendar use the same classes as the
day calendar. There are 6 cells per hour and 3 on the hour and 3 on the half hour.
Please refer to the first part of the day calendar for details on these.

The left column that labels the hours , also uses the same styles as the day
calendar, described above.

The name labels use four different classes plus corresponding hover stat classes.

The first three are shown below

In the example above, Wednesday is a normal day, Thursday the 4th is the current
day and Friday is the selected day.

Those styles are

Today : .ms-cal-wtopday-today (Hover state is .ms-cal-wtopday-todayover)

Currently selected day: .ms-cal-wtopdayfocus (hover state is .ms-cal-

wtopdayfocusover)

The rest of the days except the left most day (Sunday) use the classes .ms-cal-
wtopday and .ms-cal-wtopdayover (hover state).

Sunday (the left most day) uses the classes .ms-cal-wtopdayL and .ms-cal-
wtopdayLover for the hover state.

As mentioned, before, the class .ms-cal-weekempty shows up in the one tiny

block in the top left corner of the calendar, below the header.
Also, the class .ms-cal-weekedge is used as a spacer down the entire left side of
the calendar, shown below in the darkseagreen
Styles for the appointment data
Once an appointment is added and displayed on the calendar one of 3 styles will be
used, depending on the view (month, week or day).
Month
.ms-cal-monthitem

Day
To style the Day items, there are two items you have to work with.

First, there is a Table with the class .ms-cal-tdayitem that simply has a
background image
You can either point to a different image or turn the image off. If you turn the image
off (background-image:none;), you can use a background-color, but you will need to
add the !Important attribute to have it show up. If you want to style the border or
set most other attributes, you do not need the !important attribute.

Second, there is an anchor tag (<A>) that wraps the appointment text.
That tag has the class .ms-cal-dayitem.

In the appointment, the hour is normal text and the appointment title is bold. You
can change the appt title with something like this, which says to style any B tags
that are within Anchor tags of class ms-cal-dayitem with normal text weight and the
color red.
A.ms-cal-dayitem B
{
font-weight:normal;
}
To change the time style, use
A.ms-cal-dayitem NOBR
{
font-weight:normal;
}
As the text of the time is wrapped within a NOBR tag. Note that changing the
appointment text impacts the appointment on all 3 views (month, day and week),
unless you add TABLE.ms-cal-dayitem to the beginning of your style definition, such
as
TABLE.ms-cal-dayitem A.ms-cal-dayitem NOBR
Or
TABLE.ms-cal-dayitem A.ms-cal-dayitem B
For the different components.

Week
The week appointment entries are structured the same as the day. There is a
containing table with the class .ms-cal-tweekitem instead of the class .ms-cal-
dayitem, as was the case with the Day appointments.
Month
The month is a little different than the day or week. First the class is .ms-cal-
monthitem. The second change is that this class is applied to a TD tag rather than
a table.
So to change the appointment title, you have to use something like
TD.ms-cal-monthitem A
{
color:red;
}.
To get at the time, you would use
TD.ms-cal-monthitem A B
Because the time is inside a Bold tag <B> inside the Anchor tag and the title, while
it shows up bold is not.

The following two class definitions while very ugly, will make the time Bold and red
and the title normal and purple
TD.ms-cal-monthitem A
{
color:purple;
font-weight:normal;
}
TD.ms-cal-monthitem A B
{
color:red;
font-weight:bold;
}
The date picker styles

The final task for styling the calendar is to style the date picker that is displayed at
the top left, above the quick launch.

.ms-picker-header
{
background-color:#e5e5e5;
background-image:none;
}

.ms-picker-monthcenter
{
background-color:#f5f5f5 !important;
background-image:none;
border-left-color:#e5e5e5 !important;
border-right-color:#e5e5e5 !important;
border-top-color:#e5e5e5 !important;
border-bottom-color:#e5e5e5 !important;
}

.ms-picker-monthcenterOn
{
background-color:#e8dfb7 !important;
background-image:none !important;
border-left-color:#e5e5e5 !important;
border-right-color:#e5e5e5 !important;
border-top-color:#e5e5e5 !important;
border-bottom-color:#e5e5e5 !important;
}

.ms-picker-footer
{
background-color:#f5f5f5;
}