To customize some scheduler's element you should redefine the needed attributes of the related css class in <style> block of your page. The untouched attributes will take default values.
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="../../../codebase/touchui.css" type="text/css" media="screen" charset="utf-8"> <script src="../../../codebase/touchui.js" type="text/javascript" charset="utf-8"></script> </head> <body> <style> .dhx_schedulerbar{ background-color:#6699FF; } </style> .... </html>
In the example above we redefined only background color. All the other attributes defined in the '.dhx_schedulerbar' class took the default values.
Related sample: samples/07_mobile/09_custom_style.html
Bottom Toolbar | |
---|---|
.dhx_schedulerbar | the toolbar |
.dhx_el_button input | the 'Today' button |
.add .dhx_el_button input | the 'Add' button |
.dhx_schedulerbar .dhx_el_segmented | the tabbar |
.dhx_schedulerbar .dhx_el_segmented .segment_0 | the first tab |
.dhx_schedulerbar .dhx_el_segmented .selected.segment_0 | the first tab in the selected state |
.dhx_schedulerbar .dhx_el_segmented .segment_1 | the second tab |
.dhx_schedulerbar .dhx_el_segmented .selected.segment_1 | the second tab in the selected state |
.dhx_schedulerbar .dhx_el_segmented .segment_N | the last tab |
.dhx_schedulerbar .dhx_el_segmented .selected.segment_N | the last tab in the selected state |
![]() |
|
'List' view | |
.dhx_list_events_item | the items |
.dhx_list_events_item .dhx_day_title | the coloured label with the event's date |
.dhx_list_events_item .dhx_event_time | the container with the event's time |
.dhx_list_events_item .dhx_event_marker | the round marker displaying before the event's text |
.dhx_list_events_item .dhx_event_text | the container with the event's text |
![]() |
|
'Day' view | |
.dhx_dayevents_event_item | the container with an event |
.dhx_topbar | the top toolbar |
.dhx_dayevents_scale_item | a single row ( including hours' and minutes' cells) |
.dhx_dayevents_scale_top | the top part of the scale's item |
.dhx_dayevents_scale_bottom | the bottom part of the scale's item |
.dhx_dayevents_scale_hour | the container for the scale's hours |
.dhx_dayevents_scale_minute | the container for the scale's minutes |
.dhx_cal_prev_button div | the 'previous' icon on the top toolbar |
.dhx_cal_next_button div | the 'next' icon on the top toolbar |
.dhx_el_label | the container with the date on the toolbar |
.dhx_dayevents_scale_event | a single row ( without hours' and minutes' cells) |
![]() |
|
'Month' view | |
.dhx_cal_day_num | the cell with a day |
.dhx_cal_month | the top toolbar |
.dhx_cal_day_num.dhx_cal_selected_day | the container with the selected day |
.dhx_cal_day_num.dhx_cal_current_day | the container with the current date |
.dhx_cal_day_num.dhx_cal_current_day.dhx_cal_selected_day | the container with the current date in the selected state |
.dhx_cal_day_num .day_with_events | the days that have assigned events |
.dhx_cal_day_num.dhx_cal_selected_day .day_with_events | the days that have assigned events in the selected state |
.dhx_cal_prev_button div | the 'previous' icon on the top toolbar |
.dhx_cal_next_button div | the 'next' icon on the top toolbar |
.dhx_list_day_events_item | the list's items |
.dhx_list_day_events_item .dhx_event_time | the event's time |
.dhx_list_day_events_item .dhx_event_marker | the round item's marker |
.dhx_list_day_events_item .dhx_event_text | the event's text |
.dhx_el_label | the container with the date on the toolbar |
![]() |
|
Events preview screen | |
.selected_event | the container with an event |
.selected_event .event_title | the event's title |
.selected_event .event_text | the event's description |
.dhx_topbar.single_event | the top toolbar |
.dhx_el_button input | the 'Edit' button |
![]() |
|
Details form | |
.dhx_el_formbutton.delete .dhx_inp_form_button | the 'Delete' button |
.dhx_el_button.cancel input | the 'Cancel' button |
.invalid .dhx_inp_text_border | the style for an input with invalid data |
![]() |
|
Confirm window | |
.dhx_el_bigroundbutton input | the cancel button |
.dhx_el_bigbutton input | the confirm button |
![]() |