Issues with keyboard navigation and custom themes

Asked by Anonymous
5 years ago.

Hi,

I found the following two issues when I have tried the keyboard navigation described in this tutorial (https://demos.daypilot.org/javascript-scheduler-keyboard-navigation/) with a custom theme:

1. The border of the CSS class *_cell_focus doesn't appear around events
2. The top border of the CSS class *_cell_focus doesn't appear around the cells located directly below the timeline

I created the theme using the "DayPilot Theme Designer" (https://themes.daypilot.org/scheduler/create) without changing anything in the generated CSS-file.

With the default theme I don't have these issues.

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

The way the focused element (cell/event) is highlighted is not final and it may change in the final release - that's why the Theme Designer doesn't include support for the keyboard focus yet.

The built-in theme includes the following CSS - you can copy that to your custom theme as a workaround (don't forget to change the selector names):

.scheduler_default_event_focus { outline: red 2px solid; z-index: 100; opacity: 0.5; }
.scheduler_default_cell_focus { box-sizing: border-box; border: red 2px solid; z-index: 100; opacity: 0.5; }
.scheduler_default_cell_focus.scheduler_default_cell_focus_top { border-top: 4px solid red; }
.scheduler_default_cell_focus.scheduler_default_cell_focus_bottom { border-bottom: 4px solid red; }

Comment posted by Anonymous
5 years ago.

Ok, thank you. I added the CSS classes to my theme. It solved my first issue. The second issue still appears. It would be great if you can provide me a solution for it.

Comment posted by Dan Letecky [DayPilot]
5 years ago.

That might happen because you define custom CSS with border for that cell. You might need to add !important to the .scheduler_default_cell_focus {} styles from the above snippet.

That's why the CSS is not final yet - it interferes with the existing styles too much. In the final release, the highlight will most likely be moved to a special layer above events and cells so it doesn't change the cell/event appearance.

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