Skins

There are several predefined skins:

  1. Terrace (default)
  2. Material
  3. Flat
  4. Contrast Black
  5. Contrast White

Each skin requires including its specific CSS file.

'Terrace' skin

To apply the default skin, include the default CSS file:

  • dhtmlxscheduler.css

terrace_skin.png

Related sample:  Terrace skin

'Material' skin

To apply the 'Material' skin, include the CSS file as in:

  • dhtmlxscheduler_material.css

Related sample:  Material skin

'Flat' skin

To apply the 'Flat' skin, include the CSS file as in:

  • dhtmlxscheduler_flat.css

flat_skin.png

Related sample:  Flat skin

'Contrast Black' skin

To apply the 'Contrast Black' skin, include the CSS file as in:

  • dhtmlxscheduler_contrast_black.css

contrast_black_skin

Related sample:  High contrast theme - Black

'Contrast White' skin

To apply the 'Contrast White' skin, include the CSS file as in:

  • dhtmlxscheduler_contrast_white.css

contrast_white_skin

Related sample:  High contrast theme - White

Skin Detection

By default, the scheduler autodetects the skin by the name of a CSS file in use.
If you need to rename the CSS file, you can force correct skin usage by adding the following code line:

scheduler.skin = "flat";  
// supported values are terrace, flat, material, contrast_white, contrast_black

If you are using a custom skin you can use:

scheduler.skin = "custom";
Back to top