diff --git a/zh-cn/react-native-calendars.md b/zh-cn/react-native-calendars.md index 4c2b91c7de5107a3eb9d1a524d6cf354be6f88ec..9b4b2fca2338869cc8f0d0c98144d381aba4b92b 100644 --- a/zh-cn/react-native-calendars.md +++ b/zh-cn/react-native-calendars.md @@ -26,14 +26,14 @@ npm install --save react-native-calendars@1.1304.1 #### **yarn** ```bash -yarn install --save react-native-calendars@1.1304.1 +yarn add --save react-native-calendars@1.1304.1 ``` 下面的代码展示了这个库的基本使用场景： ```js import React, { useState } from "react"; -import { Calendar, CalendarList, Agenda } from "react-native-calendars"; +import { Calendar, CalendarList, Agenda ,AgendaList,CalendarProvider,ExpandableCalendar,Timeline,WeekCalendar} from "react-native-calendars"; import { View, StyleSheet } from "react-native"; const MySvgComponent = () => { @@ -52,8 +52,41 @@ const MySvgComponent = () => { }, }} /> + + + + + + ); + }; const styles = StyleSheet.create({ @@ -83,14 +116,45 @@ export default MySvgComponent; > [!tip] "Platform"列表示该属性在原三方库上支持的平台。 > [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +### Agenda + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------ | ---------------------------------------------------------------------------------------------------------- | -------------------- | -------- | -------- | ----------------- | +| items | the list of items that have to be displayed in agenda. If you want to render item as empty date the value of date key has to be an empty array []. If there exists no value for date key it is considered that the date in question is not yet loaded | AgendaSchedule | no | All | yes | +| selected | initially selected day | string | no | All | yes | +| hideKnob | Whether to hide the knob | boolean | no | All | yes | +| showClosingKnob | Whether the knob should always be visible (when hideKnob = false) | boolean | no | All | yes | +| showOnlySelectedDayItems | Whether to show items only for the selected date | boolean | no | All | yes | + +### AgendaList + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------ | ---------------------------------------------------------------------------------------------------------- | -------------------- | -------- | -------- | ----------------- | +| theme | Specify theme properties to override specific styles for calendar parts | Theme | no | All | yes | +| dayFormat | Day format in section title. Formatting values: http://arshaw.com/xdate/#Formatting | string | no | All | yes | +| useMoment | Whether to use moment.js for date string formatting | boolean | no | All | yes | +| markToday | Whether to mark today's title with the 'Today, ...' string | boolean | no | All | yes | +| avoidDateUpdates | Whether to block the date change in calendar (and calendar context provider) when agenda scrolls | boolean | no | All | yes | +| scrollToNextEvent | hether to enable scrolling the agenda list to the next date with content when pressing a day without content | boolean | no | All | yes | +| viewOffset | Offset scroll to the section | number | no | All | yes | +| sectionStyle | The style passed to the section view | ViewStyle | no | All | yes | + +### Calendar | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------------ | ---------------------------------------------------------------------------------------------------------- | -------------------- | -------- | -------- | ----------------- | | theme | Specify theme properties to override specific styles for calendar parts | Theme | no | All | yes | | firstDay | If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday | number | no | All | yes | +| hideArrows | Whether to hide the arrows | boolean | no | All | yes | +| disableArrowLeft | Whether to disable the left arrow | boolean | no | All | yes | +| disableArrowRight | Whether to disable the right arrow | boolean | no | All | yes | +| arrowsHitSlop | Left & Right arrows. Additional distance outside of the buttons in which a press is detected, default: 20 | number | no | All | yes | +| hideDayNames | Whether to hide the days names | boolean | no | All | yes | +| monthFormat | Month format for the header's title. Formatting values | string | no | All | yes | | displayLoadingIndicator | Display loading indicator | boolean | no | All | yes | | showWeekNumbers | Show week numbers | boolean | no | All | yes | | style | Specify style for calendar container element | StyleProp | no | All | yes | +| disabledDaysIndexes | Whether to apply custom disable color to selected day indexes | number[] | no | All | yes | | current | Initially visible month | string | no | All | yes | | initialDate | Initially visible month. If changed will initialize the calendar to this value | string | no | All | yes | | minDate | Minimum date that can be selected, dates before minDate will be grayed out | string | no | All | yes | @@ -104,19 +168,121 @@ export default MySvgComponent; | headerStyle | Style passed to the header | StyleProp | no | All | yes | | customHeader | Allow rendering a totally custom header | any | no | All | yes | | allowSelectionOutOfRange | Allow selection of dates before minDate or after maxDate | boolean | no | All | yes | +| disableAllTouchEventsForDisabledDays | Whether to disable all touch events for disabled days (can be override with 'disableTouchEvent' in 'markedDates') | boolean | no | All | yes | +| disableAllTouchEventsForInactiveDays | Whether to disable all touch events for inactive days (can be override with 'disableTouchEvent' in 'markedDates') | boolean | no | All | yes | +| customHeaderTitle | Replace default title with custom element | JSX.Element | no | All | yes | +| dayComponent | Replace default day with custom day rendering component element | JSX.Element | no | All | yes | + +### CalendarList + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------ | ---------------------------------------------------------------------------------------------------------- | -------------------- | -------- | -------- | ----------------- | +| pastScrollRange | Max amount of months allowed to scroll to the past | number | no | All | yes | +| futureScrollRange | Max amount of months allowed to scroll to the future | number | no | All | yes | +| calendarStyle | Specify style for calendar container element | ViewStyle | no | All | yes | +| calendarHeight | Dynamic calendar height | number | no | All | yes | +| calendarWidth | Used when calendar scroll is horizontal, (when pagingEnabled = false) | number | no | All | yes | +| staticHeader | Whether to use a fixed header that doesn't scroll (when horizontal = true) | boolean | no | All | yes | +| showScrollIndicator | Whether to enable or disable vertical / horizontal scroll indicator | boolean | no | All | yes | + +### CalendarProvider + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------ | ---------------------------------------------------------------------------------------------------------- | -------------------- | -------- | -------- | ----------------- | +| theme | Specify theme properties to override specific styles for calendar parts | Theme | no | All | yes | +| style | Specify style for calendar container element | ViewStyle | no | All | yes | +| date | Initial date in 'yyyy-MM-dd' format | string | no | All | yes | +| showTodayButton | Whether to show the today button | boolean | no | All | yes | +| todayButtonStyle | Today button's style | ViewStyle | no | All | yes | +| todayBottomMargin | Today button's top position | number | no | All | yes | +| disabledOpacity | The opacity for the disabled today button (0-1) | number | no | All | yes | + +### ExpandableCalendar + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------ | ---------------------------------------------------------------------------------------------------------- | -------------------- | -------- | -------- | ----------------- | +| initialPosition | The initial position of the calendar ('open' or 'closed') | Positions | no | All | yes | +| disablePan | Whether to disable the pan gesture and disable the opening and closing of the calendar (initialPosition will persist) | boolean | no | All | yes | +| hideKnob | Whether to hide the knob | boolean | no | All | yes | +| leftArrowImageSource | The source for the left arrow image | ImageSourcePropType | no | All | yes | +| rightArrowImageSource | The source for the right arrow image | ImageSourcePropType | no | All | yes | +| allowShadow | Whether to have shadow/elevation for the calendar | boolean | no | All | yes | +| disableWeekScroll | Whether to disable the week scroll in closed position | boolean | no | All | yes | +| openThreshold | The threshold for opening the calendar with the pan gesture | number | no | All | yes | +| closeThreshold | closeThreshold | number | no | All | yes | +| closeOnDayPress | Whether to close the calendar on day press| boolean | no | All | yes | + + +### Timeline + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------ | ---------------------------------------------------------------------------------------------------------- | -------------------- | -------- | -------- | ----------------- | +| theme | Specify theme properties to override specific styles for calendar parts | Theme | no | All | yes | +| style | Specify style for calendar container element | ViewStyle | no | All | yes | +| events | List of events to render on the timeline | Event[] | no | All | yes | +| start | The timeline day start time | number | no | All | yes | +| end | The timeline day end time | number | no | All | yes | +| scrollToFirst | Whether to scroll to the first event | boolean | no | All | yes | +| format24h | Whether to use 24 hours format for the timeline hours | boolean | no | All | yes | + +### WeekCalendar + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------ | ---------------------------------------------------------------------------------------------------------- | -------------------- | -------- | -------- | ----------------- | +| allowShadow | Whether to have shadow/elevation for the calendar | boolean | no | All | yes | +| hideDayNames | Whether to hide the names of the week days | boolean | no | All | yes | ## API -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 +> [!tip] "Platform"列表示该方法在原三方库上支持的平台。 -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该方法；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +### Agenda +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------- | ------------------------------------------------------------------ | -------- | -------- | -------- | ----------------- | +| loadItemsForMonth | Handler which gets executed when items for a certain month should be loaded (month became visible) | function | no | All | yes | +| onDayChange | Handler which gets executed when day changes while scrolling agenda list | function | no | All | yes | +| onCalendarToggled | Handler which gets executed when the calendar is opened or closed | function | no | All | yes | +| renderKnob | Replace default agenda's knob with a custom one | function | no | All | yes | +| renderEmptyData | Replace default ActivityIndicator with a custom one | function | no | All | yes | + +### AgendaList +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------- | ------------------------------------------------------------------ | -------- | -------- | -------- | ----------------- | +| dayFormatter | A function to custom format the section header's title | function | no | All | yes | +### Calendar | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------------- | ------------------------------------------------------------------ | -------- | -------- | -------- | ----------------- | | onDayPress | Handler which gets executed on day press | function | no | All | yes | | onDayLongPress | Handler which gets executed on day long press | function | no | All | yes | | onMonthChange | Handler which gets executed when month changes in calendar | function | no | All | yes | | onVisibleMonthsChange | Handler which gets executed when visible month changes in calendar | function | no | All | yes | +| onPressArrowLeft | Handler which gets executed when press left arrow. It receive a callback to go to the previous month | function | no | All | yes | +| onPressArrowRight | Handler which gets executed when press right arrow. It receive a callback to go to the next month | function | no | All | yes | +| renderArrow | Replace default arrows with custom ones (direction: 'left','right') | function | no | All | yes | +| renderHeader | Replace default title with custom one | function | no | All | yes | + +### CalendarProvider +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------- | ------------------------------------------------------------------ | -------- | -------- | -------- | ----------------- | +| onDateChanged | Handler which gets executed when the date changes | function | no | All | yes | +| onMonthChange | Handler which gets executed when the month changes changes | function | no | All | yes | + +### ExpandableCalendar +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------- | ------------------------------------------------------------------ | -------- | -------- | -------- | ----------------- | +| onCalendarToggled | Handler which gets executed when the calendar is opened or closed | function | no | All | yes | + +### Timeline +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------- | ------------------------------------------------------------------ | -------- | -------- | -------- | ----------------- | +| onEventPress | Handler which gets executed when event is pressed | function | no | All | yes | +| onBackgroundLongPress | Handler which gets executed when background is long pressed. Pass to handle creation of a new event | function | no | All | yes | +| onBackgroundLongPressOut | Handler which gets executed when background's long pressed released. Pass to handle creation of a new event | function | no | All | yes | +| renderEvent | Specify a custom event block | function | no | All | yes | + ## 遗留问题