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-calheaderThis 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-navheaderPurple: .ms-cal-nav-buttonsltrRed: .ms-cal-navYellow: .ms-cal-navselectedBut 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, useSPAN.ms-cal-nav A

To get the expand all and collapse all you can useA.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.gifNext button - http://server/_layouts/images/nextbuttonltr.gifDay Icon - http://server/_layouts/images/day.gifWeek Icon - http://server/_layouts/images/week.gifMonth 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 ViewThe 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 DIVDon’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 viewWithout 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 rightIn 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 useTD.ms-cal-enoworkhour DIV.ms-cal-dayhourF for the top left cellTD.ms-cal-enoworkhour DIV.ms-cal-dayhalfhourF for the bottom left cellTD.ms-cal-enoworkhour DIV.ms-cal-dayhour for the top right two cellsTD.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-workhourhourTop half of hour label block

.ms-cal-workhourhourover is the hover state

.ms-cal-workhourhalfhourBottom 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-weekedgeThis was also used in the month cal and used in week cal for the left edge of the calendar

The Week ViewHaving 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 areToday : .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 dataOnce 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

DayTo 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 imageYou 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, useA.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 asTABLE.ms-cal-dayitem A.ms-cal-dayitem NOBROrTABLE.ms-cal-dayitem A.ms-cal-dayitem BFor the different components.

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

MonthThe 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 likeTD.ms-cal-monthitem A{color:red;}.To get at the time, you would useTD.ms-cal-monthitem A BBecause 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 purpleTD.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;}