Skip to content

Commit e67e434

Browse files
committed
fix(Calendar): 增加renderDay功能
1 parent 81390cf commit e67e434

File tree

3 files changed

+22
-5
lines changed

3 files changed

+22
-5
lines changed

packages/core/src/Calendar/README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,8 @@ export default CalendarView
9595
| `showBar` | 是否显示导航栏 | Boolean | `true` |
9696
| `bar` | 导航栏 | React.ReactNode | - |
9797
| `onChange` | 选择时间事件 | (value: string) => void | - |
98+
| `renderDay` | 自定义渲染日期额外内容 | (date:any) => React.ReactNode | JSX.Element | - |
99+
98100

99101
### bar 参数
100102
| 参数 | 说明 | 类型 | 默认值 |

packages/core/src/Calendar/index.tsx

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,17 @@ interface BarState {
2121

2222
export interface CalendarProps extends ViewProps {
2323
// 日历颜色
24-
color: string;
24+
color?: string;
2525
// 是否显示农历及假日
26-
lunarHoliday: boolean;
26+
lunarHoliday?: boolean;
2727
bar?: BarState;
2828
// 是否显示农历详情
29-
showLunar: boolean;
29+
showLunar?: boolean;
3030
onChange?: (value: string) => void;
3131
// 是否显示头部导航栏
3232
showBar?: boolean;
33+
// 自定义渲染日期额外内容
34+
renderDay?: (date: any) => React.ReactNode | JSX.Element;
3335
}
3436

3537
const Calendar = (props: CalendarProps) => {
@@ -40,7 +42,15 @@ const Calendar = (props: CalendarProps) => {
4042
onPressBarLeft: undefined,
4143
render: undefined,
4244
};
43-
const { color = '#329BCB', lunarHoliday = false, bar = bars, showLunar = false, onChange, showBar = true } = props;
45+
const {
46+
color = '#329BCB',
47+
lunarHoliday = false,
48+
bar = bars,
49+
showLunar = false,
50+
onChange,
51+
showBar = true,
52+
renderDay,
53+
} = props;
4454
const { barRightText, title, barLeftText, onPressBarLeft, render } = bar;
4555
const [currentYear, setCurrentYear] = useState<number>(toYear);
4656
const [currentMonth, setCurrentMonth] = useState<number>(toMonth);
@@ -140,6 +150,7 @@ const Calendar = (props: CalendarProps) => {
140150
onPress={() => goSelectDay(day)}
141151
>
142152
<View>
153+
{renderDay?.(day.date || '')}
143154
<Text
144155
style={[
145156
styles.dayText,

packages/core/src/Calendar/utils.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export function getMonths(year: number, month: number, day: number) {
3030
* 判断年闰年
3131
*/
3232
export function isLeapYear(year: number) {
33-
return (year % 400 === 0 || (year % 100 !== 0 && year % 4 === 0));
33+
return year % 400 === 0 || (year % 100 !== 0 && year % 4 === 0);
3434
}
3535

3636
/**
@@ -95,6 +95,7 @@ export interface daysArrProps {
9595
colorType: string;
9696
lunarMonth: string;
9797
lunar: string;
98+
date?: string;
9899
}
99100
/**
100101
* 按每周分行
@@ -116,6 +117,7 @@ export function getWeeksArray(lastDays: number[], days: number[], nextDays: numb
116117
colorType: getHoliday.colorType,
117118
lunarMonth: getHoliday.lunarMonth,
118119
lunar: getHoliday.lunar,
120+
date: year + '-' + (month + 1) + '-' + lstVal,
119121
});
120122
});
121123
days.forEach((Val, Indx) => {
@@ -130,6 +132,7 @@ export function getWeeksArray(lastDays: number[], days: number[], nextDays: numb
130132
colorType: getHoliday.colorType,
131133
lunarMonth: getHoliday.lunarMonth,
132134
lunar: getHoliday.lunar,
135+
date: year + '-' + (month + 1) + '-' + Val,
133136
});
134137
});
135138
nextDays.forEach((nextVal, nextIndx) => {
@@ -143,6 +146,7 @@ export function getWeeksArray(lastDays: number[], days: number[], nextDays: numb
143146
colorType: getHoliday.colorType,
144147
lunarMonth: getHoliday.lunarMonth,
145148
lunar: getHoliday.lunar,
149+
date: year + '-' + (month + 1) + '-' + nextVal,
146150
});
147151
});
148152
res = res.concat(lastArr, currentArr, nextArr);

0 commit comments

Comments
 (0)