Soon UI Design

Layout
Navigation
Input
Select
Display
Feedback

Calendar

달력 컴포넌트입니다. 날짜와 연도 선택은 키보드로도 조작할 수 있습니다.

import { Calendar } from 'sud-ui';

GitHub에서 소스코드 보기

사용할 때

날짜 선택이나 달력 표시가 필요할 때

사용예제

202607

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Basic Usage

기본적인 사용 방법입니다.

202607

Sun

Mon

Tue

Wed

Thu

Fri

Sat

[14:00] - Weekly Meeting

[15:00] - Code Review

View Control

뷰 컨트롤 표시 여부를 설정합니다.

202607

Sun

Mon

Tue

Wed

Thu

Fri

Sat

[14:00] - Weekly Meeting

[15:00] - Code Review

Date Control

날짜 컨트롤 표시 여부를 설정합니다.

import React from 'react';
import { Calendar } from 'sud-ui';

const items = [
  {
    key: "1",
    date: "2024-06-01",
    content: "[14:00] - Weekly Meeting"
  },
  {
    key: "2",
    date: "2024-06-01",
    content: "[15:00] - Code Review"
  }
];

const DateControl = () => {
  return <Calendar viewControl={true} dateControl={true} items={items} />;
};

export default DateControl;

202607

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Range

날짜 범위 선택 모드를 설정합니다.

202607

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Color Custom

색상 커스텀을 합니다.

2026년7월

일

월

화

수

목

금

토

Locale

언어 설정을 합니다.

202607

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Mini View

미니 뷰 모드를 설정합니다.

202607

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Interactive

onChange 함수를 사용한 상호작용 예제입니다.

import React from 'react';
import { Calendar, toast } from 'sud-ui';

export default function Interactive() {
  return (
    <Calendar
      onChange={(date) => {
        if (typeof date === 'object' && 'startDate' in date) {
          // Range mode
          if (date.endDate) {
            toast.success(
              `범위 선택: ${date.startDate.toLocaleDateString()} ~ ${date.endDate.toLocaleDateString()}`
            );
          } else {
            toast.info(
              `시작 날짜: ${date.startDate.toLocaleDateString()}`
            );
          }
        } else {
          // Single date mode
          toast.success(
            `선택된 날짜: ${date.toLocaleDateString()}`
          );
        }
      }}
      viewControl={true}
    />
  );
}

202412

Sun

Mon

Tue

Wed

Thu

Fri

Sat

📅 Team Meeting

🎂 Birthday Party

🎄 Christmas

🎆 New Year's Eve

Items

실제 데이터를 가진 items 배열 사용 예제입니다.

import React from 'react';
import { Calendar } from 'sud-ui';

const items = [
  {
    key: "1",
    date: "2024-12-25",
    content: "🎄 Christmas",
    colorType: "red"
  },
  {
    key: "2", 
    date: "2024-12-31",
    content: "🎆 New Year's Eve",
    colorType: "gold"
  },
  {
    key: "3",
    date: "2024-12-15",
    content: "📅 Team Meeting",
    colorType: "blue"
  },
  {
    key: "4",
    date: "2024-12-20",
    content: "🎂 Birthday Party",
    colorType: "green"
  }
];

export default function Items() {
  return <Calendar value={new Date(2024, 11, 15)} viewControl={true} items={items} />;
}

202412

Sun

Mon

Tue

Wed

Thu

Fri

Sat

🎄 Christmas Day

🎆 New Year's Eve

Holidays

공휴일 설정과 스타일링 예제입니다.

import React from 'react';
import { Calendar } from 'sud-ui';

const holidays = ["2024-12-25", "2024-12-31", "2024-12-24"];

const items = [
  {
    key: "1",
    date: "2024-12-25",
    content: "🎄 Christmas Day",
    colorType: "red"
  },
  {
    key: "2",
    date: "2024-12-31", 
    content: "🎆 New Year's Eve",
    colorType: "gold"
  }
];

export default function Holidays() {
  return (
    <Calendar
      value={new Date(2024, 11, 15)}
      viewControl={true}
      holidays={holidays}
      holidaysStyle={{
        background: "red-1",
        color: "red-6",
        border: "2px solid red-3"
      }}
      items={items}
    />
  );
}

사용 방법

컴포넌트의 props를 설정하는 방법입니다.

value

선택된 날짜

Date | null

onChange

날짜 선택 시 호출되는 콜백 함수 (range 모드에서는 { startDate, endDate } 객체 전달)

(date: Date | { startDate: Date, endDate: Date | null }) => void

() => {}

items

달력에 표시할 아이템 배열 (date는 YYYY-MM-DD 형식)

Array<{ key?: Key, date: string, content: ReactNode, colorType?: tagColorType, itemProps?: HTMLAttributes<HTMLSpanElement> }>

[]

view

달력 뷰 타입

daily

month

year

month

viewControl

뷰 컨트롤 표시 여부

boolean

false

dateControl

날짜 컨트롤 표시 여부

boolean

false

headerRender

헤더 커스텀 렌더링

React.ReactNode

viewControlRender

뷰 컨트롤 커스텀 렌더링

React.ReactNode

dateControlRender

날짜 컨트롤 커스텀 렌더링

React.ReactNode

locale

달력 언어 설정 (en, ko 또는 커스텀 locale 객체)

object

colorType

달력 색상 타입

default

red

rose

coral

orange

volcano

apricot

yellow

gold

amber

green

lime

mint

blue

sky

cerulean

indigo

cobalt

navy

purple

plum

orchid

forest

sage

warm-gray

cool-gray

neutral

sky

background

배경색(palette값 또는 HEX code)

string

hoverBackground

호버 시 배경색(palette값 또는 HEX code)

string

color

텍스트 색상(palette값 또는 HEX code)

string

border

테두리 표시 여부

boolean

true

borderColor

테두리 색상(palette값 또는 HEX code)

string

borderType

테두리 스타일

solid

dashed

dotted

double

groove

ridge

inset

outset

none

solid

borderWeight

테두리 두께

number

width

달력 너비

string | number

100%

height

달력 높이

string | number

100%

className

추가 클래스명

string

range

날짜 범위 선택 모드

boolean

false

startDate

범위 선택 시작 날짜

Date | null

endDate

범위 선택 종료 날짜

Date | null

size

달력 크기 (반응형으로 자동 조절됨)

miniView

style

추가 스타일

React.CSSProperties

{}

holidays

공휴일 날짜 리스트 (YYYY-MM-DD)

string[]

[]

holidaysStyle

공휴일 칸에 적용할 스타일

React.CSSProperties

{}

rest

추가 HTML 속성

object

개인정보 처리방침

서비스 약관