@mycrm-ui/components Calendar Multiple 선택 LLM 가이드

이 문서는 Calendar로 여러 날짜를 선택하는 UI를 만들 때 참고한다.

언제 사용하나

• 일정 후보일 여러 개를 선택한다.
• 선택한 날짜를 다시 클릭해 해제한다.
• 최대 선택 개수를 제한한다.
• 선택 날짜 목록을 호출 화면에서 직접 관리한다.

핵심 import

import { Calendar } from "@mycrm-ui/components";
import type { CalendarDateSelectValue } from "@mycrm-ui/components";

예시

import { useState } from "react";
import { Calendar } from "@mycrm-ui/components";
import type { CalendarDateSelectValue } from "@mycrm-ui/components";

export function MultipleCalendar() {
  const [selectedDates, setSelectedDates] = useState<CalendarDateSelectValue[]>([
    "2026-09-10",
    "2026-09-20",
  ]);

  return (
    <Calendar
      year={2026}
      month={9}
      selectionMode="multiple"
      selectedDates={selectedDates}
      maxSelectedDates={3}
      weekdayLabelType="ko"
      dateSelectValueType="yyyy-MM-dd"
      onDateSelect={(date) => {
        setSelectedDates((current) =>
          current.includes(date)
            ? current.filter((item) => item !== date)
            : [...current, date],
        );
      }}
    />
  );
}

주요 props

• selectionMode="multiple": 다중 선택 모드를 켠다.
• selectedDates: controlled 선택 날짜 목록이다.
• maxSelectedDates: 선택 가능한 최대 개수다.
• onDateSelect: 날짜 클릭 시 호출된다. 호출 화면에서 추가/제거 상태를 반영한다.
• dateSelectValueType: 선택 콜백의 날짜 포맷을 정한다.

동작 규칙

• 이미 선택된 날짜를 다시 선택하면 해제 흐름으로 사용할 수 있다.
• maxSelectedDates는 새 날짜 추가를 제한한다. 이미 선택된 날짜 해제는 가능해야 한다.
• maxSelectedDates가 정수가 아니거나 0 이하이면 제한하지 않는다.
• 다중 선택에서도 같은 날짜의 marker 목록은 onDateSelect 두 번째 인자로 전달된다.

DatePicker에서 쓰는 경우

<DatePicker
  multi
  selectedDates={selectedDates}
  maxSelectedDates={3}
  onMultipleChange={({ selectedDates }) => setSelectedDates(selectedDates)}
/>

LLM 구현 체크리스트

• 달력 본문만 필요하면 Calendar selectionMode="multiple"을 사용한다.
• popover input UI가 필요하면 DatePicker multi를 사용한다.
• 서버 전송값이 필요하면 dateSelectValueType="yyyy-MM-dd" 같은 문자열 포맷을 명시한다.