@gpters-internal/ui

Calendar

날짜를 선택할 수 있는 캘린더 컴포넌트

Basic Usage

단일 날짜를 선택하는 기본 캘린더입니다.

February 2026
tsx
const [date, setDate] = useState<Date | undefined>(new Date());

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  className="rounded-md border"
/>

Range Selection

날짜 범위를 선택할 수 있습니다.

February 2026
March 2026
tsx
const [dateRange, setDateRange] = useState<{ from: Date; to: Date }>();

<Calendar
  mode="range"
  selected={dateRange}
  onSelect={setDateRange}
  numberOfMonths={2}
  className="rounded-md border"
/>

With Dropdown Navigation

드롭다운으로 월/년도를 빠르게 선택할 수 있습니다.

February 2026
tsx
<Calendar
  mode="single"
  captionLayout="dropdown"
  fromYear={2020}
  toYear={2030}
  className="rounded-md border"
/>

Disabled Dates

특정 날짜를 비활성화할 수 있습니다.

February 2026
tsx
<Calendar
  mode="single"
  disabled={(date) => date < new Date()}
  className="rounded-md border"
/>

Usage

tsx
import { Calendar } from '@gpters-internal/ui';
import { useState } from 'react';

function Example() {
  const [date, setDate] = useState<Date | undefined>(new Date());

  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      className="rounded-md border"
    />
  );
}