Changing scheduler settings in CSS

Asked by Vincent
3 years ago.

I am currently trying to change the javascript scheduler's grid color and change the margin within events for the duration bar, and neither of these seem to have working css settings.

For the event duration bar margin, I was expecting the following to do the trick(as per the css designer):

.scheduler_default_event_bar
{
top: 1px;
left: 1px;
right: 1px;
}

but this did not accomplish anything(the duration bar still overlaps with the event border)

For the grid's color, I was expecting the following to do the trick(as per the css designer):

.scheduler_default_matrix_vertical_line,
.scheduler_default_matrix_horizontal_line
{
background-color: #000000;
}

but the grid's color remains the same.

What am I missing? Are there other calls intervening with these settings?

how-to javascript

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

You need to use more specific selectors, e.g.

#dp .scheduler_default_matrix_vertical_line,
#dp .scheduler_default_matrix_horizontal_line { 
    background-color: #000000;
}

or add "!important" to the style:

.scheduler_default_matrix_vertical_line,
.scheduler_default_matrix_horizontal_line
{
  background-color: #000000 !important;
}

Otherwise the styles defined in the theme will have higher priority and your modifications won't override them.

I also recommend using the element inspector from browser developer tools (Ctrl+Shift+C or Cmd+Option+C) to see which styles are defined and which of them are actually applied.

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

Changing scheduler settings in CSS

Products

Learn

Get Support

DayPilot Pro