diff --git a/CalendarPicker/Day.js b/CalendarPicker/Day.js
index 5c9de03..5e99a45 100644
--- a/CalendarPicker/Day.js
+++ b/CalendarPicker/Day.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
import {
View,
Text,
@@ -13,6 +13,14 @@ import { isSameDay } from 'date-fns/isSameDay';
import { isWithinInterval } from 'date-fns/isWithinInterval';
import { startOfDay } from 'date-fns/startOfDay';
+const DayComponent = memo(({ style, year, month, date, day, renderDay }) => {
+ if (renderDay) {
+ return renderDay({ year, month, day, date, style });
+ }
+
+ return {day};
+});
+
export default function Day(props) {
const {
day,
@@ -42,6 +50,7 @@ export default function Day(props) {
minRangeDuration,
maxRangeDuration,
enableDateChange,
+ renderDay,
} = props;
const thisDay = new Date(year, month, day, 12);
@@ -193,13 +202,17 @@ export default function Day(props) {
return (
-
- {day}
-
+
);
@@ -210,9 +223,14 @@ export default function Day(props) {
disabled={!enableDateChange}
style={[custom.style, computedSelectedDayStyle, selectedDayStyle]}
onPress={() => onPressDay({ year, month, day })}>
-
- {day}
-
+
);
@@ -229,9 +247,14 @@ export default function Day(props) {
return (
-
- {day}
-
+
);
diff --git a/CalendarPicker/index.js b/CalendarPicker/index.js
index 6d1887e..9ca5186 100644
--- a/CalendarPicker/index.js
+++ b/CalendarPicker/index.js
@@ -415,6 +415,7 @@ export default class CalendarPicker extends Component {
selectedRangeEndStyle: this.props.selectedRangeEndStyle,
customDatesStyles: this.props.customDatesStyles,
fontScaling: this.props.fontScaling,
+ renderDay: this.props.renderDay,
};
}
diff --git a/README.md b/README.md
index 7608f61..3a1cdac 100644
--- a/README.md
+++ b/README.md
@@ -138,8 +138,10 @@ const styles = StyleSheet.create({
| **`headerWrapperStyle`** | `ViewStyle` | Optional. Style for entire header controls wrapper. This contains the previous / next controls plus month & year. |
| **`monthTitleStyle`** | `TextStyle` | Optional. Text styling for header's month text. |
| **`yearTitleStyle`** | `TextStyle` | Optional. Text styling for header's year text. |
-| **`initialView`** | `String` | Optional. The view that the calendar opens to. Default is `days`. Available options are `years`, `months`, and `days`. |
-| **`fontScaling`** | `Boolean` | Optional. To enable fontScaling. Default is `true` |
+| **`initialView`** | `String` | Optional. The view that the calendar opens to. Default is `days`. Available options are `years`, `months`, and `days`.
+| **`renderDay`** | `Function` | Optional. Allows customization of day rendering by accepting a custom render prop that receives `{date: Date/DateFn, day: number, month: number, year: number, style: TextStyle}` and returns JSX Element. |
+| **`fontScaling`** | `Boolean` | Optional. To enable fontScaling. Default is `true`
+|
# Styles