전역 CSS 클래스

DayFlow는 캘린더 컴포넌트의 외형을 조정할 수 있도록 df- 접두사가 붙은 CSS 클래스 모음을 제공합니다. 코어 라이브러리를 고치지 않고도 손쉽게 스타일을 입힐 수 있게 설계되었습니다.

알맞은 CSS 진입점 고르기

애플리케이션이 이미 Tailwind CSS를 쓰는지에 따라 스타일시트를 고르세요:

@import '@dayflow/core/dist/styles.components.css';
@import 'tailwindcss';

테마를 재정의할 때는 --df-color-* 변수나 아래에 문서화된 안정적인 df-* 의미 기반 클래스를 사용하는 편이 좋습니다.

목차

• 공통 클래스
• 의미 기반 유틸리티 클래스
• 레이아웃과 모션 헬퍼
• 일 뷰 클래스
• 주 뷰 클래스
• 월 뷰 클래스
• 연간 뷰 클래스
• 미니 캘린더 클래스
• 사이드바 클래스
• 내비게이션 클래스
• 이벤트 상세 클래스
• Content Slot 클래스
• 이벤트 상태 속성

공통 클래스

모든 캘린더 뷰에서 공통으로 사용하는 CSS 클래스입니다.

의미 기반 유틸리티 클래스

DayFlow는 선택된 버튼, 강조된 날짜, 파괴적 동작, 포커스 링 같은 내부 상태를 위해 안정적인 df-* 의미 기반 클래스를 제공합니다. 공용 기반 CSS에 정의되어 있으므로 직접 만든 스타일시트에서 안심하고 대상으로 삼을 수 있습니다.

직접 만든 콘텐츠, 플러그인 UI, content slot 출력이 DayFlow의 테마 토큰과 어울리게 하고 싶을 때 이 클래스들을 사용하세요:

테마를 입힐 때는 이 클래스들이나 --df-color-* 변수를 사용하세요. DayFlow 내부 요소에 bg-primary, text-primary, hover:bg-primary/90 같은 예전 내부 조합을 지정하지 마세요. 이 Tailwind 의미 이름들은 더 이상 공개 스타일 계약에 포함되지 않습니다.

레이아웃과 모션 헬퍼

직접 만든 슬롯 콘텐츠나 플러그인 UI가 DayFlow의 레이아웃·애니메이션 동작을 그대로 물려받게 하고 싶을 때 유용한 클래스들입니다.

일 뷰

일 뷰 전용 CSS 클래스입니다.

주 뷰

주 뷰 전용 CSS 클래스입니다.

월 뷰

월 뷰 전용 CSS 클래스입니다.

연간 뷰

연간 뷰 전용 CSS 클래스입니다. 연간 개요에서 이벤트 외형을 조정할 때 특히 유용합니다.

미니 캘린더

미니 캘린더 컴포넌트의 CSS 클래스입니다(보통 사이드바나 일 뷰에 있습니다).

사이드바

사이드바 컴포넌트의 CSS 클래스입니다.

내비게이션

이동 버튼의 CSS 클래스입니다.

이벤트 상세

이벤트 상세 패널과 대화상자의 CSS 클래스입니다.

Content Slots

Content Slot 렌더링 시스템에서 사용하는 CSS 클래스입니다.

이벤트 상태 속성

DayFlow가 제공하는 것은 이벤트 상태 플래그만이 아닙니다. 이벤트, 그리드, 오버레이, 드로어, 내부 레이아웃 헬퍼 전반에서 현재 프로젝트는 다음 data-* 속성을 사용합니다. 상당수는 CSS에서 직접 대상으로 삼을 수 있고, 일부는 오버레이 로직과 바깥쪽 클릭 처리를 위한 구조적 후크에 가깝습니다.

이벤트 요소

날짜·그리드·레이아웃 상태

컨트롤·입력·검색

사이드바 플러그인 상태

오버레이와 상호작용 후크

예시

/* Selected events */
.df-event[data-selected='true'] {
  outline: 2px solid var(--df-color-primary);
}

/* Events while being dragged */
.df-event[data-dragging='true'] {
  opacity: 0.6;
}

/* Only target month-view events */
.df-event[data-view='month'] {
  font-size: 11px;
}

/* All-day events only */
.df-event[data-all-day='true'] {
  font-weight: 600;
}

/* Highlight today's agenda section or compact grid cell */
[data-today='true'] {
  background-color: color-mix(in srgb, var(--df-color-primary) 8%, transparent);
}

스타일 맞춤 설정

외형을 조정하려면 이 클래스들을 대상으로 삼거나 전역 CSS에서 --df-color-* 변수를 재정의하세요. 대부분의 테마 수준 변경에는 !important가 필요하지 않습니다. 특정도가 아주 높은 지역 규칙을 의도적으로 이겨야 할 때만 사용하세요.

예시

/* Change the background of all events */
.df-event {
  border-radius: 8px !important;
}

/* Customize the current time indicator */
.df-current-time-line {
  z-index: 100;
}
.df-current-time-bar {
  height: 3px !important;
  background-color: #ef4444 !important;
}

/* Customize specific view */
.df-day-view .df-event {
  border-left: 4px solid #3b82f6;
}

/* Style the sidebar */
.df-sidebar {
  background-color: #f8fafc !important;
}

/* Style mini calendar */
.df-mini-calendar-day:hover {
  background-color: #e2e8f0;
}

/* Reuse DayFlow semantic helpers in your own slot or plugin markup */
.my-custom-primary-chip {
  background-color: var(--df-color-primary);
  color: var(--df-color-primary-foreground);
}

/* Dark mode overrides */
.dark .df-calendar {
  background-color: #111827;
}

/* Style event detail panel */
.df-event-detail-panel {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

사용 팁

1. 특정도: 스타일이 적용되지 않는다면, 캘린더를 직접 만든 클래스로 감싸 특정도를 높이세요:

   .my-custom-calendar .df-event { ... }

2. 반응형 디자인: 미디어 쿼리로 모바일 환경의 스타일을 조정하세요:

   @media (max-width: 768px) {
     .df-event-title {
       font-size: 10px;
     }
     .df-time-label {
       font-size: 10px;
     }
   }

3. 다크 모드: 다크 모드 전용 스타일에는 .dark 선택자를 사용하세요:

   .dark .df-month-day-cell {
     border-color: #374151;
   }

4. CSS 변수: DayFlow는 색상에 --df-color-* 커스텀 속성을 사용합니다. 색상 변경 범위를 제한하려면 .df-calendar-container(플로팅 오버레이에는 .df-portal)에서 재정의하세요:

   .df-calendar-container,
   .df-portal {
     --df-color-primary: #3b82f6;
     --df-color-primary-foreground: #ffffff;
   }

이전 버전에서 업그레이드하기

관련 문서

• 테마 커스터마이징 – 고급 테마 옵션
• 다크 모드 – 다크 모드 설정