feat: add height props to calendar props

src/DateTimePicker.tsx

@@ -79,14 +79,13 @@ const DateTimePicker = (
     dates,
     onChange,
     initialView = 'day',
+    height,
     ...rest
   } = props;
 
   const initialCalendarView: CalendarViews =
     mode !== 'single' && initialView === 'time' ? 'day' : initialView;
 
-  console.log(initialCalendarView);
-
   const firstDay =
     firstDayOfWeek && firstDayOfWeek > 0 && firstDayOfWeek <= 6
       ? firstDayOfWeek
@@ -295,6 +294,7 @@ const DateTimePicker = (
         minDate,
         maxDate,
         firstDayOfWeek: firstDay,
+        height,
         theme: rest,
         setCalendarView,
         onSelectDate,
@@ -307,6 +307,7 @@ const DateTimePicker = (
       <Calendar
         buttonPrevIcon={buttonPrevIcon}
         buttonNextIcon={buttonNextIcon}
+        height={height}
       />
     </CalendarContext.Provider>
   );

src/components/Calendar.tsx

@@ -17,11 +17,23 @@ const CalendarView: Record<CalendarViews, ReactNode> = {
   time: <TimeSelector />,
 };
 
-interface PropTypes extends HeaderProps {}
+interface PropTypes extends HeaderProps {
+  height?: number;
+}
 
-const Calendar = ({ buttonPrevIcon, buttonNextIcon }: PropTypes) => {
+const Calendar = ({ buttonPrevIcon, buttonNextIcon, height }: PropTypes) => {
   const { calendarView } = useCalendarContext();
 
+  const styles = StyleSheet.create({
+    container: {
+      width: '100%',
+    },
+    calendarContainer: {
+      height: height || CALENDAR_HEIGHT,
+      alignItems: 'center',
+    },
+  });
+
   return (
     <View style={styles.container} testID="calendar">
       {/* {mode !== 'time' ? (
@@ -36,14 +48,4 @@ const Calendar = ({ buttonPrevIcon, buttonNextIcon }: PropTypes) => {
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    width: '100%',
-  },
-  calendarContainer: {
-    height: CALENDAR_HEIGHT,
-    alignItems: 'center',
-  },
-});
-
 export default memo(Calendar);

src/components/Day.tsx

@@ -12,10 +12,12 @@ interface Props extends Omit<IDayObject, 'day'> {
   isSelected: boolean;
   onSelectDate: (date: string) => void;
   theme: CalendarThemeProps;
+  height?: number;
 }
 
-function EmptyDayPure() {
-  return <View style={styles.dayCell} />;
+function EmptyDayPure({ height }: { height?: number }) {
+  const style = styles(height || CALENDAR_HEIGHT);
+  return <View style={style.dayCell} />;
 }
 
 export const EmptyDay = React.memo(EmptyDayPure);
@@ -32,6 +34,7 @@ function Day({
   rightCrop,
   onSelectDate,
   theme,
+  height,
 }: Props) {
   const onPress = React.useCallback(() => {
     onSelectDate(date);
@@ -78,18 +81,20 @@ function Day({
 
   const rangeRootBackground = addColorAlpha(selectedItemColor, 0.15);
 
+  const style = styles(height || CALENDAR_HEIGHT);
+
   return (
-    <View style={styles.dayCell}>
+    <View style={style.dayCell}>
       {inRange && !isCrop ? (
         <View
-          style={[styles.rangeRoot, { backgroundColor: rangeRootBackground }]}
+          style={[style.rangeRoot, { backgroundColor: rangeRootBackground }]}
         ></View>
       ) : null}
 
       {isCrop && leftCrop ? (
         <View
           style={[
-            styles.rangeRoot,
+            style.rangeRoot,
             {
               left: '50%',
               backgroundColor: rangeRootBackground,
@@ -101,7 +106,7 @@ function Day({
       {isCrop && rightCrop ? (
         <View
           style={[
-            styles.rangeRoot,
+            style.rangeRoot,
             {
               right: '50%',
               backgroundColor: rangeRootBackground,
@@ -114,52 +119,53 @@ function Day({
         disabled={disabled}
         onPress={disabled ? undefined : onPress}
         style={[
-          styles.dayContainer,
+          style.dayContainer,
           containerStyle,
           todayItemStyle,
           activeItemStyle,
-          disabled && styles.disabledDay,
+          disabled && style.disabledDay,
         ]}
         testID={date}
         accessibilityRole="button"
         accessibilityLabel={text}
       >
-        <View style={[styles.dayTextContainer]}>
+        <View style={[style.dayTextContainer]}>
           <Text style={[textStyle]}>{text}</Text>
         </View>
       </Pressable>
     </View>
   );
 }
 
-const styles = StyleSheet.create({
-  dayCell: {
-    position: 'relative',
-    width: '14.2%',
-    height: CALENDAR_HEIGHT / 7,
-  },
-  dayContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    margin: 1.5,
-    borderRadius: 100,
-  },
-  dayTextContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  disabledDay: {
-    opacity: 0.3,
-  },
-  rangeRoot: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 2,
-    bottom: 2,
-  },
-});
+const styles = (height: number) =>
+  StyleSheet.create({
+    dayCell: {
+      position: 'relative',
+      width: '14.2%',
+      height: height / 7,
+    },
+    dayContainer: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      margin: 1.5,
+      borderRadius: 100,
+    },
+    dayTextContainer: {
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    disabledDay: {
+      opacity: 0.3,
+    },
+    rangeRoot: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: 2,
+      bottom: 2,
+    },
+  });
 
 const customComparator = (
   prevProps: Readonly<Props>,
@@ -176,6 +182,7 @@ const customComparator = (
     prevProps.leftCrop === nextProps.leftCrop &&
     prevProps.rightCrop === nextProps.rightCrop &&
     prevProps.onSelectDate === nextProps.onSelectDate &&
+    prevProps.height === nextProps.height &&
     isEqual(prevProps.theme, nextProps.theme)
   );
 };

src/components/DaySelector.tsx

@@ -28,6 +28,7 @@ const DaySelector = () => {
     maxDate,
     firstDayOfWeek,
     theme,
+    height,
   } = useCalendarContext();
 
   const { year, month, hour, minute } = getParsedDate(currentDate);
@@ -198,9 +199,10 @@ const DaySelector = () => {
               leftCrop={day.leftCrop}
               rightCrop={day.rightCrop}
               onSelectDate={handleSelectDate}
+              height={height}
             />
           ) : (
-            <EmptyDay key={index} />
+            <EmptyDay key={index} height={height} />
           );
         })}
       </View>

src/types.ts

@@ -92,4 +92,5 @@ export interface DatePickerBaseProps {
   endDate?: DateType;
   onChange?: SingleChange | RangeChange | MultiChange;
   initialView?: CalendarViews;
+  height?: number;
 }