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