1. Calendar

Calendar 컴포넌트는 날짜를 선택할 수 있는 인터랙티브한 달력을 제공합니다. 사용자가 특정 날짜를 선택할 수 있으며, 선택된 날짜는 부모 컴포넌트로 전달될 수 있습니다.

1.1. Import

import Calendar from '@components/Calendar';

1.2. Usage

기본 사용 예제는 아래와 같습니다:

September 2024

Sun

Mon

Tue

Wen

Thu

Fri

Sat

import Calendar from '@components/Calendar';

function Example() {
  return <Calendar />;
}

export default Example;

1.3. Customizing Calendar

Calendar 컴포넌트는 다양한 속성을 통해 사용자 정의할 수 있습니다. 기본 날짜를 설정하거나 날짜 선택 시 호출될 콜백 함수를 전달할 수 있습니다.

September 2024

Sun

Mon

Tue

Wen

Thu

Fri

Sat

import Calendar from '@components/Calendar';

function Example() {
  return (
    <Calendar
      defaultValue={new Date()}
      onDateSelect={(date) => console.log(date)}
    />
  );
}

export default Example;

1.4. Props

Calendar 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`onDateSelect`	사용자가 날짜를 선택할 때 호출되는 콜백 함수입니다.	`(date: Date) => void`	`undefined`
`defaultValue`	달력이 로드될 때 기본으로 선택된 날짜입니다.	`Date`	`new Date()`

1.5. Full Example

import Calendar from '@components/Calendar';

function Example() {
  return (
    <div>
      <Calendar
        defaultValue={new Date()}
        onDateSelect={(date) => console.log(date)}
      />
    </div>
  );
}

export default Example;

2. CalendarRange

CalendarRange 컴포넌트는 날짜 범위를 선택할 수 있는 달력을 제공합니다. 사용자는 시작 날짜와 종료 날짜를 선택할 수 있으며, 선택된 범위는 부모 컴포넌트로 전달될 수 있습니다.

2.1. Import

import CalendarRange from '@components/CalendarRange';

2.2. Usage

기본 사용 예제는 아래와 같습니다:

September 2024

Sun

Mon

Tue

Wen

Thu

Fri

Sat

import CalendarRange from '@components/CalendarRange';

function Example() {
  return <CalendarRange />;
}

export default Example;

2.3. Customizing CalendarRange

CalendarRange 컴포넌트는 날짜 선택 시 호출될 콜백 함수인 onDateSelect를 전달하여 선택된 날짜 범위를 처리할 수 있습니다.

September 2024

Sun

Mon

Tue

Wen

Thu

Fri

Sat

import CalendarRange from '@components/CalendarRange';

function Example() {
  return (
    <CalendarRange 
      onDateSelect={(startDate, endDate) => console.log("Selected range:", startDate, "to", endDate)}
    />
  );
}

export default Example;

2.4. Props

CalendarRange 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`onDateSelect`	사용자가 날짜 범위를 선택할 때 호출되는 콜백 함수입니다.	`(startDate: Date, endDate: Date) => void`	`undefined`

2.5. Full Example

import CalendarRange from '@components/CalendarRange';

function Example() {
  return (
    <div>
      <CalendarRange 
        onDateSelect={(startDate, endDate) => console.log("Selected range:", startDate, "to", endDate)}
      />
    </div>
  );
}

export default Example;