Skins

Es sind mehrere integrierte Skins verfügbar:

1. Terrace (Standard)
2. Dark
3. Material
4. Flat
5. Contrast Black
6. Contrast White

Ab Version 7.0 sind alle Skins in der Hauptdatei dhtmlxscheduler.css enthalten. Sie können einen Skin aktivieren, indem Sie die Eigenschaft scheduler.skin setzen:

scheduler.skin = "dark";

Alternativ können Sie die Methode scheduler.setSkin() verwenden:

scheduler.setSkin("dark");

In Scheduler Version 6.0 und älter wurden Skins als separate CSS-Dateien bereitgestellt.

Verwendung von Schriftarten

Standardmäßig laden die Skins die Schriftart Inter von https://fonts.googleapis.com. Weitere Informationen zu Google Fonts finden Sie hier.

@import (css) url(
'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'
);

Falls erforderlich, können Sie den Schriftimport direkt aus den .less-Dateien im Ordner codebase/sources/less/skins/material entfernen und anschließend den Skin wie im Artikel Skins-Anpassung beschrieben neu erstellen.

'Skin Terrace'

Um den Standard-Skin zu verwenden, binden Sie die Standard-CSS-Datei ein:

• dhtmlxscheduler.css

Related sample:  Terrace skin

'Skin Dark'

Um den 'Dark'-Skin anzuwenden, binden Sie die Standard-CSS-Datei ein:

• dhtmlxscheduler.css

Setzen Sie dann den Skin über die Eigenschaft scheduler.skin:

scheduler.skin = "dark";

Related sample:  Dark skin

'Skin Material'

Um den 'Material'-Skin zu aktivieren, binden Sie die Standard-CSS-Datei ein:

• dhtmlxscheduler.css

Setzen Sie dann den Skin mit der Eigenschaft scheduler.skin:

scheduler.skin = "material";

Related sample:  Material skin

Der Material-Skin benötigt die Schriftart Roboto, die nicht standardmäßig enthalten ist. Sie müssen diese manuell wie folgt hinzufügen:

@import url(
'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap'
);

'Skin Flat'

Um den 'Flat'-Skin zu verwenden, binden Sie die Standard-CSS-Datei ein:

• dhtmlxscheduler.css

Setzen Sie dann den Skin über die Eigenschaft scheduler.skin:

scheduler.skin = "flat";

Related sample:  Flat skin

'Skin Contrast Black'

Um den 'Contrast Black'-Skin anzuwenden, binden Sie die Standard-CSS-Datei ein:

• dhtmlxscheduler.css

Setzen Sie dann den Skin über die Eigenschaft scheduler.skin:

scheduler.skin = "contrast-black";

Related sample:  High contrast theme - Black

'Skin Contrast White'

Um den 'Contrast White'-Skin anzuwenden, binden Sie die Standard-CSS-Datei ein:

• dhtmlxscheduler.css

Setzen Sie dann den Skin über die Eigenschaft scheduler.skin:

scheduler.skin = "contrast-white";

Related sample:  High contrast theme - White

Nach oben