DayPilot Knowledge Base

AJAX Calendar/Scheduling Controls
DayPilot Pro (AJAX Calendar Control)
» DayPilot AJAX Calendar
DayPilot Pro (AJAX Monthly Calendar Control)
» DayPilot AJAX Monthly Calendar
DayPilot Pro (AJAX Scheduler Control)
» DayPilot AJAX Scheduler
DayPilot » Knowledge Base » List of CSS classes used in CssOnly mode (Scheduler)

List of CSS classes used in CssOnly mode (Scheduler)

Last revision: Jun 11, 2013

All the classes will be prefixed with the value of CssClassPrefix property. 



"_message" will result in "scheduler_green_message".

See also

Message Box


Message bar.


Close icon of the message bar.



Main event box


Inner event box.


Depending on the line on which the event is placed in a row (not a row number)

Examples: _event_line0, _event_line1


A selected event (in addition to _event).


 Duration bar background, full width. Inside _event.


Active area of the duration bar, depending on real duration or PercentComplete. Inside _event_bar.


Events that start outside of the visible area.


Events that end outside of the visible area.



Moving/resizing shadow marker.


Inside _shadow.



1px horizontal line between rows in the resource header.


Applied to every cell in the row header, including additional columns.


Applied to additional columns, in addition to _rowheader.


Additional columns, in addition to _rowheadercol and _rowheader.

Examples: _rowheadercol1, _rowheadercol2


Inside _rowheader.


Expand icon box. Inside _rowheader and _rowheader_inner.


Collapse icon box. Inside _rowheader and _rowheader_inner.


No children icon box. Inside _rowheader and _rowheader_inner.



The topmost div.


Vertical 1px line between resources and the time part.


Horizontal 1px line between upper-left corner and resources.

Upper-Left Corner Cell


Upper-left corner box.


Inside _corner.

Time Grid


Main scrollable area with time cells.


 Grid with time cells, inside _scrollable.


Loading label.


 1px horizontal line between time cells.


1px vertical line between time cells.


1px vertical line placed over _matrix_vertical_line if there is a time break at this point - a hidden column for ShowNonBusiness=false.

Time Cells


Time cell. Only in full rendering mode (see _cellcolumn below).


If the cell is in a parent resource; in addition to _cell.


Used when the optimized cell rendering is applied - if all the cells in a column have the same properties they are rendered using a single div marked with this class.

Time Header


Time header group cell, there are always 1+ time header group rows, depending on TimeHeaders property.


Inside _timeheadergroup.


Cells in the last row of the time header, there is always 1 time header col group with one cell per CellDuration unit.


Inside _timeheadercol.


List of CSS classes used in CssOnly mode (Calendar)
List of CSS classes used in CssOnly mode (Month)
Sample Scheduler CSS Theme
List of CSS classes used in CssOnly mode (Navigator)