스킨(Skins)

다음과 같은 여러 가지 기본 제공 스킨이 있습니다:

버전 7.0부터 모든 스킨은 메인 dhtmlxscheduler.css 파일에 포함되어 있습니다. 스킨을 활성화하려면 scheduler.skin 속성을 설정하세요:

scheduler.skin = "dark";

또는, scheduler.setSkin() 메서드를 사용할 수도 있습니다:

scheduler.setSkin("dark");

Scheduler 버전 6.0 이하에서는 스킨이 별도의 CSS 파일로 제공되었습니다.

기본적으로, 스킨은 https://fonts.googleapis.com에서 Inter 폰트를 불러옵니다. Google Fonts에 대한 자세한 내용은 여기에서 확인할 수 있습니다.

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

필요하다면, codebase/sources/less/skins/material 폴더에 위치한 .less 파일에서 폰트 임포트를 직접 제거한 후, 스킨 커스터마이제이션 문서에 안내된 대로 스킨을 다시 빌드할 수 있습니다.

'Terrace' 스킨

기본 스킨을 사용하려면, 기본 CSS 파일을 포함하세요:

DHTMLX Scheduler - Light Theme

'Dark' 스킨을 적용하려면, 기본 CSS 파일을 포함하세요:

그런 다음 scheduler.skin 속성을 사용하여 스킨을 설정하세요:

scheduler.skin = "dark";

DHTMLX Scheduler - Dark Theme

'Material' 스킨을 활성화하려면, 기본 CSS 파일을 포함하세요:

그런 다음 scheduler.skin 속성으로 스킨을 설정하세요:

scheduler.skin = "material";

DHTMLX Scheduler - Material

Material 스킨은 기본적으로 포함되지 않은 Roboto 폰트를 필요로 합니다. 아래와 같이 직접 추가해주어야 합니다:

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

'Flat' 스킨을 사용하려면, 기본 CSS 파일을 포함하세요:

그런 다음 scheduler.skin 속성을 통해 스킨을 설정하세요:

scheduler.skin = "flat";

DHTMLX Scheduler - Flat Theme

'Contrast Black' 스킨을 적용하려면, 기본 CSS 파일을 포함하세요:

그런 다음 scheduler.skin 속성을 사용하여 스킨을 설정하세요:

scheduler.skin = "contrast-black";

DHTMLX Scheduler - Contrast Black Theme

'Contrast White' 스킨을 적용하려면, 기본 CSS 파일을 포함하세요:

그런 다음 scheduler.skin 속성을 사용하여 스킨을 설정하세요:

scheduler.skin = "contrast-white";

DHTMLX Scheduler - Contrast White Theme

맨 위로