react-awesome-calendar-ts

react 기반 모바일 캘린더입니다. bug 제보는 issue로 등록 부탁드립니다.

Getting started

1. Install with yarn or npm:

yarn add react-awesome-calendar-ts

registry.navercorp not saved global registry

yarn add react-awesome-calendar-ts --registry=https://artifactory.navercorp.com/artifactory/api/npm/npm-naver/

2. Using react-awesome-calendar-ts

import {
  useSpreadSeveral,
  useSpreadRange,
  useInfiniteSeveral,
  useInfiniteRange,
  days,
} from 'react-awesome-calendar-ts';
export default () => {
  const SpreadSeveral = useSpreadSeveral();
  const SpreadRange = useSpreadRange();
  const InfiniteSeveral = useInfiniteSeveral();
  const InfinitedRange = useInfiniteRange();
  return (
    <div>
      <SpreadSeveral />
      <SpreadRange />
      <InfiniteSeveral />
      <InfiniteRange />
    </div>
  );
};

• options에 넘긴 데이터는 캘린더 초기화시에만 동작합니다.
• wrapper Component에서 캘린더를 제어하고자 할 경우, 제어하려는 데이터는 별도의 mutableOptions 프로퍼티에 전달해야 합니다. ex) holidays, editingIndex

<SpreadSeveral
  options={{
    todayText: '오늘',
  }}
  mutableOptions={{
    holidays: propHolidays,
    editingIndex: propEditingIndex,
  }}
/>

Features

• friendly UI
• Flexible – maximum selected date, disabled dates, avaliable dates, etc.
• sequential - Automatic check invalid date for sequential dates
• Extensible – Add date range-selection, multiple date selection
• modifiable - Specific dates can be edited
• focusable - Open calendar, focus selected Dates

options / mutableOptions

• All options are not required
• type 'DDS' means (Dayjs | Date | string)
• type 'YMD' means [YYYY-MM-DD]

| Property | Type | Default | Description | | :------------------- | :------------------------------------------------------ | :-------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------- | | delegateControl | boolean | true | set true when to control outside this calendar | | dateFormat | string | 'YYYYMMDD' | set date formatex) 'YYYY-MM-DD' / 'YYYY.MM.DD.' / 'DD/MM/YYYY' | | dateNumFormat | 'DD' or 'D' | 'D' | set date digit type.ex) 'D' -> '1' '31' / 'DD' -> '01' '31' | | dayTexts | string[] | ['Sunday', ..., 'Saturday'] | text of days | | today | DDS | | can change today date like KST Server time | | todayText | string | "" | show this text on today | | todaySelectable | boolean | false | set whether today is selctable or not | | startDate | DDS | today | start of calendar | | startDay | number | 0 | day of week, 0 = sunday, 5 = friday | | endDate | DDS | | end of calendar | | maxMonths | number | | set maximum months ex) startDate: 2021-03-01 / maxMonths: 12 -> endDate: 2022-03-01 | | visibleMonthCount | number | 2 | visible months count | | holidays | { date: dateFormat, name: string }[] | [] | display holidays with holiday className ex) [{date: YMD, name: 'Christmas'},...] | | customDates | { date: dateFormat, name: string, classname: string }[] | [] | display custom text and class on date ex) [{date: YMD, name: string, classname: string},...] | | amassCustomDates | boolean | true | weather amass customDates data or delete previous ones when is updated | | availableDates | DDS[] | {} | required Date type array ex) {YMD: 1} | | unavailableDates | DDS[] | {} | required Date type array ex) {YMD: 1} | | height | string | '500px' | calendar height. ex) '600px' / '100%' | | maxSelection | number | 1 | maximum select count | | allowSame | boolean | false | could be set as false not to allow the same date to be selected | | selectedDates | DDS[] | [] | set pre-selected dates | | selectionTextBuilder | ({ index, dates }) => string | ({ index }) => ${index + 1}여정 | set text for selected dates | | editingIndex | number | null | null | index of editing target date (when user trying to update one of selected dates) | | maxRange | number | | range calendar only restrict selectable date range. ex) maxRange: 30 & startDate: 20191201 -> endDate must be in range (20191201 -20191231) | | ignoreOrder | boolean | false | spread calendar only enable to select dates without obeying the order | | cancelable | boolean | false | spread calendar only enable to cancel the selected date |

methods

• All methods are not required

| Property | Type | Description | | :------------------ | :------- | :---------------------------------------------------------------------------------------------------------------------------------------------- | | onViewMonthsUpdated | function | spread calendar only evoked when visible months updated.the parameter of callback function is an Array of visible Months' first Dates. | | onSuccess | function | evoked when selected dates update succeed. | | onFailure | function | evoked when selected dates update failed. | | onClickDisabled | function | evoked when unselectable(disable) date is selected. | | onPrevBtnClick | function | evoked when previous button is clicked (SpreadCalendar only) | | onNextBtnClick | function | evoked when next button is clicked (SpreadCalendar only) |

sync calendar after initiation

<button onClick={hol => this.setState({ holidays: hol })}>공휴일 업데이트</button>
<button onClick={index => this.setState({ editingIndex: index })}>editingIndex 업데이트</button>

<InfiniteSeveral
  options={this.calendarOptions}
  mutableOptions={{
    holidays: this.state.holidays,
    editingIndex: this.state.editingIndex,
  }}
  methods={this.calendarMethods}
/>

Demo

https://pages.oss.navercorp.com/travel/react-awesome-calendar-ts

Spread Calendar

UI상 PC용으로 쓰임 visibleMonthCount 옵션으로 펼쳐져서 노출되는 month의 수 조절 가능

SpreadRange

범위 여정(시작일&종료일) 선택을 위한 캘린더 output: Dayjs[][]

SpreadSeveral

단일 날짜들 선택을 위한 캘린더 output: Dayjs[]

Infinite Calendar

infinite scroll 적용되어 Mobile용으로 쓰임 visibleMonthCount 옵션으로 스크롤 영역 내에서 한 번에 로딩되는 month의 수 조절 가능

InfiniteRange

범위 여정(시작일&종료일) 선택을 위한 캘린더 output: Dayjs[][]

InfiniteSeveral

단일 날짜들 선택을 위한 캘린더 output: Dayjs[]

days 포맷 변환

days: day.js 라이브러리에 locale 등의 config를 설정한 instance.

참고: https://day.js.org/docs/en/display/display

import { days } from 'react-awesome-calendar-ts';
const d = days(); // {$L: "en", $d: Fri Feb 21 2020 10:29:50 GMT+0900, $y: 2020, $M: 1, $D: 21, …}
const date = d.toDate(); // Fri Feb 21 2020 10:29:50 GMT+0900
const string = d.toString(); // "Fri, 21 Feb 2020 01:29:50 GMT"
const formattedString = d.format('YYYY-MM-DD HH:mm'); // "2020-02-21 10:29"
const formattedString2 = d.format('MM.DD. dd'); // "02.21. 금"

publish

npm publish --registry https://artifactory.navercorp.com/artifactory/api/npm/npm-naver/

setting naver-npm repository naver-npm 이관이슈

npm config set registry "https://artifactory.navercorp.com/artifactory/api/npm/npm-naver/"

registry "https://artifactory.navercorp.com/artifactory/api/npm/npm-naver/"

history

v0.8.5 @2025.03.27 (by @roy-jung)

• InfiniteCalendar에 content-visibility: auto 적용
• prev fetch 기능 제거

v0.8.4 @2025.03.26

• redux 사용 성능 개선 (by @minchae-kim)

v0.8.3 @2025.03.07

• 스타일 수정: 날짜 cell 상단 정렬 (by @wankyu)

v0.8.2 @2024.04.09

• react, react-dom 버전 업그레이드 (by @giin-lee)
• 빌드에러 해결을 위해 typescript, webpack 버전 업그레이드

v0.7.7 @2023.07.25.

• 모바일 공휴일 부연설명 글자 색 변경 (by @woo-seungjin)

v0.7.6 @2023.05.10.

• pastday 스타일 제거 (by @sohyeon-noh)
• unavailableDates 옵션 버그 수정

v0.7.5 @2023.04.20.

• today날짜를 사용하는 쪽에서 option으로 추가할 수 있도록 변경 (by @woo-seungjin)

v0.7.4 @2023.01.11.

• 최초 접속시 선택일이 있는 경우 해당월 / 없는 경우 '오늘'부터 보여지도록 수정 (by @roy-jung)

v0.7.3 @2022.02.24.

• onFailure 실행에 에러 이벤트에 에러 난 날짜 추가 (by @woo-seungjin)

v0.7.2 @2022.01.25.

• onFailure 실행에 에러 이벤트 및 에러 타입 추가 (by @woo-seungjin)

v0.7.1 @2022.01.19.

• rangeCalendar에 editingIndex 지정시 maxRange 동작 안하는 오류 수정 (by @woo-seungjin)

v0.7.0 @2021.07.21.

• selectionTexts, selectionTextForSameDate 옵션 제거
• selectionTextBuilder 함수 추가

v0.6.7 @2021.07.14.

• SpreadCalendar 날짜 선택에 대한 다양한 오류 수정

v0.6.5 @2021.07.01.

• SpreadCalendar에서 달력 시작일을 선택할 수 없는 오류 수정

v0.6.4 @2021.06.28.

• infiniteCalendar 스크롤이 튀는 현상 해결 (scrollIntoView => scrollTop 으로 수정 by @root-code)

v0.6.3 @ 2021.06.18.

• dateNumFormat 옵션 추가: 1자리수 날짜에 대한 표기 방식 선택.

v0.6.2 @ 2021.06.10.

• onPrevBtnClick, onNextBtnClick 메소드 추가
• SpreadCalendar 초기화시 선택된 달 대신 현재 달이 노출되는 오류 해결
• 3개 이상 선택 가능한 달력에서 2개까지 선택된 상태에서 1여정 수정하고자 할 때 2여정보다 뒤의 날짜를 선택하면 3여정에 등록되는 오류 해결

v0.6.1 @ 2021.05.12.

• customDates에 classname 항목이 없는 경우 반영이 되지 않는 오류 해결

v0.6.0 @ 2021.05.07.

• mutableOptions 분리: 외부동작을 별도의 props로 전달하는 대신 mutableOptions를 이용하도록 함
• 성능최적화: 컴포넌트 활성화시 store 초기화 / 비활성화시 GC되도록 함

v0.5.20 @ 2021.05.06.

• delegateControl 옵션 추가: 외부에서 날짜선택 등 캘린더 개입이 필요한 경우 캘린더 자체 동작과의 중복 이슈 해결 위함.

v0.5.19 @ 2021.03.29.

• peerDependencies: React 16 이상에서 동작하도록 함.
• dependencies에서 react, react-dom 제외 (devDependencies로 이동)
• declaration 파일 추가

v0.5.18 @ 2021.03.06.

• 라이브러리 업데이트
• scroll event handler -> IntersectionObserver 마이그레이션
• class component -> function component 마이그레이션
• 날짜 계산식 오류 수정

v0.5.17 @ 2021.03.02.

• InfiniteCalendar 특정 시점 이후 스크롤로 월 전환이 되지 않는 현상 해결
• 성능 향상
• maxMonths 추가: 오늘로부터 특정 개월수만큼만 노출하고자 할 때 설정
• 라이브러리 용량 축소 (78.3 KB -> 17.35 KB)

v0.5.16 @ 2020.11.10.

• 동일 날짜에 여러개의 customDates 클래스를 지정할 수 있도록 수정.

v0.5.14 @ 2020.10.06.

• 캘린더 업데이트시마다 customDates 정보를 축적할지, 또는 매번 새로 갱신할지를 판단하는 옵션 (amassCustomDates) 추가

v0.5.11 @ 2020.08.03.

• holidays, customDates: 지정한 dateFormat을 무시하고 기본 포맷('YYYY-MM-DD')으로만 인식하는 오류 해결.

v0.5.10 @ 2020.07.07.

• selectionTextForSameDate 추가: allowSame인 상태에서 같은날을 여러번 선택했을 때의 별도 텍스트 표시 기능 제공.

v0.5.7 @ 2020.07.03.

• allowRolling 제거
• ignoreOrder가 아닌 경우, 이전값이 새 값보다 클 경우 새 값보다 큰 이전값들 모두를 해제하는 방식으로 교체.

ex1) maxSelection 3인 Several: [ 7.10, 7.20 ] 선택된 상태에서
  - 7.25 선택시 -> [ 7.10, 7.20, 7.25 ]
  - 7.15 선택시 -> [ 7.10, 7.15 ]
  - 7.05 선택시 -> [ 7.05 ]

ex2) maxSelection 3인 Several: [ 7.10, 7.20, 7.25 ] 선택된 상태에서
  - 7.05 선택시 -> [ 7.05, 7.20, 7.25 ]
  - 7.15 선택시 -> [ 7.10, 7.15, 7.25 ]
  - 7.30 선택시 -> [ 7.30 ]

ex3) maxSelection 1인 Range: [[ 7.10 ]] 선택된 상태에서
  - 7.15 선택시 -> [[ 7.10, 7.15 ]]
  - 7.05 선택시 -> [[ 7.05 ]]

ex4) maxSelection 1인 Range: [[ 7.10, 7.20 ]] 선택된 상태에서
  - 7.05 선택시 -> [[ 7.05 ]]
  - 7.15 선택시 -> [[ 7.10, 7.15 ]]
  - 7.30 선택시 -> [[ 7.30 ]]

v0.5.5 @ 2020.05.07.

• cancelable, ignoreOrder 옵션 추가

v0.5.0 @ 2020.03.03.

• Infinite, Spread 캘린더 통합
• range, several의 공통 기능 추출 및 폴더구조 정리
• 무한 스크롤 기능 추가
• 선택된 날짜가 있는 경우 해당 월부터 보여지도록 적용
• day.js 라이브러리 적용 (https://day.js.org/)
• 캘린더 동기화 기능(prop 전달) 추가

v0.1.0 @ 2020.01.29.

• common하지 않은 기능 제거
• ts 적용하여 유지보수를 좀더 용이하게 변경
• pc 버전용 캘린더 추가 (기존에는 infinite scroll 기반의 캘린더만 존재)
• 단일/여정 선택 캘린더가 섞이면서 유지보수가 어려워지는 점을 토대로 component 단위로 캘린더를 선택 할 수 있도록 변경.

v1 histroy (previous version)