Skip to content

Commit

Permalink
Merge pull request #93 from EliranSiboni/feat-add-selected-range-back…
Browse files Browse the repository at this point in the history 
…ground-color

Feat: add selected range background color prop
  • Loading branch information
@farhoudshapouran
farhoudshapouran authored Jul 16, 2024
2 parents f5fc0a5 + c036985 commit 334bcf7
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 26 deletions.
51 changes: 26 additions & 25 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,31 +99,32 @@ For more, take a look at the `/example` directory.

## Styling props

| Name | Type | Default | Description |
| -------------------------- | ------------------------------ | ----------- | --------------------------------------------------------------------------------------------- |
| calendarTextStyle | `TextStyle` | `null` | Defines all text styles inside the calendar (Days, Months, Years, Hours, and Minutes) |
| selectedTextStyle | `TextStyle` | `null` | Defines selected (Day, Month, Year) text styles |
| selectedItemColor | `string` | `'#0047FF'` | Defines selected (Day, Month, Year) background and border colors |
| headerContainerStyle | `ViewStyle` | `null` | Defines calendar header container style |
| headerTextContainerStyle | `ViewStyle` | `null` | Defines calendar header texts (Month, Year, Time) containers style |
| headerTextStyle | `TextStyle` | `null` | Defines calendar header text styles (Month, Year, Time) |
| headerButtonStyle | `ViewStyle` | `null` | Defines calendar header "prev and next buttons" containers style |
| headerButtonColor | `string` | `null` | Defines calendar header "prev and next buttons" icon color |
| headerButtonSize | `number` | `18` | Defines calendar header "prev and next buttons" icon size |
| headerButtonsPosition | `string` | `'around'` | Defines calendar header "prev and next buttons" positions `['around', 'right', 'left']` |
| buttonPrevIcon | `ReactNode` | `undefined` | Defines calendar header "prev button" custom icon |
| buttonNextIcon | `ReactNode` | `undefined` | Defines calendar header "next button" custom icon |
| dayContainerStyle | `ViewStyle` | `null` | Defines days containers style |
| todayContainerStyle | `ViewStyle` | `null` | Defines today container style |
| todayTextStyle | `TextStyle` | `null` | Defines today text style |
| monthContainerStyle | `ViewStyle` | `null` | Defines months containers style |
| yearContainerStyle | `ViewStyle` | `null` | Defines years containers style |
| weekDaysContainerStyle | `ViewStyle` | `null` | Defines weekdays container style |
| weekDaysTextStyle | `TextStyle` | `null` | Defines weekdays texts style |
| timePickerContainerStyle | `ViewStyle` | `null` | Defines time picker container style |
| timePickerTextStyle | `TextStyle` | `null` | Defines time picker (Hours, Minutes) texts style |
| timePickerIndicatorStyle | `ViewStyle` | `null` | Defines selected time indicator style |
| timePickerDecelerationRate | `'normal'`, `'fast'`, `number` | `'fast'` | Defines how quickly the underlying scroll view decelerates after the user lifts their finger. |
| Name | Type | Default | Description |
| ---------------------------- | ------------------------------ | ----------- | --------------------------------------------------------------------------------------------- |
| calendarTextStyle | `TextStyle` | `null` | Defines all text styles inside the calendar (Days, Months, Years, Hours, and Minutes) |
| selectedTextStyle | `TextStyle` | `null` | Defines selected (Day, Month, Year) text styles |
| selectedItemColor | `string` | `'#0047FF'` | Defines selected (Day, Month, Year) background and border colors |
| headerContainerStyle | `ViewStyle` | `null` | Defines calendar header container style |
| headerTextContainerStyle | `ViewStyle` | `null` | Defines calendar header texts (Month, Year, Time) containers style |
| headerTextStyle | `TextStyle` | `null` | Defines calendar header text styles (Month, Year, Time) |
| headerButtonStyle | `ViewStyle` | `null` | Defines calendar header "prev and next buttons" containers style |
| headerButtonColor | `string` | `null` | Defines calendar header "prev and next buttons" icon color |
| headerButtonSize | `number` | `18` | Defines calendar header "prev and next buttons" icon size |
| headerButtonsPosition | `string` | `'around'` | Defines calendar header "prev and next buttons" positions `['around', 'right', 'left']` |
| buttonPrevIcon | `ReactNode` | `undefined` | Defines calendar header "prev button" custom icon |
| buttonNextIcon | `ReactNode` | `undefined` | Defines calendar header "next button" custom icon |
| dayContainerStyle | `ViewStyle` | `null` | Defines days containers style |
| todayContainerStyle | `ViewStyle` | `null` | Defines today container style |
| todayTextStyle | `TextStyle` | `null` | Defines today text style |
| monthContainerStyle | `ViewStyle` | `null` | Defines months containers style |
| yearContainerStyle | `ViewStyle` | `null` | Defines years containers style |
| weekDaysContainerStyle | `ViewStyle` | `null` | Defines weekdays container style |
| weekDaysTextStyle | `TextStyle` | `null` | Defines weekdays texts style |
| timePickerContainerStyle | `ViewStyle` | `null` | Defines time picker container style |
| timePickerTextStyle | `TextStyle` | `null` | Defines time picker (Hours, Minutes) texts style |
| timePickerIndicatorStyle | `ViewStyle` | `null` | Defines selected time indicator style |
| timePickerDecelerationRate | `'normal'`, `'fast'`, `number` | `'fast'` | Defines how quickly the underlying scroll view decelerates after the user lifts their finger. |
| selectedRangeBackgroundColor | `string` | `undefined` | Defines selected range background color. |

## Contributing

Expand Down
4 changes: 3 additions & 1 deletion src/components/Day.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ function Day({
selectedTextStyle,
todayContainerStyle,
todayTextStyle,
selectedRangeBackgroundColor,
} = theme;

//const bothWays = inRange && leftCrop && rightCrop;
Expand Down Expand Up @@ -79,7 +80,8 @@ function Day({
}
: calendarTextStyle;

const rangeRootBackground = addColorAlpha(selectedItemColor, 0.15);
const rangeRootBackground =
selectedRangeBackgroundColor ?? addColorAlpha(selectedItemColor, 0.15);

const style = styles(height || CALENDAR_HEIGHT);

Expand Down
1 change: 1 addition & 0 deletions src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ export type CalendarThemeProps = {
timePickerTextStyle?: TextStyle;
timePickerIndicatorStyle?: ViewStyle;
timePickerDecelerationRate?: 'normal' | 'fast' | number;
selectedRangeBackgroundColor?: string;
};

export type HeaderProps = {
Expand Down

0 comments on commit 334bcf7

Please sign in to comment.