diff --git a/README.md b/README.md deleted file mode 120000 index 8b075283..00000000 --- a/README.md +++ /dev/null @@ -1 +0,0 @@ -packages/react-calendar/README.md \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 00000000..d143f2d8 --- /dev/null +++ b/README.md @@ -0,0 +1,216 @@ +[![npm](https://img.shields.io/npm/v/react-calendar.svg)](https://www.npmjs.com/package/react-calendar) ![downloads](https://img.shields.io/npm/dt/react-calendar.svg) [![CI](https://github.com/wojtekmaj/react-calendar/actions/workflows/ci.yml/badge.svg)](https://github.com/wojtekmaj/react-calendar/actions) + +# react-calendar + +
+ +
+ +## Translation Support +[[English](https://github.com/wojtekmaj/react-calendar), [Korean](https://github.com/wojtekmaj/react-calendar/blob/main/languages/korean.md)] + +## Description + +Ultimate calendar for your React app. + +- Pick days, months, years, or even decades +- Supports range selection +- Supports virtually any language +- No moment.js needed + +## tl;dr + +- Install by executing `npm install react-calendar` or `yarn add react-calendar`. +- Import by adding `import Calendar from 'react-calendar'`. +- Use by adding ``. Use `onChange` prop for getting new values. + +## Demo + +A minimal demo page can be found in `sample` directory. + +[Online demo](https://projects.wojtekmaj.pl/react-calendar/) is also available! + +## Before you continue + +react-calendar is under constant development. This documentation is written for react-calendar 4.x branch. If you want to see documentation for other versions of react-calendar, use dropdown on top of GitHub page to switch to an appropriate tag. Here are quick links to the newest docs from each branch: + +- [v3.x](https://github.com/wojtekmaj/react-calendar/blob/v3.x/README.md) +- [v2.x](https://github.com/wojtekmaj/react-calendar/blob/v2.x/README.md) + +## Getting started + +### Compatibility + +Your project needs to use React 16.8 or later. + +react-calendar uses modern web technologies. That's why it's so fast, lightweight and easy to style. This, however, comes at a cost of [supporting only modern browsers](https://caniuse.com/#feat=internationalization). + +#### Legacy browsers + +If you need to support legacy browsers like Internet Explorer 10, you will need to use [Intl.js](https://github.com/andyearnshaw/Intl.js/) or another Intl polyfill along with react-calendar. + +#### My locale isn't supported! What can I do? + +If your locale isn't supported, you can use [Intl.js](https://github.com/andyearnshaw/Intl.js/) or another Intl polyfill along with react-calendar. + +### Installation + +Add react-calendar to your project by executing `npm install react-calendar` or `yarn add react-calendar`. + +### Usage + +Here's an example of basic usage: + +```tsx +import { useState } from 'react'; +import Calendar from 'react-calendar'; + +type ValuePiece = Date | null; + +type Value = ValuePiece | [ValuePiece, ValuePiece]; + +function MyApp() { + const [value, onChange] = useState(new Date()); + + return ( +
+ +
+ ); +} +``` + +Check the [sample directory](https://github.com/wojtekmaj/react-calendar/tree/main/sample) in this repository for a full working example. For more examples and more advanced use cases, check [Recipes](https://github.com/wojtekmaj/react-calendar/wiki/Recipes) in [react-calendar Wiki](https://github.com/wojtekmaj/react-calendar/wiki). + +### Custom styling + +If you want to use default react-calendar styling to build upon it, you can import react-calendar's styles by using: + +```ts +import 'react-calendar/dist/Calendar.css'; +``` + +## User guide + +### Calendar + +Displays a complete, interactive calendar. + +#### Props + +| Prop name | Description | Default value | Example values | +| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| activeStartDate | The beginning of a period that shall be displayed. If you wish to use react-calendar in an uncontrolled way, use `defaultActiveStartDate` instead. | (today) | `new Date(2017, 0, 1)` | +| allowPartialRange | Whether to call onChange with only partial result given `selectRange` prop. | `false` | `true` | +| calendarType | Type of calendar that should be used. Can be `'gregory`, `'hebrew'`, `'islamic'`, `'iso8601'`. Setting to `"gregory"` or `"hebrew"` will change the first day of the week to Sunday. Setting to `"islamic"` will change the first day of the week to Saturday. Setting to `"islamic"` or `"hebrew"` will make weekends appear on Friday to Saturday. | Type of calendar most commonly used in a given locale | `'iso8601'` | +| className | Class name(s) that will be added along with `"react-calendar"` to the main react-calendar `
` element. | n/a |
  • String: `"class1 class2"`
  • Array of strings: `["class1", "class2 class3"]`
| +| defaultActiveStartDate | The beginning of a period that shall be displayed by default. If you wish to use react-calendar in a controlled way, use `activeStartDate` instead. | (today) | `new Date(2017, 0, 1)` | +| defaultValue | Calendar value that shall be selected initially. Can be either one value or an array of two values. If you wish to use react-calendar in a controlled way, use `value` instead. | n/a |
  • Date: `new Date()`
  • An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]` | +| defaultView | Determines which calendar view shall be opened initially. Does not disable navigation. Can be `"month"`, `"year"`, `"decade"` or `"century"`. If you wish to use react-calendar in a controlled way, use `view` instead. | The most detailed view allowed | `"year"` | +| formatDay | Function called to override default formatting of day tile labels. Can be used to use your own formatting function. | (default formatter) | `(locale, date) => formatDate(date, 'd')` | +| formatLongDate | Function called to override default formatting of day tile `abbr` labels. Can be used to use your own formatting function. | (default formatter) | `(locale, date) => formatDate(date, 'dd MMM YYYY')` | +| formatMonth | Function called to override default formatting of month names. Can be used to use your own formatting function. | (default formatter) | `(locale, date) => formatDate(date, 'MMM')` | +| formatMonthYear | Function called to override default formatting of months and years. Can be used to use your own formatting function. | (default formatter) | `(locale, date) => formatDate(date, 'MMMM YYYY')` | +| formatShortWeekday | Function called to override default formatting of weekday names (shortened). Can be used to use your own formatting function. | (default formatter) | `(locale, date) => formatDate(date, 'dd')` | +| formatWeekday | Function called to override default formatting of weekday names. Can be used to use your own formatting function. | (default formatter) | `(locale, date) => formatDate(date, 'dd')` | +| formatYear | Function called to override default formatting of year in the top navigation section. Can be used to use your own formatting function. | (default formatter) | `(locale, date) => formatDate(date, 'YYYY')` | +| goToRangeStartOnSelect | Whether to go to the beginning of the range when selecting the end of the range. | `true` | `false` | +| inputRef | A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to main `
    ` rendered by `` component. | n/a |
    • Function:
      `(ref) => { this.myCalendar = ref; }`
    • Ref created using `createRef`:
      `this.ref = createRef();`
      …
      `inputRef={this.ref}`
    • Ref created using `useRef`:
      `const ref = useRef();`
      …
      `inputRef={ref}`
    | +| locale | Locale that should be used by the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). **Note**: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client. | Server locale/User's browser settings | `"hu-HU"` | +| maxDate | Maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although react-calendar will ensure that no later date is selected. | n/a | Date: `new Date()` | +| maxDetail | The most detailed view that the user shall see. View defined here also becomes the one on which clicking an item will select a date and pass it to onChange. Can be `"month"`, `"year"`, `"decade"` or `"century"`. | `"month"` | `"year"` | +| minDate | Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although react-calendar will ensure that no earlier date is selected. | n/a | Date: `new Date()` | +| minDetail | The least detailed view that the user shall see. Can be `"month"`, `"year"`, `"decade"` or `"century"`. | `"century"` | `"decade"` | +| navigationAriaLabel | `aria-label` attribute of a label rendered on calendar navigation bar. | n/a | `"Go up"` | +| navigationAriaLive | `aria-live` attribute of a label rendered on calendar navigation bar. | `undefined` | `"polite"` | +| navigationLabel | Content of a label rendered on calendar navigation bar. | (default label) | ``({ date, label, locale, view }) => alert(`Current view: ${view}, date: ${date.toLocaleDateString(locale)}`)`` | +| next2AriaLabel | `aria-label` attribute of the "next on higher level" button on the navigation pane. | n/a | `"Jump forwards"` | +| next2Label | Content of the "next on higher level" button on the navigation pane. Setting the value explicitly to null will hide the icon. | `"»"` |
    • String: `"»"`
    • React element: ``
    | +| nextAriaLabel | `aria-label` attribute of the "next" button on the navigation pane. | n/a | `"Next"` | +| nextLabel | Content of the "next" button on the navigation pane. Setting the value explicitly to null will hide the icon. | `"›"` |
    • String: `"›"`
    • React element: ``
    | +| onActiveStartDateChange | Function called when the user navigates from one view to another using previous/next button. Note that this function will not be called when e.g. drilling up from January 2021 to 2021 or drilling down the other way around.
    `action` signifies the reason for active start date change and can be one of the following values: `"prev"`, `"prev2"`, `"next"`, `"next2"`, `"drillUp"`, `"drillDown"`, `"onChange"`. | n/a | `({ action, activeStartDate, value, view }) => alert('Changed view to: ', activeStartDate, view)` | +| onChange | Function called when the user clicks an item (day on month view, month on year view and so on) on the most detailed view available. | n/a | `(value, event) => alert('New date is: ', value)` | +| onClickDay | Function called when the user clicks a day. | n/a | `(value, event) => alert('Clicked day: ', value)` | +| onClickDecade | Function called when the user clicks a decade. | n/a | `(value, event) => alert('Clicked decade: ', value)` | +| onClickMonth | Function called when the user clicks a month. | n/a | `(value, event) => alert('Clicked month: ', value)` | +| onClickWeekNumber | Function called when the user clicks a week number. | n/a | `(weekNumber, date, event) => alert('Clicked week: ', weekNumber, 'that starts on: ', date)` | +| onClickYear | Function called when the user clicks a year. | n/a | `(value, event) => alert('Clicked year: ', value)` | +| onDrillDown | Function called when the user drills down by clicking a tile. | n/a | `({ activeStartDate, view }) => alert('Drilled down to: ', activeStartDate, view)` | +| onDrillUp | Function called when the user drills up by clicking drill up button. | n/a | `({ activeStartDate, view }) => alert('Drilled up to: ', activeStartDate, view)` | +| onViewChange | Function called when the user navigates from one view to another using drill up button or by clicking a tile.
    `action` signifies the reason for view change and can be one of the following values: `"prev"`, `"prev2"`, `"next"`, `"next2"`, `"drillUp"`, `"drillDown"`, `"onChange"`. | n/a | `({ action, activeStartDate, value, view }) => alert('New view is: ', view)` | +| prev2AriaLabel | `aria-label` attribute of the "previous on higher level" button on the navigation pane. | n/a | `"Jump backwards"` | +| prev2Label | Content of the "previous on higher level" button on the navigation pane. Setting the value explicitly to null will hide the icon. | `"«"` |
    • String: `"«"`
    • React element: ``
    | +| prevAriaLabel | `aria-label` attribute of the "previous" button on the navigation pane. | n/a | `"Previous"` | +| prevLabel | Content of the "previous" button on the navigation pane. Setting the value explicitly to null will hide the icon. | `"‹"` |
    • String: `"‹"`
    • React element: ``
    | +| returnValue | Which dates shall be passed by the calendar to the onChange function and onClick{Period} functions. Can be `"start"`, `"end"` or `"range"`. The latter will cause an array with start and end values to be passed. | `"start"` | `"range"` | +| selectRange | Whether the user shall select two dates forming a range instead of just one. **Note**: This feature will make react-calendar return array with two dates regardless of returnValue setting. | `false` | `true` | +| showDoubleView | Whether to show two months/years/… at a time instead of one. Defaults `showFixedNumberOfWeeks` prop to be `true`. | `false` | `true` | +| showFixedNumberOfWeeks | Whether to always show fixed number of weeks (6). Forces `showNeighboringMonth` prop to be `true`. | `false` | `true` | +| showNavigation | Whether a navigation bar with arrows and title shall be rendered. | `true` | `false` | +| showNeighboringCentury | Whether decades from next century shall be rendered to fill the entire last row in. | `false` | `true` | +| showNeighboringDecade | Whether years from next decade shall be rendered to fill the entire last row in. | `false` | `true` | +| showNeighboringMonth | Whether days from previous or next month shall be rendered if the month doesn't start on the first day of the week or doesn't end on the last day of the week, respectively. | `true` | `false` | +| showWeekNumbers | Whether week numbers shall be shown at the left of MonthView or not. | `false` | `true` | +| tileClassName | Class name(s) that will be applied to a given calendar item (day on month view, month on year view and so on). | n/a |
    • String: `"class1 class2"`
    • Array of strings: `["class1", "class2 class3"]`
    • Function: `({ activeStartDate, date, view }) => view === 'month' && date.getDay() === 3 ? 'wednesday' : null`
    | +| tileContent | Allows to render custom content within a given calendar item (day on month view, month on year view and so on). | n/a |
    • String: `"Sample"`
    • React element: ``
    • Function: `({ activeStartDate, date, view }) => view === 'month' && date.getDay() === 0 ?

      It's Sunday!

      : null`
    | +| tileDisabled | Pass a function to determine if a certain day should be displayed as disabled. | n/a | `({ activeStartDate, date, view }) => date.getDay() === 0` | +| value | Calendar value. Can be either one value or an array of two values. If you wish to use react-calendar in an uncontrolled way, use `defaultValue` instead. | n/a |
    • Date: `new Date()`
    • String: `2017-01-01`
    • An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`
    • An array of strings: `['2017-01-01', '2017-08-01']`
    | +| view | Determines which calendar view shall be opened. Does not disable navigation. Can be `"month"`, `"year"`, `"decade"` or `"century"`. If you wish to use react-calendar in an uncontrolled way, use `defaultView` instead. | The most detailed view allowed | `"year"` | + +### MonthView, YearView, DecadeView, CenturyView + +Displays a given month, year, decade and a century, respectively. + +#### Props + +| Prop name | Description | Default value | Example values | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| activeStartDate | The beginning of a period that shall be displayed. | n/a | `new Date(2017, 0, 1)` | +| hover | The date over which the user is hovering. Used only when `selectRange` is enabled, to render a “WIP” range when the user is selecting range. | n/a | `new Date(2017, 0, 1)` | +| maxDate | Maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although react-calendar will ensure that no later date is selected. | n/a | Date: `new Date()` | +| minDate | Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although react-calendar will ensure that no earlier date is selected. | n/a | Date: `new Date()` | +| onClick | Function called when the user clicks an item (day on month view, month on year view and so on). | n/a | `(value) => alert('New date is: ', value)` | +| tileClassName | Class name(s) that will be applied to a given calendar item (day on month view, month on year view and so on). | n/a |
    • String: `"class1 class2"`
    • Array of strings: `["class1", "class2 class3"]`
    • Function: `({ date, view }) => view === 'month' && date.getDay() === 3 ? 'wednesday' : null`
    | +| tileContent | Allows to render custom content within a given item (day on month view, month on year view and so on). **Note**: For tiles with custom content you might want to set fixed height of `react-calendar__tile` to ensure consistent layout. | n/a | `({ date, view }) => view === 'month' && date.getDay() === 0 ?

    It's Sunday!

    : null` | +| value | Calendar value. Can be either one value or an array of two values. | n/a |
    • Date: `new Date()`
    • An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`
    • String: `2017-01-01`
    • An array of strings: `['2017-01-01', '2017-08-01']`
    | + +## Useful links + +- [react-calendar Wiki](https://github.com/wojtekmaj/react-calendar/wiki) + +## License + +The MIT License. + +## Author + + + + + + +
    + Wojciech Maj + + Wojciech Maj +
    + +## Thank you + +### Sponsors + +Thank you to all our sponsors! [Become a sponsor](https://opencollective.com/react-calendar#sponsor) and get your image on our README on GitHub. + + + +### Backers + +Thank you to all our backers! [Become a backer](https://opencollective.com/react-calendar#backer) and get your image on our README on GitHub. + + + +### Top Contributors + +Thank you to all our contributors that helped on this project! + +![Top Contributors](https://opencollective.com/react-calendar/contributors.svg?width=890&button=false) diff --git a/languages/korean.md b/languages/korean.md new file mode 100644 index 00000000..4d25d25c --- /dev/null +++ b/languages/korean.md @@ -0,0 +1,219 @@ +[![npm](https://img.shields.io/npm/v/react-calendar.svg)](https://www.npmjs.com/package/react-calendar) ![downloads](https://img.shields.io/npm/dt/react-calendar.svg) [![CI](https://github.com/wojtekmaj/react-calendar/actions/workflows/ci.yml/badge.svg)](https://github.com/wojtekmaj/react-calendar/actions) + +# 리액트-캘린더 + +
    + +
    + +## 번역 지원 +[[영어](https://github.com/wojtekmaj/react-calendar), [한국어](https://github.com/wojtekmaj/react-calendar/blob/main/languages/korean.md)] + +## 설명 + +리액트 앱을 위한 최고의 달력 + +- 날짜를 선택할 수 있습니다.(일, 월, 년, 수십년 단위도) +- 범위 선택도 지원합니다. +- 대부분의 언어를 지원합니다. +- Moment.js가 필요하지 않습니다. + +## 요약 + +- `npm install react-calendar` 혹은 `yarn add react-calendar` 를 통해 설치하십시오. +- Import by adding `import Calendar from 'react-calendar'`. +- `import Calendar from 'react-calendar'` 추가하여 임포트 하십시오. +- ``를 추가하여 사용하십시오. `onChange` prop값을 통해 새로운 값을 얻을 수 있습니다. + +## 데모 + +간단한 데모 페이지는 `sample` 디렉토리에서 찾을 수 있습니다. + +[온라인 데모](https://projects.wojtekmaj.pl/react-calendar/) 에서도 확인할 수 있습니다. + +## 시작하기 전에 + +리액트 캘린더는 지속적으로 개발 중입니다. 이 문서는 리액트 캘린더 4.x 브랜치로서 작성되었습니다. 다른 버전의 리액트 캘린더에 대한 관련 문서를 보려면, GitHub 페이지 상단의 드롭다운을 사용하여 적절한 태그로 전환하세요. 다음은 각 브랜치의 최신 문서에 대한 링크입니다. + +- [v3.x](https://github.com/wojtekmaj/react-calendar/blob/v3.x/README.md) +- [v2.x](https://github.com/wojtekmaj/react-calendar/blob/v2.x/README.md) + +## 시작해보기 + +### 호환성 + +프로젝트는 React의 16.8 이상을 사용해야 합니다. + +리액트 캘린더는 최신 웹 기술을 사용합니다. 그렇기 때문에 매우 빠르고 가벼우며 스타일링이 간단합니다. 그러나 이는 [최신 브라우저들만 지원](https://caniuse.com/#feat=internationalization)하고 있습니다. + +#### 기존 / 레거시 브라우저 + +인터넷 익스프롤러 10같은 기존 / 레거시 브라우저를 지원해야한다면, [Intl.js](https://github.com/andyearnshaw/Intl.js/) 혹은 다른 Intl polyfill을 리액트 캘린더와 함께 사용해야 할 것입니다. + +#### 내 언어 / 로케일은 지원을 하지않습니다! 어떻게 해야하나요? + +당신의 언어 / 로케일이 지원되지 않는다면, [Intl.js](https://github.com/andyearnshaw/Intl.js/) 혹은 다른 Intl polyfill을 리액트 캘린더와 사용할 수 있습니다. + +### 설치 + +`npm install react-calendar` 혹은 `yarn add react-calendar`를 실행하여, 프로젝트에 캘린더를 추가하세요. + +### 사용법 + +간단한 사용법으로는 아래와 같습니다: + +```tsx +import { useState } from 'react'; +import Calendar from 'react-calendar'; + +type ValuePiece = Date | null; + +type Value = ValuePiece | [ValuePiece, ValuePiece]; + +function MyApp() { + const [value, onChange] = useState(new Date()); + + return ( +
    + +
    + ); +} +``` + + +작업 예제는 [샘플](https://github.com/wojtekmaj/react-calendar/tree/main/sample) 디렉토리를 통해 확인해보세요. +더 많은 예시와 고급 사용 예제들은 [react-calendar Wiki](https://github.com/wojtekmaj/react-calendar/wiki)안에 있는 [Recipes](https://github.com/wojtekmaj/react-calendar/wiki/Recipes)를 참고해보세요. + +### 커스텀 스타일링 + +기존 리액트 캘린더 위에 별도의 스타일링을 하고 싶다면, 다음을 사용하여 리액트 캘린더의 스타일을 가져올 수 있습니다: + +```ts +import 'react-calendar/dist/Calendar.css'; +``` + +## 사용자 가이드 + +### 캘린더 + +완전한 상호작용하는 캘린더를 표시합니다. + +#### Props + +| Prop 이름 | 설명 | Default value(기본값) | Example values(예시 값) | +| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| activeStartDate | 표시될 기간의 시작입니다. 만약 리액트 캘린더를 통제되지 않는 방식으로 사용하려면 `defaultActiveStartDate` 대신에 사용하세요. | (today) | `new Date(2017, 0, 1)` | +| allowPartialRange | `selectRange` prop이 주어지면 부분적인 결과만 사용하여 onChange를 호출할지 여부입니다. | `false` | `true` | +| calendarType | 사용해야하는 달력의 유형입니다. `'그레고리(gregory)'`, `'히브리(hebrew)'`, `'이슬람(islamic)'`, `'iso8601'`이 있습니다. `'그레고리(gregory)'` 또는 `'히브리(hebrew)'`로 설정하면 주의 첫째날이 토요일로 변경합니다. `'이슬람(islamic)'` 또는 `'히브리(hebrew)'`로 설정하면 주말이 금요일부터 토요일까지 표시됩니다. | 해당 지역에서 가장 일반적으로 사용되는 달력 유형 | `'iso8601'` | +| className | 기본 리액트 캘린더 `div` 요소에 `"react-calendar"`와 함께 추가될 클래스 이름입니다. | n/a |
    • 문자열: `"class1 class2"`
    • 문자열 배열: `["class1", "class2 class3"]`
    | +| defaultActiveStartDate | 기본적으로 표시되는 기간의 시작입니다. 제어된 방식으로 리액트 캘린더를 사용하려면, `activeStartDate`를 대신 사용하세요. | (today) | `new Date(2017, 0, 1)` | +| defaultValue | 처음에 선택해야 하는 달력 값입니다. 하나의 값이거나 두 값을 갖고 있는 배열일 수 있습니다. 제어된 방식으로 리액트 캘린더를 사용하려면 `value`를 대신 사용하세요. | n/a |
    • 날짜: `new Date()`
    • 날짜의 배열: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]` | +| defaultView | 처음에 열 달력의 뷰를 결정합니다. 탐색을 비활성하지 않습니다. `"월"`, `"연도"`, `"10년"` 또는 `"1세기"`일 수 있습니다. 제어된 방식으로 리액트 캘린더를 사용하려면 `view`를 대신 사용하세요. | 가장 상세한 보기가 허용됨 | `"year"` | +| formatDay | 요일(Date) 타일 레이블의 기본 형식을 재정의하기 위해 호출되는 함수입니다. 자신만의 포맷팅 기능을 위해 사용됩니다. | (기본 포맷터) | `(locale, date) => formatDate(date, 'd')` | +| formatLongDate | 요일(Date) 타일 `abbr` 라벨의 기본 형식을 재정의하기 위해 호출되는 함수입니다. 자신만의 포맷팅 기능을 위해 사용됩니다. | (기본 포맷터) | `(locale, date) => formatDate(date, 'dd MMM YYYY')` | +| formatMonth | 월(month) 이름의 기본 형식을 재정의하기 위해 호출되는 함수입니다. 자신만의 포맷팅 기능을 위해 사용됩니다. | (기본 포맷터) | `(locale, date) => formatDate(date, 'MMM')` | +| formatMonthYear | 월(month)과 연도(year)의 기본 형식을 재정의하기 위해 호출되는 함수입니다. 자신만의 포맷팅 기능을 위해 사용됩니다. | (기본 포맷터) | `(locale, date) => formatDate(date, 'MMMM YYYY')` | +| formatShortWeekday | 요일(Date) 이름의 기본 형식(축약형)을 재정의하기 위해 호출되는 함수입니다. 자신만의 포맷팅 기능을 위해 사용됩니다. | (기본 포맷터) | `(locale, date) => formatDate(date, 'dd')` | +| formatWeekday | 요일(Date) 이름의 기본 형식을 재정의하기 위해 호출되는 함수입니다. 자신만의 포맷팅 기능을 위해 사용됩니다. | (기본 포맷터) | `(locale, date) => formatDate(date, 'dd')` | +| formatYear | 상단 탐색 섹션에서 연도(Year)의 기본 형식을 재정의하기 위해 호출되는 함수입니다. 자신만의 포맷팅 기능을 위해 사용됩니다. | (기본 포맷터) | `(locale, date) => formatDate(date, 'YYYY')` | +| goToRangeStartOnSelect | 범위의 `끝`을 선택할 때 범위의 `시작` 부분으로 이동할지 여부입니다. | `true` | `false` | +| inputRef | [ref](https://reactjs.org/docs/refs-and-the-dom.html)처럼 동작하지만 `` 구성 요소에 의해 렌더링된 기본 `
      `에 전달되는 prop 입니다. | n/a |
      • 함수:
        `(ref) => { this.myCalendar = ref; }`
      • `createRef`을 사용하여 생성된 Ref:
        `this.ref = createRef();`
        …
        `inputRef={this.ref}`
      • `useRef`을 사용하여 생성된 Ref:
        `const ref = useRef();`
        …
        `inputRef={ref}`
      | +| locale | 달력에서 사용해야 하는 로케일입니다. 모든 [IETF 언어 태그](https://en.wikipedia.org/wiki/IETF_language_tag)일 수 있습니다. **참고**: SSR을 사용할 때 이 prop 을 설정하면 서버와 클라이언트 간의 로케일 불일치로 인해 발생하는 하이드레이션 에러를 해결하는 데 도움이 될 수 있습니다. | 서버 로케일 / 사용자의 브라우저 설정 | `"hu-HU"` | +| maxDate | 사용자가 선택할 수 있는 최대 날짜입니다. maxDate와 부분적으로 겹치는 기간도 선택할 수 있지만, 리액트 캘린더는 이후 날짜가 선택되지 않도록 보장합니다. | n/a | 날짜: `new Date()` | +| maxDetail | 사용자가 보게 될 가장 자세한 뷰 입니다. 여기에 정의된 뷰도 항목을 클릭하면 날짜가 선택되어 onChange에 전달되는 뷰가 됩니다. `"월"`, `"연도"`, `"10년"` 또는 `"1세기"`일 수 있습니다. | `"month"` | `"year"` | +| minDate | 사용자가 선택할 수 있는 최소(Minimum) 날짜입니다. minDate와 부분적으로 겹치는 기간도 선택할 수 있지만, 리액트 캘린더는 이전 날짜가 선택되지 않도록 보장합니다. | n/a | Date: `new Date()` | +| minDetail | 사용자가 볼 수 있는 최소한의 상세 보기입니다. `"월"`, `"연도"`, `"10년"` 또는 `"1세기"`일 수 있습니다. | `"century"` | `"decade"` | +| navigationAriaLabel | 캘린더 네비게이션바(Navigation bar)에 렌더링되는 라벨의 `aria-label` 속성입니다. | n/a | `"Go up"` | +| navigationAriaLive | 캘린더 네비게이션바(Navigation bar)에 렌더링된 라벨의 `aria-live` 속성입니다. | `undefined` | `"polite"` | +| navigationLabel | 캘린더 네비게이션바(Navigation bar)에 렌더링된 라벨 콘텐츠입니다. | (기본 라벨) | ``({ date, label, locale, view }) => alert(`Current view: ${view}, date: ${date.toLocaleDateString(locale)}`)`` | +| next2AriaLabel | 네비게이션바(Navigation bar)에 있는 "next on high level (다음 상위 수준)" 버튼의 `aria-label` 속성입니다. | n/a | `"Jump forwards"` | +| next2Label | 네비게이션바(Navigation pane)의 "next on high level(다음 상위 수준)" 버튼의 콘텐츠입니다. 값을 명시적으로 null로 설정하면 아이콘이 숨겨집니다. | `"»"` |
      • 문자열: `"»"`
      • 리액트 element: ``
      | +| nextAriaLabel | 네비게이션바(Navigation pane)에 있는 "next" 버튼의 aria-label 속성입니다. | n/a | `"Next"` | +| nextLabel | 네비게이션바(Navigation pane)의 "next" 버튼 내용입니다. 값을 명시적으로 null로 설정하면 아이콘이 숨겨집니다. | `"›"` |
      • 문자열: `"›"`
      • 리액트 element: ``
      | +| onActiveStartDateChange | 사용자가 이전(previous)/다음(next) 버튼을 사용하여 한 보기에서 다른 보기로 이동할 때 호출되는 함수입니다. 예를 들어 다음과 같은 경우에는 이 함수가 호출되지 않습니다. 2021년 1월부터 2021년까지 드릴업하거나 그 반대로 드릴다운합니다.
      `action`은 활성 시작 날짜 변경 이유를 나타내며 `"prev"`, `"prev2"` 값 중 하나일 수 있습니다. , `"다음"`, `"next2"`, `"drillUp"`, `"drillDown"`, ``onChange"`. | n/a | `({ action, activeStartDate, value, view }) => alert('Changed view to: ', activeStartDate, view)` | +| onChange | 가장 상세뷰에서 사용자가 항목(월일 보기, 연도 보기 등)을 클릭하면 호출되는 함수입니다. | n/a | `(value, event) => alert('New date is: ', value)` | +| onClickDay | 사용자가 날짜를 클릭하면 호출되는 함수입니다. | n/a | `(value, event) => alert('Clicked day: ', value)` | +| onClickDecade | 사용자가 10년(decade)을 클릭하면 호출되는 함수입니다. | n/a | `(value, event) => alert('Clicked decade: ', value)` | +| onClickMonth | 사용자가 월(month)을 클릭하면 호출되는 함수입니다. | n/a | `(value, event) => alert('Clicked month: ', value)` | +| onClickWeekNumber | 사용자가 주(week) 번호를 클릭하면 호출되는 함수입니다. | n/a | `(weekNumber, date, event) => alert('Clicked week: ', weekNumber, 'that starts on: ', date)` | +| onClickYear | 사용자가 연도(year)를 클릭하면 호출되는 함수입니다. | n/a | `(value, event) => alert('Clicked year: ', value)` | +| onDrillDown | 사용자가 타일을 클릭하여 드릴다운할 때 호출되는 함수입니다. | n/a | `({ activeStartDate, view }) => alert('Drilled down to: ', activeStartDate, view)` | +| onDrillUp | 사용자가 드릴업 버튼을 클릭하여 드릴업할 때 호출되는 함수입니다. | n/a | `({ activeStartDate, view }) => alert('Drilled up to: ', activeStartDate, view)` | +| onViewChange | 사용자가 드릴업 버튼을 사용하거나 타일을 클릭하여 한 뷰에서 다른 뷰로 이동할 때 호출되는 함수입니다.
      `action`은 뷰 변경 이유를 나타내며 다음 값 중 하나일 수 있습니다: `"prev"`, ` "prev2"`, `"next"`, `"next2"`, `"drillUp"`, `"drillDown"`, `"onChange"`. | n/a | `({ action, activeStartDate, value, view }) => alert('New view is: ', view)` | +| prev2AriaLabel | 네비게이션바(Navigation pane)에 있는 "previous on higher level(상위 수준에서 이전)" 버튼의 `aria-label` 속성입니다. | n/a | `"Jump backwards"` | +| prev2Label | 네비게이션바(Navigation pane)의 "previous on higher level(상위 수준에서 이전)" 버튼의 내용입니다. 값을 명시적으로 null로 설정하면 아이콘이 숨겨집니다. | `"«"` |
      • 문자열: `"«"`
      • 리액트 element: ``
      | +| prevAriaLabel | 네비게이션바(Navigation pane)에 있는 'previous(이전)' 버튼의 `aria-label` 속성입니다. | n/a | `"Previous"` | +| prevLabel | 네비게이션바(Navigation pane)의 "previous(이전)" 버튼 내용입니다. 값을 명시적으로 null로 설정하면 아이콘이 숨겨집니다. | `"‹"` |
      • 문자열: `"‹"`
      • 리액트 element: ``
      | +| returnValue | 캘린더에 의해 onChange 함수 및 onClick{Period} 함수로 전달되는 date(날짜)입니다. `"start(시작)"`, `"end(끝)"` 또는 `"range(범위)"`일 수 있습니다. 후자는 start(시작) 및 end(끝) 값이 포함된 배열이 전달되도록 합니다. | `"start"` | `"range"` | +| selectRange | 사용자가 하나의 날짜 대신 범위를 형성하는 두 개의 날짜를 선택해야 하는지 여부입니다. **참고**: 이 기능은 returnValue 설정에 관계없이 두 날짜로 리액트 캘린더 return(반환) 배열을 만듭니다. | `false` | `true` | +| showDoubleView | 한 번이 아닌 2달/2년/...을 한 번에 표시할지 여부입니다. 기본값 `showFixedNumberOfWeeks` prop 은 `true`입니다. | `false` | `true` | +| showFixedNumberOfWeeks | 항상 고정된 week(주) 숫자(6)를 표시할지 여부입니다. `showNeighboringMonth` prop 이 `true`가 되도록 강제합니다. | `false` | `true` | +| showNavigation | arrow(화살표)와 제목이 있는 네비게이션바를 렌더링할지 여부입니다. | `true` | `false` | +| showNeighboringCentury | 다음 centery(세기)부터 수십 년을 렌더링하여 마지막 행 전체를 채울지 여부입니다. | `false` | `true` | +| showNeighboringDecade | 마지막 행 전체를 채우기 위해 다음 10년의 연도를 렌더링할지 여부입니다. | `false` | `true` | +| showNeighboringMonth | 해당 month(월)이 week(주)의 첫 번째 날에 시작하지 않거나 week(주)의 마지막 날에 끝나지 않는 경우 이전 달 또는 다음 달의 날짜를 렌더링할지 여부입니다. | `true` | `false` | +| showWeekNumbers | MonthView 왼쪽에 week(주) 번호를 표시할지 여부입니다. | `false` | `true` | +| tileClassName | 특정 달력 항목에 적용될 클래스 이름(월별 날짜 보기, 연간 월별 보기 등) | n/a |
      • 문자열: `"class1 class2"`
      • 문자열 배열: `["class1", "class2 class3"]`
      • 함수: `({ activeStartDate, date, view }) => view === 'month' && date.getDay() === 3 ? 'wednesday' : null`
      | +| tileContent | 특정 달력 항목 내에서 사용자 정의 콘텐츠를 렌더링할 수 있습니다(월별 보기, 월별 보기 등). | n/a |
      • 문자열: `"Sample"`
      • 리액트 element: ``
      • 함수: `({ activeStartDate, date, view }) => view === 'month' && date.getDay() === 0 ?

        It's Sunday!

        : null`
      | +| tileDisabled | 특정 날짜를 비활성화된 것으로 표시해야 하는지 결정하는 함수를 전달합니다. | n/a | `({ activeStartDate, date, view }) => date.getDay() === 0` | +| value | 캘린더 값. 하나의 값이거나 두 값의 배열일 수 있습니다. 제어되지 않은 리액트 캘린더를 사용하려면 `defaultValue`를 대신 사용하세요. | n/a |
      • 날짜: `new Date()`
      • 문자열: `2017-01-01`
      • 날짜 배열: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`
      • 문자열 배열: `['2017-01-01', '2017-08-01']`
      | +| view | 어떤 달력 뷰를 열 것인지 결정합니다. 네비게이션을 비활성화하지 않습니다. `"월"`, `"연도"`, `"10년"` 또는 `"세기"`일 수 있습니다. 제어되지않은 방식으로 리액트 캘린더를 사용하려면 `defaultView`를 대신 사용하세요. | 가장 자세한 뷰의 허용 | `"year"` | + +### 월별뷰(MonthView), 연간뷰(YearView), 10년별뷰(DecadeView), 세기별뷰(CenturyView) + +주어진 월, 연도, 10년, 1세기를 각각 표시합니다. + +#### Props + +| Prop 이름 | 설명 | Default value(기본값) | Example values(예시값) | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| activeStartDate | 표시할 기간의 시작입니다. | n/a | `new Date(2017, 0, 1)` | +| hover | 사용자가 마우스를 올려놓은 날짜입니다. 사용자가 범위를 선택할 때 'WIP' 범위를 렌더링하기 위해 'selectRange'가 활성화된 경우에만 사용됩니다. | n/a | `new Date(2017, 0, 1)` | +| maxDate | 사용자가 선택할 수 있는 maximum(최대) 날짜입니다. maxDate와 부분적으로 겹치는 기간도 선택할 수 있지만, 리액트 캘린더는 이후 날짜가 선택되지 않도록 보장합니다. | n/a | 날짜: `new Date()` | +| minDate | 사용자가 선택할 수 있는 minimum(최소) 날짜입니다. minDate와 부분적으로 겹치는 기간도 선택할 수 있지만, 리액트 캘린더는 이전 날짜가 선택되지 않도록 보장합니다. | n/a | 날짜: `new Date()` | +| onClick | 사용자가 항목(월별 date(일) 보기, 연도별 month(월) 보기 등)을 클릭하면 호출되는 함수입니다. | n/a | `(value) => alert('New date is: ', value)` | +| tileClassName | 특정 달력 항목에 적용될 클래스 이름(월별 날짜 보기, 연간 월별 보기 등) | n/a |
      • 문자열: `"class1 class2"`
      • 문자열 배열: `["class1", "class2 class3"]`
      • 함수: `({ date, view }) => view === 'month' && date.getDay() === 3 ? 'wednesday' : null`
      | +| tileContent | 특정 항목 내에서 사용자 정의 콘텐츠를 렌더링할 수 있습니다(일별 월별 보기, 월별 연간 보기 등). **참고**: 맞춤 콘텐츠가 포함된 타일의 경우 일관된 레이아웃을 보장하기 위해 `react-calendar__tile`의 고정 높이를 설정하는 것이 좋습니다. | n/a | `({ date, view }) => view === 'month' && date.getDay() === 0 ?

      It's Sunday!

      : null` | +| value | 캘린더 값. 하나의 값이거나 두 값의 배열일 수 있습니다. | n/a |
      • 날짜: `new Date()`
      • 날짜 배열: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`
      • 문자열: `2017-01-01`
      • 문자열 배열: `['2017-01-01', '2017-08-01']`
      | + +## 유용한 링크 + +- [react-calendar Wiki](https://github.com/wojtekmaj/react-calendar/wiki) + +## 라이센스 + +The MIT License. + +## 작성자 + + + + + + +
      + Wojciech Maj + + Wojciech Maj +
      + +## 감사합니다. + +### 스폰서 + +모든 후원자분들께 감사드립니다! [스폰서가 되어](https://opencollective.com/react-calendar#sponsor) GitHub의 README에서 이미지를 받으세요. + + + +### 후원자 + +모든 후원자분들께 감사드립니다! [후원자가 되어](https://opencollective.com/react-calendar#backer) GitHub의 README에서 이미지를 받으세요. + + + +### 탑 기여자 + +이 프로젝트에 도움을 주신 모든 기여자에게 감사드립니다! + +![Top Contributors](https://opencollective.com/react-calendar/contributors.svg?width=890&button=false) diff --git a/packages/react-calendar/README.md b/packages/react-calendar/README.md index f0acae92..d143f2d8 100644 --- a/packages/react-calendar/README.md +++ b/packages/react-calendar/README.md @@ -6,6 +6,11 @@
      +## Translation Support +[[English](https://github.com/wojtekmaj/react-calendar), [Korean](https://github.com/wojtekmaj/react-calendar/blob/main/languages/korean.md)] + +## Description + Ultimate calendar for your React app. - Pick days, months, years, or even decades