LLM Guide@mycrm-ui/components

Calendar CSS 커스터마이징

CalendarClassNames, DatePickerClassNames, calendarClassNames 슬롯을 적용할 때 읽는다.

기존 데모 섹션으로 이동Markdown 페이지Raw MD
MD Viewer

@mycrm-ui/components Calendar CSS 커스터마이징 LLM 가이드

이 문서는 Calendar와 DatePicker의 시각 스타일을 프로젝트 CSS로 조정할 때 참고한다.

기본 원칙

  • 기능을 바꾸지 않고 스타일만 바꿀 때 classNames를 사용한다.
  • Calendar의 최외곽에는 className을 사용한다.
  • Calendar 내부 날짜/요일/상태 슬롯에는 classNames를 사용한다.
  • DatePicker의 trigger, clear 버튼, popover shell은 classNames를 사용한다.
  • DatePicker 내부 Calendar 날짜 셀은 calendarClassNames를 사용한다.
  • 외부 className이 있으면 주요 기본 inline style이 생략되는 슬롯이 있어 프로젝트 CSS가 우선 적용될 수 있다.

Calendar 예시

<Calendar
  year={2026}
  month={9}
  className="w-80 rounded-xl border border-slate-200 p-4"
  classNames={{
    weekdaySat: "text-blue-600",
    weekdaySun: "text-red-600",
    selectedDay: "bg-blue-600 text-white",
    rangeInsideDay: "bg-blue-100 text-blue-900",
    adjacentMonthDay: "text-slate-400 opacity-60",
    disabledDay: "text-slate-400 opacity-45",
    dayMarker: "ring-1 ring-white",
  }}
/>

DatePicker 예시

<DatePicker
  classNames={{
    root: "w-64",
    trigger: "w-full rounded-lg border px-3",
    triggerValue: "truncate whitespace-nowrap",
    clearButton: "rounded-lg border px-2.5",
    popover: "rounded-xl bg-white shadow-xl",
    monthPickerOptionActive: "bg-blue-600 text-white",
  }}
  calendarClassNames={{
    selectedDay: "bg-blue-600 text-white",
    rangeInsideDay: "bg-blue-100",
    disabledDay: "opacity-40 text-slate-400",
  }}
/>

CalendarClassNames 슬롯

레이아웃

  • root: Calendar 최외곽 div
  • grid: 요일과 날짜를 포함하는 grid
  • weekday: 요일 헤더 공통
  • weekdaySun, weekdayMon, weekdayTue, weekdayWed, weekdayThu, weekdayFri, weekdaySat: 요일별 헤더

날짜 셀

  • day: 날짜 cell wrapper
  • dayContent: 날짜 숫자 주변 content
  • dayHover: hover 가능한 날짜 content
  • daySun, dayMon, dayTue, dayWed, dayThu, dayFri, daySat: 요일별 날짜
  • currentMonthDay: 현재 월 날짜
  • adjacentMonthDay: 이전/다음 월 날짜
  • disabledDay: 비활성 날짜
  • todayDay: 오늘 날짜

선택 / 범위

  • selectedDay: single/multiple 선택 날짜
  • rangeStartDay: range 시작 날짜
  • rangeEndDay: range 종료 날짜
  • rangeInsideDay: range 내부 날짜
  • rangePreviewDay: range hover preview 날짜
  • rangeSingleDay: 시작일과 종료일이 같은 range 날짜

marker

  • dayMarker: 날짜 하단 dot marker

DatePickerClassNames 슬롯

필드 / 트리거

  • root: DatePicker 최외곽 div
  • field: trigger와 clear 버튼 wrapper
  • trigger: input-like trigger button
  • triggerValue: 선택값 텍스트. 긴 range 텍스트는 이 슬롯에서 말줄임 처리한다.
  • placeholder: 미선택 placeholder 텍스트
  • icon: trigger 오른쪽 calendar icon
  • clearButton: 지우기 버튼

Calendar popover

  • popover: Calendar popover dialog
  • popoverHeader: 이전/다음 버튼과 현재 월 영역
  • popoverTitle: 현재 연도/월 텍스트
  • monthButton: 이전/다음 월 버튼

연도/월 선택 popover

  • monthPickerWrap: 연도/월 선택 wrapper
  • monthPickerToggle: 연도/월 선택 버튼
  • monthPickerPopover: 연도/월 리스트 popover
  • monthPickerSection: 연도 또는 월 section
  • monthPickerSectionTitle: section 제목
  • monthPickerOption: 연도/월 option button
  • monthPickerOptionActive: 선택된 연도/월 option

자주 하는 실수

  • DatePicker의 날짜 cell 스타일을 classNames에 넣으면 적용되지 않는다. 내장 Calendar에는 calendarClassNames를 써야 한다.
  • range 텍스트 줄바꿈을 막으려면 triggerValue에 truncate, white-space: nowrap, text-overflow: ellipsis 계열 스타일을 준다.
  • adjacent 날짜의 취소선은 기본 요구사항이 아니다. 회색 계열 표현만 원하면 adjacentMonthDay에서 색상과 투명도만 지정한다.
  • marker dot 색상은 markedDates[].color가 우선이다. 공통 크기나 테두리는 dayMarker로 조정한다.

LLM 구현 체크리스트

  • Calendar 단독: className + classNames
  • DatePicker shell: classNames
  • DatePicker 내부 Calendar: calendarClassNames
  • 선택 상태: selectedDay
  • range 상태: rangeStartDay, rangeEndDay, rangeInsideDay, rangePreviewDay, rangeSingleDay
  • 인접 월 날짜: adjacentMonthDay
  • 비활성 날짜: disabledDay