Skip to content

Added renderDay #375

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 15 commits into
base: master
Choose a base branch
from
Open

Added renderDay #375

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
9be8144
added renderDay
andrewmcd1 Apr 18, 2024
c8296ac
update documentation
andrewmcd1 Apr 18, 2024
f66ee35
updated documentation
andrewmcd1 Apr 18, 2024
4bc6303
updated readme formatting
andrewmcd1 Apr 18, 2024
49d413d
updatred readme.md
andrewmcd1 Apr 18, 2024
689be04
updared readme.md
andrewmcd1 Apr 18, 2024
f43ceb7
updated PR feedback
andrewmcd1 Aug 2, 2024
1742c47
added trailing comma
andrewmcd1 Aug 2, 2024
ba1c294
Merge branch 'master' into master
andrewmcd1 Aug 2, 2024
a7353eb
removed extra pipe
andrewmcd1 Aug 2, 2024
fc45790
Merge remote-tracking branch 'origin/master'
andrewmcd1 Aug 2, 2024
316da31
updated readme.md rendeDay doc to reflect new Date type
andrewmcd1 Aug 5, 2024
2dc6ef9
replace colon with comma in readme.md
andrewmcd1 Aug 5, 2024
f5dda6c
moved day component outside of day
andrewmcd1 Aug 5, 2024
3e2b55f
updated Day.js component
andrewmcd1 Aug 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 34 additions & 14 deletions CalendarPicker/Day.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { memo } from 'react';
import {
View,
Text,
Expand All @@ -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, renderDay }) => {
if (renderDay) {
return renderDay({ year, month, day, date, style });
}

return <Text style={style}>{day}</Text>;
});

export default function Day(props) {
const {
day,
Expand Down Expand Up @@ -42,6 +50,7 @@ export default function Day(props) {
minRangeDuration,
maxRangeDuration,
enableDateChange,
renderDay,
} = props;

const thisDay = new Date(year, month, day, 12);
Expand Down Expand Up @@ -193,13 +202,16 @@ export default function Day(props) {
return (
<View style={[styles.dayWrapper, custom.containerStyle]}>
<View style={[custom.style, computedSelectedDayStyle, selectedDayStyle]}>
<Text style={[styles.dayLabel, textStyle,
styles.disabledText, disabledDatesTextStyle,
styles.selectedDisabledText, selectedDisabledDatesTextStyle,
overrideOutOfRangeTextStyle
]}>
{day}
</Text>
<DayComponent style={[styles.dayLabel, textStyle,
styles.disabledText, disabledDatesTextStyle,
styles.selectedDisabledText, selectedDisabledDatesTextStyle,
overrideOutOfRangeTextStyle,
]}
year={year}
month={month}
date={thisDay}
renderDay={renderDay}
/>
</View>
</View>
);
Expand All @@ -210,9 +222,13 @@ export default function Day(props) {
disabled={!enableDateChange}
style={[custom.style, computedSelectedDayStyle, selectedDayStyle]}
onPress={() => onPressDay({ year, month, day })}>
<Text style={[styles.dayLabel, textStyle, custom.textStyle, selectedDayTextStyle]}>
{day}
</Text>
<DayComponent
style={[styles.dayLabel, textStyle, custom.textStyle, selectedDayTextStyle]}
year={year}
month={month}
date={thisDay}
renderDay={renderDay}
/>
</TouchableOpacity>
</View>
);
Expand All @@ -229,9 +245,13 @@ export default function Day(props) {
return (
<View style={[styles.dayWrapper, custom.containerStyle]}>
<View style={[styles.dayButton, custom.style]}>
<Text style={[textStyle, styles.disabledText, disabledDatesTextStyle, custom.textStyle]}>
{day}
</Text>
<DayComponent
style={[textStyle, styles.disabledText, disabledDatesTextStyle, custom.textStyle]}
year={year}
month={month}
date={thisDay}
renderDay={renderDay}
/>
</View>
</View>
);
Expand Down
1 change: 1 addition & 0 deletions CalendarPicker/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};
}

Expand Down
6 changes: 4 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down