타입스크립트로 작성된 리액트 달력 컴포넌트입니다.
peer dependencies
설치
$ 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 로 이동해서 동작을 확인하실 수 있습니다.
번들러
변경사유는 아래와 같습니다.
- 트리쉐이킹 (Tree-shaking) 지원
- CommonJS 모듈과 ES 모듈을 모두 제공
저장소
이 사이트는 광고를 포함하고 있습니다.
광고로 발생한 수익금은 서버 유지 관리에 사용되고 있습니다.This site contains advertisements.
Revenue generated by the ad servers are being used for maintenance.