CSS Class Styling

It is possible to set selected style properties using CSS class rather than by control properties: 

Usage

Prefix

The classes use the prefix defined in CssClassPrefix property. Example:

CssClassPrefix="calendar_"

Class names:

• calendar_event
• calendar_corner
• ...

Class names

The following class names are prefixed with a name defined in CssClassPrefix:

• alldayevent (all-day event box)
• event (event box)
• cellbackground (time cell)
• colheader (column header cell)
• alldayheader (all-day header cell)
• corner (upper-left corner cell)
• cornerright (upper-right corner cell, above the vertical scrollbar)
• hourhalfcellborder (time cell border splitting cells inside an hour, only border-bottom value allowed)
• hourcellborder (time cell border splitting hours, only border-bottom value allowed)
• rowheader (row header cell)

Default values

The built-in DayPilot Calendar appearance properties override the CSS styles (they are specified using style attribute). You need to unset the default values in order to enable the CSS classes to prevail:

HeaderFontFamily=""
EventFontFamily=""
...

Declaration example:

Style:

<style type="text/css">
/* calendar silver theme */
.calendar_silver_colheader
{
 background-image: url(Media/calendar_silver_top21.gif);
 background-repeat: repeat-x;
 background-color: #EAEAEA;
}
.calendar_silver_corner 
{
 background-image: url(Media/calendar_silver_corner20.gif);
 background-repeat: repeat-x;
 background-color: #EAEAEA;
}
.calendar_silver_rowheader 
{
 background-image: url(Media/calendar_silver_left45.gif);
 background-repeat: repeat-y;
 background-color: #CFCFCF;
}
.calendar_silver_cornerright 
{
 background-image: url(Media/calendar_silver_right17.gif);
 background-repeat: repeat-y;
 background-color: #CFCFCF;
}
.calendar_silver_alldayheader 
{
 background-color: #EAEAEA;
}
.calendar_silver_alldayevent 
{
 background-image: url(Media/calendar_silver_top21.gif);
 background-repeat: repeat-x;
 background-color: #CFCFCF;
}
</style>

DayPilot Calendar:

<daypilot:daypilotcalendar id="DayPilotCalendar1" runat="server" 
                    ...
                    CssClassPrefix="calendar_silver_"
                    ></daypilot:daypilotcalendar>