@yongeun1111/calendar

TypeScript, Tailwind CSS, Shadcn-UI로 만든 풀 기능 React 캘린더 컴포넌트 라이브러리예요.

ilamy-calendar by Sujeet Kc (MIT License) 기반으로 만들었어요.

주요 기능

• 다양한 뷰 (월간, 주간, 일간, 연간)
• 리소스 캘린더 (다중 리소스 타임라인)
• 드래그 앤 드롭 (충돌 감지)
• RFC 5545 반복 이벤트 (RRULE, EXDATE)
• iCalendar 내보내기 (.ics)
• 100개 이상 로케일 지원 (dayjs)
• 반응형 디자인
• TypeScript 완벽 지원

커스텀 확장 기능

• Provider/Content 분리로 유연한 레이아웃 구성
• headerExtra / headerExtraMobile props
• onExternalCreate / onExternalMore 콜백
• compact / hideHeader 모드
• 리소스 가시성 제어

설치

bun add @yongeun1111/calendar

필수 의존성

이 패키지를 사용하려면 아래 라이브러리들이 프로젝트에 설치되어 있어야 해요.

bun add react react-dom dayjs tailwindcss tailwindcss-animate

| 패키지 | 버전 | 설명 | |--------|------|------| | react | ^18.0.0 || ^19.0.0 | React | | react-dom | ^18.0.0 || ^19.0.0 | React DOM | | dayjs | ^1.11.0 | 날짜/시간 처리 | | tailwindcss | ^4.0.0 | CSS 프레임워크 | | tailwindcss-animate | ^1.0.7 | 애니메이션 유틸리티 |

대부분의 React + Tailwind 프로젝트라면 dayjs만 추가로 설치하면 돼요.

사용법

import { YeCalendar } from '@yongeun1111/calendar';

<YeCalendar
  events={events}
  onEventClick={handleClick}
  locale="ko"
/>

Provider/Content 패턴

import { CalendarProvider, CalendarContent } from '@yongeun1111/calendar';

<CalendarProvider events={events}>
  <div className="flex">
    <CalendarContent />
    <YourCustomPanel />
  </div>
</CalendarProvider>

개발

bun install
bun run dev      # 개발 서버
bun run build    # 프로덕션 빌드
bun test         # 테스트 실행

라이선스

MIT - LICENSE 참고

@yongeun1111/calendar (English)

A full-featured React calendar component library built with TypeScript, Tailwind CSS, and Shadcn-UI.

Based on ilamy-calendar by Sujeet Kc (MIT License).

Features

• Multiple Views (Month, Week, Day, Year)
• Resource Calendar (multi-resource timeline)
• Drag & Drop (collision detection)
• RFC 5545 Recurring Events (RRULE, EXDATE)
• iCalendar Export (.ics)
• 100+ Locales (dayjs)
• Responsive Design
• TypeScript

Custom Extensions

• Provider/Content separation for flexible layouts
• headerExtra / headerExtraMobile props
• onExternalCreate / onExternalMore callbacks
• compact / hideHeader modes
• Resource visibility control

Installation

bun add @yongeun1111/calendar

Peer Dependencies

The following packages must be installed in your project.

bun add react react-dom dayjs tailwindcss tailwindcss-animate

| Package | Version | Description | |---------|---------|-------------| | react | ^18.0.0 || ^19.0.0 | React | | react-dom | ^18.0.0 || ^19.0.0 | React DOM | | dayjs | ^1.11.0 | Date/time library | | tailwindcss | ^4.0.0 | CSS framework | | tailwindcss-animate | ^1.0.7 | Animation utilities |

Most React + Tailwind projects only need to install dayjs additionally.

Usage

import { YeCalendar } from '@yongeun1111/calendar';

<YeCalendar
  events={events}
  onEventClick={handleClick}
  locale="ko"
/>

Provider/Content Pattern

import { CalendarProvider, CalendarContent } from '@yongeun1111/calendar';

<CalendarProvider events={events}>
  <div className="flex">
    <CalendarContent />
    <YourCustomPanel />
  </div>
</CalendarProvider>

Development

bun install
bun run dev      # Dev server
bun run build    # Production build
bun test         # Run tests

License

MIT - See LICENSE