feat: add today styling options to datepicker

farhoudshapouran · Oct 30, 2023 · c12ec07 · c12ec07
1 parent 3a8c05e
commit c12ec07
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -80,6 +80,8 @@ For more, take a look at the `/example` directory.
 | 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  |

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -61,6 +61,9 @@ export default function App() {
               fontWeight: 'bold',
               color: theme?.activeTextColor,
             }}
+            todayContainerStyle={{
+              borderWidth: 1,
+            }}
             mode="datetime"
           />
           <View style={styles.footerContainer}>

diff --git a/src/DateTimePicker.tsx b/src/DateTimePicker.tsx
@@ -38,6 +38,8 @@ const DateTimePicker = ({
   headerButtonColor,
   headerButtonSize,
   dayContainerStyle,
+  todayContainerStyle,
+  todayTextStyle,
   monthContainerStyle,
   yearContainerStyle,
   weekDaysContainerStyle,
@@ -66,6 +68,8 @@ const DateTimePicker = ({
     headerButtonColor,
     headerButtonSize,
     dayContainerStyle,
+    todayContainerStyle,
+    todayTextStyle,
     monthContainerStyle,
     yearContainerStyle,
     weekDaysContainerStyle,

diff --git a/src/components/DaySelector.tsx b/src/components/DaySelector.tsx
@@ -43,6 +43,7 @@ const DaySelector = () => {
               ? {
                   borderWidth: 2,
                   borderColor: theme?.selectedItemColor || '#0047FF',
+                  ...theme?.todayContainerStyle,
                 }
               : null;
 
@@ -63,6 +64,7 @@ const DaySelector = () => {
               ? {
                   ...theme?.calendarTextStyle,
                   color: theme?.selectedItemColor || '#0047FF',
+                  ...theme?.todayTextStyle,
                 }
               : theme?.calendarTextStyle;
 

diff --git a/src/types.ts b/src/types.ts
@@ -30,6 +30,8 @@ export type CalendarTheme = {
   headerButtonColor?: string;
   headerButtonSize?: number;
   dayContainerStyle?: ViewStyle;
+  todayContainerStyle?: ViewStyle;
+  todayTextStyle?: TextStyle;
   monthContainerStyle?: ViewStyle;
   yearContainerStyle?: ViewStyle;
   weekDaysContainerStyle?: ViewStyle;