Modifying the header row highlight style when crosshairType="Header"

Asked by Jamie
8 years ago.

Hi there,

If crosshairType is configured with "Header", all row header columns are highlighted even if more than one is configured, however only the lowest column header row is highlighted (we have Month / Day / Date vertically stacked).

With our colour scheme the grey column header row highlight isn't that clear. Is there a way to extend the highlight to the row above, or to change the colour of the highlight?

Thanks in advance

how-to javascript

Answer posted by Dan Letecky [DayPilot]
8 years ago.

You can change the crosshair appearance using CSS. The default built-in theme ("scheduler_default") uses the following CSS:

.scheduler_default_crosshair_vertical, .scheduler_default_crosshair_horizontal, .scheduler_default_crosshair_left, .scheduler_default_crosshair_top {
  background-color: gray; opacity: 0.2; filter: alpha(opacity=20)
}

For crosshairType="Header" you need to change .scheduler_default_crosshair_left and .scheduler_default_crosshair_top.

You can override the default theme by adding a more specific selector, e.g. using the Scheduler placeholder id:

#dp .scheduler_default_crosshair_left, #dp .scheduler_default_crosshair_top {
  color: red;
}

Another option is to generate a new CSS them using the Theme Designer and modify the output CSS:
https://themes.daypilot.org/

This question is more than 1 month old and has been closed. Please create a new question if you have anything to add.