From b3fc660164f50cfba72c2acb260d2de75063583c Mon Sep 17 00:00:00 2001 From: ywd17362752007 <3182569902@qq.com> Date: Fri, 16 Aug 2024 15:31:56 +0800 Subject: [PATCH 1/2] =?UTF-8?q?docs:=20[#IAJHBF]=20=E4=BF=AE=E6=94=B9react?= =?UTF-8?q?-native-Calendar=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-calendars.md | 163 ++++++++++++++++++++++++++++---- 1 file changed, 146 insertions(+), 17 deletions(-) diff --git a/zh-cn/react-native-calendars.md b/zh-cn/react-native-calendars.md index 4c2b91c7..b9c66f19 100644 --- a/zh-cn/react-native-calendars.md +++ b/zh-cn/react-native-calendars.md @@ -1,4 +1,3 @@ - > 模板版本：v0.2.2

@@ -26,14 +25,14 @@ npm install --save react-native-calendars@1.1304.1 #### **yarn** ```bash -yarn install --save react-native-calendars@1.1304.1 +yarn install --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 +51,41 @@ const MySvgComponent = () => { }, }} /> + + + + + + ); + }; const styles = StyleSheet.create({ @@ -76,21 +108,58 @@ export default MySvgComponent; 本文档内容基于以下版本验证： -1. RNOH: 0.72.20; SDK：HarmonyOS NEXT Developer Preview2; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18; +1. RNOH: 0.72.28; SDK：HarmonyOS-Next-DB1 5.0.0.25; IDE：DevEco Studio 5.0.3.535; ROM：5.0.0.31; ## 属性 > [!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 | +| 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 | +| ------------------------ | ---------------------------------------------------------------------------------------------------------- | -------------------- | -------- | -------- | ----------------- | +| 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 | +| dayFormatter | A function to custom format the section header's title | function | 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 | @@ -102,21 +171,83 @@ export default MySvgComponent; | enableSwipeMonths | Enable the option to swipe between months | boolean | no | All | yes | | disabledByDefault | Disable days by default | boolean | no | All | yes | | 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 | - -## API - -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 - -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 - -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| --------------------- | ------------------------------------------------------------------ | -------- | -------- | -------- | ----------------- | +| 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 | +| dayComponent | Replace default day with custom day rendering component element | JSX.Element | no | All | yes | | 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 | + +### 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 | +| 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 | +| ------------------------ | ---------------------------------------------------------------------------------------------------------- | -------------------- | -------- | -------- | ----------------- | +| 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 | +| onCalendarToggled | Handler which gets executed when the calendar is opened or closed | function | 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 | +| 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 | + +### 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 | + ## 遗留问题 @@ -124,6 +255,4 @@ export default MySvgComponent; ## 开源协议 -本项目基于 [The MIT License (MIT)](https://github.com/wix/react-native-calendars/blob/master/LICENSE) ，请自由地享受和参与开源。 - - \ No newline at end of file +本项目基于 [The MIT License (MIT)](https://github.com/wix/react-native-calendars/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file -- Gitee From 61fa82587baa3c341b045907bccc108e004c3d6b Mon Sep 17 00:00:00 2001 From: "zengqiang (I)" Date: Fri, 23 Aug 2024 14:54:57 +0800 Subject: [PATCH 2/2] =?UTF-8?q?docs:=20[#IAJHBF]=20=E4=BF=AE=E6=94=B9react?= =?UTF-8?q?-native-Calendar=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-calendars.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/zh-cn/react-native-calendars.md b/zh-cn/react-native-calendars.md index b9c66f19..8f258f6a 100644 --- a/zh-cn/react-native-calendars.md +++ b/zh-cn/react-native-calendars.md @@ -175,6 +175,8 @@ export default MySvgComponent; | 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 | | dayComponent | Replace default day with custom day rendering component element | JSX.Element | no | All | yes | +| customHeaderTitle | Replace default title with custom element | JSX.Element | no | All | yes | +| customHeader | Allow rendering a totally custom header | any | no | All | yes | | 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 | @@ -184,6 +186,7 @@ export default MySvgComponent; | 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 | + ### CalendarList | Name | Description | Type | Required | Platform | HarmonyOS Support | -- Gitee