# ty-react-native-calendars
**Repository Path**: rn-mi/ty-react-native-calendars
## Basic Information
- **Project Name**: ty-react-native-calendars
- **Description**: TY项目react-native-calendars仓库
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-31
- **Last Updated**: 2025-08-08
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
> 模板版本：v0.2.2
@tuya-oh/react-native-calendars
> [!TIP] [Gitee 地址](https://gitee.com/rn-mi/ty-react-native-calendars)
## 安装与使用
请到三方库的 Releases 发布地址查看配套的版本信息：[@tuya-oh/react-native-calendars Releases](https://gitee.com/rn-mi/ty-react-native-calendars/releases) 。对于未发布到npm的旧版本，请参考[安装指南](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/tgz-usage.md)安装tgz包。
进入到工程目录并输入以下命令：
#### **npm**
```bash
npm install @tuya-oh/react-native-calendars
```
#### **yarn**
```bash
yarn add @tuya-oh/react-native-calendars
```
下面的代码展示了这个库的基本使用场景：
> [!WARNING] 使用时 import 的库名不变。
```js
`import { Calendar } from "react-native-calendars"';`
{
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 => }
// 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。
### 权限要求
## 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](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)](https://github.com/react-native-maps/react-native-maps/blob/master/LICENSE) ，请自由地享受和参与开源。