타입스크립트로 작성된 리액트 달력 컴포넌트입니다.

peer dependencies

• react NPM GitHub
• react-dom NPM GitHub
• dayjs NPM GitHub

설치

$ npm install --save @bbon/react-calendar

사용

import React, { useCallback } from 'react';
import { Calendar } from '@bbon/react-calendar';

import '@bbon/react-calendar/dist/calendar.css';

const MyComponent = () => {

    const handleChangeSelection = useCallback(
        (start?: string, end?: string) => {
            console.info('Selected dates: ', start, end);
        },
        [],
    );

    return (
        <div>
            <Calendar
                useMoveToYear
                useMoveToMonth
                highlightToday
                showDate
                onChange={handleChangeSelection}
            />
        </div>
    );
}

모양

@bbon/react-calendar/dist/calendar.css 파일의 내용을 확인하고, 스타일을 재정의해서 사용하실 수 있습니다.

시연

bbon.me: react-calendar 로 이동해서 동작을 확인하실 수 있습니다.

번들러

Webpack 에서 Rollup 으로 변경했습니다.

변경사유는 아래와 같습니다.

• 트리쉐이킹 (Tree-shaking) 지원
• CommonJS 모듈과 ES 모듈을 모두 제공

저장소

GitHub: bbonkr/react-calendar