skip to main content
Programmer's documentation > Developing with the JViews Gantt SDK > Styling > Styling Gantt and Schedule chart components
 
Styling Gantt and Schedule chart components
Describes how style sheets can be used to customize the appearance of the Gantt and Schedule chart components and their subcomponents. These chart components are explained in more detail in The Gantt beans.
The following table lists the CSS elements that are defined to reference the different parts of the chart components:
The following table shows the Gantt and Schedule chart CSS elements.
CSS Model Object Type and ID
Description
Target object class
Bean properties
Type
chart
The Gantt or Schedule chart component
constraintLayerVisible
boolean
displayingConstraints
boolean
dividerLocation
int
dividerOpaqueMove
boolean
dividerSize
int
ganttSheetBackground
Color
ganttSheetToolTipsEnabled
boolean
ganttSheetVisible
boolean
horizontalScrollBarVisible
boolean
insideBorder
Border
maxVisibleTime
Date
minVisibleTime
Date
mouseWheelEnabled
boolean
mouseWheelPreferredOrientation
int
multipleRowActivityGraphicsEnabled
boolean
rootRowVisible
boolean
rowHeight
int
tableBackground
Color
tableFont
Font
tableForeground
Color
tableGridColor
Color
tableHeaderBackground
Color
tableHeaderFont
Font
tableHeaderForeground
Color
tableVisible
boolean
 
 
 
timeScale
timeScaleBackground
Color
timeScaleFont
Font
timeScaleForeground
Color
verticalPosition
int
verticalScrollBarPolicy
int
verticalScrollMode
int
visibleDuration
visibleIntervalAnimationSteps
int
visibleTime
Date
activityLayout
reservationCacheLoadFactor
float
reservationCacheLoadThreshosld
float
reservationCachingEnabled
boolean
sheet
The Gantt sheet
antialiasing
boolean
background
Color
backgroundPatternLocation
URL
defaultGhostColor
Color
defaultXORColor
Color
displayingConstraints
boolean
horizontalGrid
hoverHighlightingMode
int
multipleRowActivityGraphicsEnabled
boolean
parentActivityEditable
boolean
parentActivityMovable
boolean
refreshMilestoneRenderer
boolean
refreshParentActivityRenderer
boolean
toolTipsEnabled
boolean
verticalGrid
IlvGanttGridRenderer
horizontalGrid
The horizontal grid of the Gantt sheet
evenRowsBackground
Color
filled
boolean
foreground
Color
oddRowsBackground
Color
verticalGrid
The vertical grid of the Gantt sheet
See the note after this table.
foreground
Color
printWeekendsOpaque
boolean
weekendColor
Color
weekendDisplayed
boolean
timeScale
The time scale
background
Color
font
Font
foreground
Color
opaque
boolean
table
The Gantt table
background
Color
columnMargin
int
columns
String
font
Font
foreground
Color
gridColor
Color
headerBackground
Color
headerFont
Font
headerForeground
Color
showsRootHandles
boolean
NOTE >> By default, the verticalGrid CSS model object type implements the IlvWeekendGrid subclass of IlvVerticalGanttGrid. If you replace IlvWeekendGrid with your own subclass, the CSS will return the properties of your own subclass.
Similarly, the horizontalGrid CSS model object type implements the class IlvHorizontalGanttGrid. If you replace IlvHorizontalGanttGrid with your own implementation, the CSS will return the properties of your class.
These CSS model objects can be used to modify the bean properties of the corresponding target object. The following example shows how you can control the row height of the chart and the colors and fonts of the table and the time scale.
chart {
  rowHeight: 25;
}
 
table {
  headerFont: arial,bold,14;
  headerBackground: linen;
}
 
timeScale {
  font: arial,bold,14;
  background: linen;
}
The CSS ID is the same as the CSS model object type for each of the chart components. Therefore, the following CSS rules are equivalent to the ones above. Here, the ID of each chart component, instead of its type, is specified as the selector for each rule:
#chart {
  rowHeight: 25;
}
 
#table {
  headerFont: arial,bold,14;
  headerBackground: linen;
}
 
#timeScale {
  font: arial,bold,14;
  background: linen;
}
NOTE The chart components have no assigned CSS classes or pseudo-classes.
Copyright © 2018, Rogue Wave Software, Inc. All Rights Reserved.