@mung-office/calendar NPM

달력

👉 Installation

$ npm i @mung-office/calendar

👉 Usage

import { Calendar, DatePicker } from '@mung-office/calendar';

Default

<Calendar 
  onSelectDate={date => setSelectDate(date)}
  onSelectDates={dates => setSelectDates(dates)}
  selectDate={selectDate}
  selectDates={selectDates}
  beforeDisablePoint={beforeDisablePoint}
  afterDisablePoint={afterDisablePoint}
  disableDates={disableDates}
/>

Key	Type	Desc	Default
onSelectDate	(date, number) => {}	셀 선택시 선택된 날짜	() => {}
onSelectDates	(date, date) => {}	셀을 드래그시 날짜의 시작과 끝	() => {}
selectDate	date, number	여기에 포함된 날짜는 화면에 표시된다. 선택된 날짜, 요일번호	오늘날짜, 오늘요일번호
selectDates	date, date	여기에 포함된 날짜는 화면에 표시된다.시작날짜, 마지막 날짜	오늘날짜, 오늘날짜
beforeDisablePoint	date	해당 날짜를 기준으로 이전날짜 비활성화	""
afterDisablePoint	date	해당 날짜를 기준으로 이후날짜 비활성화	""
disableDates	date, date, ...	비활성화 날짜 목록	[]

Date Picker

<DatePicker 
  onChange={date => setSelectDate(date)}
  value={selectDate}
  min={beforeDisablePoint}
  max={afterDisablePoint}
  disableDates={disableDates}
  width={520}
/>

Key	Type	Desc	Default
onSelectDate	(date, number) => {}	셀 선택시 선택된 날짜	() => {}
value	date, number	여기에 포함된 날짜는 화면에 표시된다. 선택된 날짜, 요일번호	오늘날짜, 오늘요일번호
min	date	해당 날짜를 기준으로 이전날짜 비활성화	""
max	date	해당 날짜를 기준으로 이후날짜 비활성화	""
disableDates	date, date, ...	비활성화 날짜 목록	[]
width	number	팝업달력 너비	520

요일번호는 다음과 같이 정의한다.

일요일(0)
월요일(1)
화요일(2)
수요일(3)
목요일(4)
금요일(5)
토요일(6)

DEMO

@testing-library/jest-dom @testing-library/react @testing-library/user-event @types/date-fns date-fns react react-dom react-scripts styled-components

@infinitebrahmanuniverse/nolb-_mun @everything-registry/sub-chunk-626

2 years ago

2 years ago

2 years ago

2 years ago