模板版本：v0.2.2

[!TIP] Gitee 地址

安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：@tuya-oh/react-native-calendars Releases 。对于未发布到npm的旧版本，请参考安装指南安装tgz包。

进入到工程目录并输入以下命令：

npm

npm install @tuya-oh/react-native-calendars

yarn

yarn add @tuya-oh/react-native-calendars

下面的代码展示了这个库的基本使用场景：

[!WARNING] 使用时 import 的库名不变。

`import { Calendar } from "react-native-calendars"';`
<Calendar
  // Initially visible month. Default = now
  initialDate={'2012-03-01'}
  // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
  minDate={'2012-05-10'}
  // Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
  maxDate={'2012-05-30'}
  // Handler which gets executed on day press. Default = undefined
  onDayPress={day => {
    console.log('selected day', day);
  }}
  // Handler which gets executed on day long press. Default = undefined
  onDayLongPress={day => {
    console.log('selected day', day);
  }}
  // Month format in calendar title. Formatting values: http://arshaw.com/xdate/#Formatting
  monthFormat={'yyyy MM'}
  // Handler which gets executed when visible month changes in calendar. Default = undefined
  onMonthChange={month => {
    console.log('month changed', month);
  }}
  // Hide month navigation arrows. Default = false
  hideArrows={true}
  // Replace default arrows with custom ones (direction can be 'left' or 'right')
  renderArrow={direction => <Arrow />}
  // Do not show days of other months in month page. Default = false
  hideExtraDays={true}
  // If hideArrows = false and hideExtraDays = false do not switch month when tapping on greyed out
  // day from another month that is visible in calendar page. Default = false
  disableMonthChange={true}
  // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday
  firstDay={1}
  // Hide day names. Default = false
  hideDayNames={true}
  // Show week numbers to the left. Default = false
  showWeekNumbers={true}
  // Handler which gets executed when press arrow icon left. It receive a callback can go back month
  onPressArrowLeft={subtractMonth => subtractMonth()}
  // Handler which gets executed when press arrow icon right. It receive a callback can go next month
  onPressArrowRight={addMonth => addMonth()}
  // Disable left arrow. Default = false
  disableArrowLeft={true}
  // Disable right arrow. Default = false
  disableArrowRight={true}
  // Disable all touch events for disabled days. can be override with disableTouchEvent in markedDates
  disableAllTouchEventsForDisabledDays={true}
  // Replace default month and year title with custom one. the function receive a date as parameter
  renderHeader={date => {
    /*Return JSX*/
  }}
  // Enable the option to swipe between months. Default = false
  enableSwipeMonths={true}
/>

Link

约束与限制

兼容性

要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。

请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：react-native-calendars Releases

权限要求

Calendar

[!TIP] "Platform"列表示该属性在原三方库上支持的平台。

[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

属性/回调

| Name | Description | Type | Default | Required | Platform | HarmonyOS Support | | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------- | ---------- | -------- | ----------- | ----------------- | | theme | 指定主题属性以覆盖日历部分的特定样式 | string | | no | ios/android | yes | | displayLoadingIndicator | 显示加载指示器 | boolean | | no | ios/android | yes | | showWeekNumbers | 显示周数 | boolean | | no | ios/android | yes | | style | 指定日历容器元素的样式 | style | | no | ios/android | yes |
| initialDate | 最初显示的月份，默认值为当前时间 | string | 现在（当前时间） | no | ios/android | yes | | minDate | 可以选择的最小日期，在此日期之前的日期将显示为灰色，默认值为 undefined | string | undefined | no | ios/android | yes | | maxDate | 可以选择的最大日期，在此日期之后的日期将显示为灰色，默认值为 undefined | string | undefined | no | ios/android | yes | | onDayPress | 当点击某一天时执行的处理函数，默认值为 undefined | function(day) | undefined | no | ios/android | yes | | onDayLongPress | 当长按某一天时执行的处理函数，默认值为 undefined | function(day) | undefined | no | ios/android | yes | | monthFormat | 日历标题中的月份格式，格式化值参考：http://arshaw.com/xdate/#Formatting | string | | no | ios/android | yes | | onMonthChange | 当日历中可见月份发生变化时执行的处理函数，默认值为 undefined | function(month) | undefined | no | ios/android | yes | | hideArrows | 是否隐藏月份导航箭头，默认值为 false | boolean | false | no | ios/android | yes | | renderArrow | 用自定义箭头替换默认箭头（方向可以是 'left' 或 'right'） | function(direction) | | no | ios/android | | | hideExtraDays | 是否在月份页面中不显示其他月份的日期，默认值为 false | boolean | false | no | ios/android | yes | | disableMonthChange | 如果 hideArrows = false 且 hideExtraDays = false，当点击在日历页面中可见的来自其他月份的灰色日期时，不切换月份，默认值为 false | boolean | false | no | ios/android | yes | | firstDay | 如果 firstDay = 1，一周从星期一开始。请注意，dayNames 和 dayNamesShort 仍应从星期天开始 | string | | no | ios/android | yes | | hideDayNames | 是否隐藏星期名称，默认值为 false | boolean | false | no | ios/android | yes | | showWeekNumbers | 是否在左侧显示周数，默认值为 false | boolean | false | no | ios/android | yes | | onPressArrowLeft | 当点击左侧箭头图标时执行的处理函数，它接收一个可以返回上一个月的回调函数 | function(subtractMonth) | | no | ios/android | yes | | onPressArrowRight | 当点击右侧箭头图标时执行的处理函数，它接收一个可以跳转到下一个月的回调函数 | function(addMonth) | | no | ios/android | yes | | disableArrowLeft | 是否禁用左侧箭头，默认值为 false | boolean | false | no | ios/android | yes | | disableArrowRight | 是否禁用右侧箭头，默认值为 false | boolean | false | no | ios/android | yes | | disableAllTouchEventsForDisabledDays | 是否禁用所有禁用日期的触摸事件，可以在 markedDates 中用 disableTouchEvent 覆盖此设置，默认值为 false | boolean | false | no | ios/android | yes | | renderHeader | 用自定义的标题替换默认的月份和年份标题，该函数接收一个日期作为参数 | function(date) | | no | ios/android | | | enableSwipeMonths | 是否启用在月份之间滑动的选项，默认值为 false | boolean | false | no | ios/android | yes | | string | | no | ios/android | yes |

Agenda

[!TIP] "Platform"列表示该属性在原三方库上支持的平台。

[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

属性/回调

| Name | Description | Type | Default | Required | Platform | HarmonyOS Support | | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------- | -------- | -------- | ----------- | ----------------- | | items | 待在议程中显示的项目列表。如果要将项目渲染为空日期，则日期键的值必须是一个空数组[]。如果日期键不存在值，则认为所讨论的日期尚未加载。 | Array | | no | ios/android | yes | | { coordinate: LatLng, position: Point } | | no | all | yes | | selected | 最初选定的日期 | string | 无 | no | ios/android | yes | | hideKnob | 是否隐藏旋钮 | boolean | 无 | no | ios/android | yes | | showClosingKnob | 当 hideKnob = false 时，旋钮是否应始终可见 | boolean | 无 | no | ios/android | yes | | loadItemsForMonth | 当需要加载特定月份的项目时（该月份变为可见）执行的处理函数 | function | 无 | no | ios/android | yes | | onDayChange | 当滚动议程列表时日期发生变化时执行的处理函数 | function | 无 | no | ios/android | yes | | onCalendarToggled | 当日历打开或关闭时执行的处理函数 | function | 无 | no | ios/android | yes | | renderKnob | 用自定义的旋钮替换默认的议程旋钮 | function | 无 | no | ios/android | yes | | renderEmptyData | 用自定义的组件替换默认的 ActivityIndicator | function | 无 | no | ios/android | yes | | onDayPress | 点击日期时调用的回调函数 | function | 无 | no | ios/android | yes | | minDate | 可以选择的最小日期，在此日期之前的日期将显示为灰色，默认值为 undefined | string | undefined | no | ios/android | yes | | maxDate | 可以选择的最大日期，在此日期之后的日期将显示为灰色，默认值为 undefined | string | undefined | no | ios/android | yes | | pastScrollRange | 允许向过去滚动的最大月数，默认值为 50 | number | 50 | no | ios/android | yes | | futureScrollRange | 允许向未来滚动的最大月数，默认值为 50 | number | 50 | no | ios/android | yes | | renderItem | 指定每个项目在议程中应如何渲染 | function | 无 | no | ios/android | yes | | renderDay | 指定每个日期应如何渲染。如果项目不是当天的第一个项目，则 day 可以为 undefined | function | 无 | no | ios/android | yes | | renderEmptyDate | 指定没有项目的空日期内容应如何渲染 | function | 无 | no | ios/android | yes | | renderList | 用自定义实现的组件覆盖内部列表 | function | 无 | no | ios/android | yes | | rowHasChanged | 指定用于提高性能的项目比较函数 | function | 无 | no | ios/android | yes | | markedDates | 默认情况下，如果议程日期至少有一个项目，则会被标记，但如果需要，可以覆盖此设置 | Array | 无 | no | ios/android | yes | | disabledByDefault | 如果 disabledByDefault={true}，则标记为未禁用的日期将被启用，默认值为 false | boolean | false | no | ios/android | yes | | onRefresh | 如果提供此函数，将添加一个标准的 RefreshControl 以实现 “下拉刷新” 功能。确保正确设置 refreshing 属性 | function | 无 | no | ios/android | yes | | refreshing | 在等待刷新的新数据时将此设置为 true | boolean | 无 | no | ios/android | yes | | refreshControl | 添加一个自定义的 RefreshControl 组件，用于为 ScrollView 提供下拉刷新功能 | components | 无 | no | ios/android | yes | | theme | 议程主题 | string | 无 | no | ios/android | yes |

CalendarList

[!TIP] "Platform"列表示该属性在原三方库上支持的平台。

[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

属性/回调

| Name | Description | Type | Default | Required | Platform | HarmonyOS Support | | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | --------------------- | -------- | ----------- | ----------------- | | pastScrollRange | 允许滚动到过去的最大月份数 | string | | yes | ios/android | yes | | futureScrollRange | 允许滚动到未来的最大月份数 | string | | no | ios/android | yes | | calendarWidth | 当日历滚动为水平方向时（当 pagingEnabled = false 时）使用 | string ｜ number | | no | ios/android | yes | | showScrollIndicator | 是否启用或禁用垂直 / 水平滚动指示器 | boolean | | no | ios/android | yes | | scrollEnabled | 启用或禁用日历列表的滚动 | boolean | | no | ios/android | yes | | onVisibleMonthsChange | 当滚动视图中可见月份发生变化时执行的回调函数，默认值为 undefined | function | undefined | no | ios/android | yes | | pagingEnabled | 启用水平方向的分页，默认值为 false | boolean | false | no | ios/android | yes | | horizontal | 启用水平滚动，默认值为 false | boolean | false | no | ios/android | yes |

遗留问题

开源协议

本项目基于 MIT License (MIT) ，请自由地享受和参与开源。