Scheduler: 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="scheduler_"
Class names:
- scheduler_event
- scheduler_header
- ...
Class names
The following class names are prefixed with a name defined in CssClassPrefix:
- event (event box)
- cellbackground (time cell)
- header (header cell)
Since DayPilot 5.5, the header class is split into several more specific classes:
- corner (upper-left corner cell)
- timeheadergroup (first row of the column header)
- timeheadercol (second row of the column header)
- rowheader (row/resource header)
Default values
The built-in DayPilot Scheduler 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">
.scheduler_event {
background-color: lightyellow;
color: #808080;
font-family: Tahoma;
font-size: 8pt;
}
.scheduler_silver_timeheadergroup, .scheduler_silver_corner, .scheduler_silver_timeheadercol
{
background-image: url(Media/blend20light.gif);
background-repeat: repeat-x;
}
.scheduler_silver_rowheader
{
background-image: url(Media/blendleft45.gif);
background-repeat: repeat-y;
}
</style>DayPilot Scheduler:
<DayPilot:DayPilotScheduler ID="DayPilotScheduler1" runat="server" DataSourceID="XmlDataSource1"
DataTextField="name" DataValueField="id" StartDate="2007-01-01" DataStartField="Start"
DataEndField="End" Days="7" Width="100%" EventBackColor="" EventFontFamily="" HourNameBackColor=""
EventFontSize="" HeaderFontFamily="" HeaderFontSize="" NonBusinessBackColor="" BackColor=""
HourBorderColor="" HourHalfBorderColor="" CssClassPrefix="scheduler_">
</DayPilot:DayPilotScheduler>