Styling

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

CSS classes and the related elements

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 inputthe '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