스타일

캘린더에서 사용되는 모든 CSS 클래스는 변수로 제공되며, 원하는 값으로 교체하여 커스터마이징할 수 있습니다.

CSS 클래스를 자신의 것으로 교체할 때는, 해당 클래스를 직접 만들고 스타일링해야 한다는 점을 기억하세요.

아래는 화살표 클래스만 자신의 것으로 교체한 예제입니다. 전체 클래스 목록은 레퍼런스 가이드에서 확인할 수 있습니다.

CSS 변수

색상만 바꾸고 싶다면 클래스를 재정의할 필요조차 없습니다 — 내장 테마의 모든 색상은 CSS custom property로 노출되어 있으며, 기본값(fallback)은 각 테마의 원래 색상입니다:

css

:root {
  --vc-date-selected-bg: #7c3aed;
  --vc-date-selected-color: #fff;
}

변수를 명시적으로 설정하기 전까지는 아무것도 바뀌지 않습니다. 전체 변수 목록은 레퍼런스 가이드에서 확인할 수 있습니다.

모듈별 CSS

기존 styles/index.css, styles/layout.css, styles/themes/*.css는 모든 기능의 스타일을 계속 제공하며 호환성을 유지합니다. CSS 크기를 줄이려면 필요한 부분만 가져오세요. JavaScript 확장을 등록해도 CSS가 자동으로 로드되지는 않습니다.

선택적 CSS 가져오기는 스타일 참조에 설명되어 있습니다. 기존 전체 스타일시트도 지원되며, 예제는 필요한 부분만 가져옵니다.