Scott’s Blog

Introduction

The purpose of this document is to describe the options available to the designer when customizing the calendar in a Community Server 2.0 blog. Because the calendar used by Community Server is based on the stock ASP.NET Calendar control, designers will be constrained to use the styles made available by the control and any colors or graphics that can be applied to the web user control the calendar is hosted on.

There are three categories of property for the ASP.NET Calendar control that the designer will be concerned with: appearance, layout, and style. The following sections will describe in detail each of the properties within those categories.

Appearance Properties

BackColor—can be set to any decimal or hexadecimal color code. It controls the color of the area beginning just beneath the month and year to the bottom of the control.

BorderColor—accepts the same values as BackColor. It controls the color of the border around the entire control.

BorderStyle—can be set to one of the following values: NotSet, None, Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, or Outset.

BorderWidth—width of the border around the calendar control, generally measured in pixels (e.g., “5px”)

CssClass—when set to the name of a class in a linked CSS file, it applies the attributes of the class to the entire Calendar control. It can serve as a shortcut that sets multiple properties all at once.

DayNameFormat—can be set to one of the following values:

Full—displays the full name of the day above the days of each month

Short—displays the 3-letter abbreviation of each day above the days of each month

FirstLetter—displays the first letter of each day above the days of each month

FirstTwoLetters—displays the 2-letter abbreviation of each day about the days of each month

FirstDayOfWeek—can be set to any of the days of the week. This determines which day appears first in the calendar. By default, the first day is Sunday

Font-Bold—accepts True or False; determines whether the text in the control appears bold

Font-Italic—accepts True or False; determines whether the text in the control appears bold

Font-Names—accepts a comma-delimited list of fonts to display the text of the control in

Font-Overline– accepts True or False; determines whether the text in the control appears with a line over it

Font-Size—size of the text used within the control, generally measured in points (e.g., “12pt”)

Font-Strikeout– accepts True or False; determines whether the text in the control appears with a line through it

Font-Underline– accepts True or False; determines whether the text in the control appears with a line under it

ForeColor—accepts the same values as BackColor. It controls the color of the text within the control.

NextMonthText—text for the “next month” button of the control. By default, the value is > (“>”)

NextPrevFormat—format for month navigation buttons.

CustomText–the format of the month navigation buttons will match the values of NextMonthText and PrevMonthText.

ShortMonth–the 3-letter abbreviation of the previous month and next month will appear as month navigation buttons

FullMonth—the full name of the previous month and next month will appear as month navigation buttons

PrevMonthText—text for the “previous month” button of the control. By default, the value is < (“< ”)

ShowDayHeader—accepts True or False; determines whether the days of the week appear in the control

ShowGridLines—accepts True or False; determines whether the calendar elements are displayed in a grid

ShowNextPrevMonth—accepts True or False; determines whether the month navigation buttons display in the control. This will normally be True.

ShowTitle—accepts True or False; determines whether the month, year, and month navigation buttons display in the control. This will normally be True.

TitleFormat—accepts Month or MonthYear; determines whether just the month, or the month and year display in the calendar title

Layout Properties

The Layout category contains just four properties: CellPadding, CellSpacing, Height, & Width.

Height, Width—sets dimensions of the calendar control. An alternative to setting these properties individually is to set height and width in a CSS class and set the value of the appearance property CssClass to that class name.

CellPadding—sets the amount of space between the edge of the table cell and its contents

CellSpacing—sets the amount of space between table cells in the control

Style Properties

Here are the nine styles that can be modified by the designer to control the look-and-feel of a calendar: DayHeaderStyle, DayStyle, NextPrevStyle, OtherMonthDayStyle, SelectedDayStyle, SelectorStyle, TitleStyle, TodayDayStyle, and WeekendDayStyle.

Each style has the following sub-properties:

• BackColor
• BorderColor
• BorderWidth
• CssClass
• Font

• Bold
• Italic
• Names
• Overline
• Size
• Strikeout
• Underline

ForeColor

Height

HorizontalAlign

VerticalAlign

Width

Wrap

Most definitions of the sub-properties appeared earlier in this document. The exceptions are described below:

HorizontalAlign—sets the horizontal alignment of cell content. Valid values are: NotSet, Left, Center, Right, and Justify.

VerticalAlign—sets the vertical alignment of cell content. Valid values are: NotSet, Top, Middle, and Bottom

Wrap—accepts True or False; determines whether the cell content should wrap to the next line or not.

DayHeaderStyle applies only to the row of the control containing the days of the week.

DayStyle applies to the rows containing days of the month.

NextPrevStyle applies to the month navigation buttons.

OtherMonthDayStyle applies to the days from adjacent months that display at the same time as the current month.

SelectedDayStyle applies to the currently selected days in the calendar. This depends on the setting of a behavior attribute called SelectionMode that is beyond the scope of this document. It is unlikely that this style will need to be modified from its default values.

SelectorStyle applies to the week and month selector column. Like SelectedDayStyle, this depends on the setting of SelectionMode, and is unlikely to need modification.

TitleStyle applies to the title of the calendar control.

TodayDayStyle applies to the current date. If there is a requirement that the current date on a calendar look different than the rest of the days, this is the style you would modify.

WeekendDayStyle applies to the Saturdays and Sundays that appear in the calendar. If the look and feel of those days needs to be different than the rest of the calendar, this is the style that would be modified.

Recommendation

To customize calendars for use with Community Server, add a folder to the WebCalendar project containing a copy of Default.aspx and style.css. With those two files as the starting point, all the customizations needed for a particular Community Server 2.0 project can be made. The resulting HTML can be added to the appropriate web user control in Community Server along with the style sheet(s).