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>

DayPilot for ASP.NET, DayPilot for Java