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


Related sample:  Terrace skin

'Material' skin

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

  • dhtmlxscheduler_material.css

Related sample:  Material skin

By default, the material skin imports Roboto font from Read more about Google Fonts here.

@import (css) url(,500,600);

You can remove Roboto font, if necessary, directly from .less files in codebase/sources/less/skins/material folder and then rebuild the skin as described in the Skins Customization article.

'Flat' skin

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

  • dhtmlxscheduler_flat.css


Related sample:  Flat skin

'Contrast Black' skin

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

  • dhtmlxscheduler_contrast_black.css


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


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: = "flat";  
// supported values are terrace, flat, material, contrast_white, contrast_black

If you are using a custom skin you can use: = "custom";
Back to top