From 3f9b11e32d7507698145b0bf1c2a433e34eb5348 Mon Sep 17 00:00:00 2001
From: Nitzan Yizhar <nitzany@wix.com>
Date: Mon, 21 Apr 2025 16:20:39 +0300
Subject: [PATCH 1/4] Conditional rendering of week calendar and calendar list

---
 .../src/screens/expandableCalendarScreen.tsx  |  15 +-
 src/calendar-list/index.tsx                   |   1 +
 src/expandableCalendar/WeekCalendar/index.tsx |  83 +++--
 src/expandableCalendar/index.tsx              | 348 +++++++++++-------
 src/expandableCalendar/style.ts               |   4 +
 5 files changed, 273 insertions(+), 178 deletions(-)

diff --git a/example/src/screens/expandableCalendarScreen.tsx b/example/src/screens/expandableCalendarScreen.tsx
index 413a047e71..76d6b8beff 100644
--- a/example/src/screens/expandableCalendarScreen.tsx
+++ b/example/src/screens/expandableCalendarScreen.tsx
@@ -1,5 +1,5 @@
 import React, {useRef, useCallback} from 'react';
-import {Animated, Easing, StyleSheet, Text, TouchableOpacity} from 'react-native';
+import {Animated, Button, Easing, StyleSheet, Text, TouchableOpacity} from 'react-native';
 import {ExpandableCalendar, AgendaList, CalendarProvider, WeekCalendar} from 'react-native-calendars';
 import testIDs from '../testIDs';
 import {agendaItems, getMarkedDates} from '../mocks/agendaItems';
@@ -32,7 +32,7 @@ const ExpandableCalendarScreen = (props: Props) => {
   // }, []);
 
   const renderItem = useCallback(({item}: any) => {
-    return <AgendaItem item={item}/>;
+    return <AgendaItem item={item} />;
   }, []);
 
   const calendarRef = useRef<{toggleCalendarPosition: () => boolean}>(null);
@@ -57,7 +57,7 @@ const ExpandableCalendarScreen = (props: Props) => {
       return (
         <TouchableOpacity style={styles.header} onPress={toggleCalendarExpansion}>
           <Text style={styles.headerTitle}>{date?.toString('MMMM yyyy')}</Text>
-          <Animated.Image source={CHEVRON} style={{transform: [{rotate: '90deg'}, {rotate: rotationInDegrees}]}}/>
+          <Animated.Image source={CHEVRON} style={{transform: [{rotate: '90deg'}, {rotate: rotationInDegrees}]}} />
         </TouchableOpacity>
       );
     },
@@ -83,16 +83,16 @@ const ExpandableCalendarScreen = (props: Props) => {
       // disableAutoDaySelection={[ExpandableCalendar.navigationTypes.MONTH_SCROLL, ExpandableCalendar.navigationTypes.MONTH_ARROWS]}
     >
       {weekView ? (
-        <WeekCalendar testID={testIDs.weekCalendar.CONTAINER} firstDay={1} markedDates={marked.current}/>
+        <WeekCalendar testID={testIDs.weekCalendar.CONTAINER} firstDay={1} markedDates={marked.current} />
       ) : (
         <ExpandableCalendar
           testID={testIDs.expandableCalendar.CONTAINER}
-          renderHeader={renderHeader}
+          // renderHeader={renderHeader}
           ref={calendarRef}
-          onCalendarToggled={onCalendarToggled}
+          // onCalendarToggled={onCalendarToggled}
           // horizontal={false}
           // hideArrows
-          // disablePan
+          disablePan
           // hideKnob
           // initialPosition={ExpandableCalendar.positions.OPEN}
           // calendarStyle={styles.calendar}
@@ -115,6 +115,7 @@ const ExpandableCalendarScreen = (props: Props) => {
         sectionStyle={styles.section}
         // dayFormat={'yyyy-MM-d'}
       />
+      <Button title='Button' onPress={() => toggleCalendarExpansion()} />
     </CalendarProvider>
   );
 };
diff --git a/src/calendar-list/index.tsx b/src/calendar-list/index.tsx
index 11f67ac04f..8f0e3b3270 100644
--- a/src/calendar-list/index.tsx
+++ b/src/calendar-list/index.tsx
@@ -13,6 +13,7 @@ import styleConstructor from './style';
 import Calendar, {CalendarProps} from '../calendar';
 import CalendarListItem from './item';
 import CalendarHeader from '../calendar/header/index';
+export {CalendarHeader};
 import isEqual from 'lodash/isEqual';
 
 const CALENDAR_WIDTH = constants.screenWidth;
diff --git a/src/expandableCalendar/WeekCalendar/index.tsx b/src/expandableCalendar/WeekCalendar/index.tsx
index 555cecee3f..8e1bd3bef4 100644
--- a/src/expandableCalendar/WeekCalendar/index.tsx
+++ b/src/expandableCalendar/WeekCalendar/index.tsx
@@ -2,15 +2,15 @@ import XDate from 'xdate';
 import React, {useCallback, useContext, useMemo, useRef, useState} from 'react';
 import {FlatList, View, ViewToken} from 'react-native';
 import {sameWeek, onSameDateRange, getWeekDates} from '../../dateutils';
-import {toMarkingFormat} from '../../interface';
+import {parseDate, toMarkingFormat} from '../../interface';
 import {DateData, MarkedDates} from '../../types';
 import styleConstructor from '../style';
-import {CalendarListProps} from '../../calendar-list';
+import {CalendarListProps, CalendarHeader} from '../../calendar-list';
 import WeekDaysNames from '../../commons/WeekDaysNames';
 import Week from '../week';
 import {UpdateSources} from '../commons';
 import constants from '../../commons/constants';
-import {extractCalendarProps} from '../../componentUpdater';
+import {extractCalendarProps, extractHeaderProps} from '../../componentUpdater';
 import CalendarContext from '../Context';
 import {useDidUpdate} from '../../hooks';
 
@@ -20,6 +20,7 @@ const NUM_OF_ITEMS = NUMBER_OF_PAGES * 2 + 1; // NUMBER_OF_PAGES before + NUMBER
 export interface WeekCalendarProps extends CalendarListProps {
   /** whether to have shadow/elevation for the calendar */
   allowShadow?: boolean;
+  showHeader?: boolean;
 }
 
 /**
@@ -34,9 +35,11 @@ const WeekCalendar = (props: WeekCalendarProps) => {
     current,
     theme,
     testID,
-    markedDates
+    markedDates,
+    showHeader
   } = props;
   const context = useContext(CalendarContext);
+  const headerProps = extractHeaderProps(props);
   const {allowShadow = true, ...calendarListProps} = props;
   const {style: propsStyle, onDayPress, firstDay = 0, ...others} = extractCalendarProps(calendarListProps);
   const {date, numberOfDays, updateSource, setDate, timelineLeftInset} = context;
@@ -47,6 +50,7 @@ const WeekCalendar = (props: WeekCalendarProps) => {
   const changedItems = useRef(constants.isRTL);
   const list = useRef<FlatList>(null);
   const currentIndex = useRef(NUMBER_OF_PAGES);
+  const currentMonth = parseDate(current);
 
   const shouldFixRTL = useMemo(() => !constants.isRN73() && constants.isAndroidRTL, []);
 
@@ -207,37 +211,48 @@ const WeekCalendar = (props: WeekCalendarProps) => {
       onViewableItemsChanged
     }]);
 
-  return (
-    <View
-      testID={testID}
-      style={weekCalendarStyle}
-    >
-      {!hideDayNames && (
-        <View style={containerStyle}>
-          {renderWeekDaysNames}
+    const renderCalendarHeader = () => {
+      return (
+        <CalendarHeader
+          {...headerProps}
+          testID={`${testID}.staticHeader`}
+          style={style.current.weekCalendarHeader}
+          month={currentMonth}
+          accessibilityElementsHidden={true} // iOS
+          importantForAccessibility={'no-hide-descendants'} // Android
+        />
+      );
+    };
+
+    return (
+      <>
+        <View style={{backgroundColor: 'red'}}>
+        {showHeader && renderCalendarHeader()}
         </View>
-      )}
-      <View style={style.current.container}>
-          <FlatList
-            testID={`${testID}.list`}
-            ref={list}
-            style={style.current.container}
-            data={listData}
-            horizontal
-            showsHorizontalScrollIndicator={false}
-            pagingEnabled
-            scrollEnabled
-            renderItem={renderItem}
-            keyExtractor={keyExtractor}
-            initialScrollIndex={NUMBER_OF_PAGES}
-            getItemLayout={getItemLayout}
-            viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
-            onEndReached={onEndReached}
-            onEndReachedThreshold={1 / NUM_OF_ITEMS}
-          />
-      </View>
-    </View>
-  );
+        <View testID={testID} style={weekCalendarStyle}>
+          {!hideDayNames && <View style={containerStyle}>{renderWeekDaysNames}</View>}
+          <View style={style.current.container}>
+            <FlatList
+              testID={`${testID}.list`}
+              ref={list}
+              style={style.current.container}
+              data={listData}
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              pagingEnabled
+              scrollEnabled
+              renderItem={renderItem}
+              keyExtractor={keyExtractor}
+              initialScrollIndex={NUMBER_OF_PAGES}
+              getItemLayout={getItemLayout}
+              viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
+              onEndReached={onEndReached}
+              onEndReachedThreshold={1 / NUM_OF_ITEMS}
+            />
+          </View>
+        </View>
+      </>
+    );
 };
 
 function getDateForDayRange(date: string, weekIndex: number, numberOfDays: number) {
diff --git a/src/expandableCalendar/index.tsx b/src/expandableCalendar/index.tsx
index f42ef6804e..b4894127ec 100644
--- a/src/expandableCalendar/index.tsx
+++ b/src/expandableCalendar/index.tsx
@@ -26,7 +26,8 @@ import {
   GestureResponderEvent,
   PanResponderGestureState,
   TouchableOpacity,
-  type LayoutChangeEvent
+  type LayoutChangeEvent,
+  LayoutAnimation
 } from 'react-native';
 
 import {page} from '../dateutils';
@@ -143,9 +144,16 @@ const ExpandableCalendar = forwardRef<ExpandableCalendarRef, ExpandableCalendarP
 
   const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
   const [headerHeight, setHeaderHeight] = useState(0);
-  const onHeaderLayout = useCallback(({nativeEvent: {layout: {height}}}: LayoutChangeEvent) => {
+  const onHeaderLayout = useCallback(
+    ({
+      nativeEvent: {
+        layout: {height}
+      }
+    }: LayoutChangeEvent) => {
       setHeaderHeight(height || DEFAULT_HEADER_HEIGHT);
-  }, []);
+    },
+    []
+  );
 
   /** Date */
 
@@ -195,11 +203,14 @@ const ExpandableCalendar = forwardRef<ExpandableCalendarRef, ExpandableCalendarP
     if (!horizontal) {
       return Math.max(constants.screenHeight, constants.screenWidth);
     }
-    return headerHeight + (WEEK_HEIGHT * (numberOfWeeks.current)) + (hideKnob ? 0 : KNOB_CONTAINER_HEIGHT);
+    return headerHeight + WEEK_HEIGHT * numberOfWeeks.current + (hideKnob ? 0 : KNOB_CONTAINER_HEIGHT);
   };
   const openHeight = useRef(getOpenHeight());
-  const closedHeight = useMemo(() => headerHeight + WEEK_HEIGHT + (hideKnob || Number(numberOfDays) > 1 ? 0 : KNOB_CONTAINER_HEIGHT), [numberOfDays, hideKnob, headerHeight]);
-  const startHeight = useMemo(() => isOpen ? openHeight.current : closedHeight, [closedHeight, isOpen]);
+  const closedHeight = useMemo(
+    () => headerHeight + WEEK_HEIGHT + (hideKnob || Number(numberOfDays) > 1 ? 0 : KNOB_CONTAINER_HEIGHT),
+    [numberOfDays, hideKnob, headerHeight]
+  );
+  const startHeight = useMemo(() => (isOpen ? openHeight.current : closedHeight), [closedHeight, isOpen]);
   const _height = useRef(startHeight);
   const deltaY = useMemo(() => new Animated.Value(startHeight), [startHeight]);
   const headerDeltaY = useRef(new Animated.Value(isOpen ? -headerHeight : 0));
@@ -211,14 +222,13 @@ const ExpandableCalendar = forwardRef<ExpandableCalendarRef, ExpandableCalendarP
 
   useEffect(() => {
     openHeight.current = getOpenHeight();
-  } ,[headerHeight]);
-
+  }, [headerHeight]);
 
   useEffect(() => {
     if (numberOfDays) {
-        setPosition(Positions.CLOSED);
+      setPosition(Positions.CLOSED);
     }
-}, [numberOfDays]);
+  }, [numberOfDays]);
 
   /** Components' refs */
 
@@ -270,7 +280,12 @@ const ExpandableCalendar = forwardRef<ExpandableCalendarRef, ExpandableCalendarP
   }, [isOpen, headerHeight]);
 
   const containerStyle = useMemo(() => {
-    return [allowShadow && style.current.containerShadow, propsStyle, headerHeight === 0  && style.current.hidden, {overflow: 'hidden'} as const];
+    return [
+      allowShadow && style.current.containerShadow,
+      propsStyle,
+      headerHeight === 0 && style.current.hidden,
+      {overflow: 'hidden'} as const
+    ];
   }, [allowShadow, propsStyle, headerHeight]);
 
   const wrapperStyle = useMemo(() => {
@@ -317,32 +332,35 @@ const ExpandableCalendar = forwardRef<ExpandableCalendarRef, ExpandableCalendarP
     }
   };
 
-  const scrollPage = useCallback((next: boolean, updateSource = UpdateSources.PAGE_SCROLL) => {
-    if (horizontal) {
-      const d = parseDate(date);
+  const scrollPage = useCallback(
+    (next: boolean, updateSource = UpdateSources.PAGE_SCROLL) => {
+      if (horizontal) {
+        const d = parseDate(date);
 
-      if (isOpen) {
-        d.setDate(1);
-        d.addMonths(next ? 1 : -1);
-      } else {
-        let dayOfTheWeek = d.getDay();
+        if (isOpen) {
+          d.setDate(1);
+          d.addMonths(next ? 1 : -1);
+        } else {
+          let dayOfTheWeek = d.getDay();
 
-        if (dayOfTheWeek < firstDay && firstDay > 0) {
-          dayOfTheWeek = 7 + dayOfTheWeek;
-        }
+          if (dayOfTheWeek < firstDay && firstDay > 0) {
+            dayOfTheWeek = 7 + dayOfTheWeek;
+          }
 
-        if (numberOfDays) {
-          const daysToAdd = numberOfDays <= 1 ? 7 : numberOfDays;
-          d.addDays(next ? daysToAdd : -daysToAdd);
-        } else {
-          const firstDayOfWeek = (next ? 7 : -7) - dayOfTheWeek + firstDay;
-          d.addDays(firstDayOfWeek);
+          if (numberOfDays) {
+            const daysToAdd = numberOfDays <= 1 ? 7 : numberOfDays;
+            d.addDays(next ? daysToAdd : -daysToAdd);
+          } else {
+            const firstDayOfWeek = (next ? 7 : -7) - dayOfTheWeek + firstDay;
+            d.addDays(firstDayOfWeek);
+          }
         }
-      }
 
-      setDate?.(toMarkingFormat(d), updateSource);
-    }
-  }, [horizontal, isOpen, firstDay, numberOfDays, setDate, date]);
+        setDate?.(toMarkingFormat(d), updateSource);
+      }
+    },
+    [horizontal, isOpen, firstDay, numberOfDays, setDate, date]
+  );
 
   /** Pan Gesture */
 
@@ -363,7 +381,10 @@ const ExpandableCalendar = forwardRef<ExpandableCalendarRef, ExpandableCalendarP
 
   const handlePanResponderMove = (_: GestureResponderEvent, gestureState: PanResponderGestureState) => {
     // limit min height to closed height and max to open height
-    _wrapperStyles.current.style.height = Math.min(Math.max(closedHeight, _height.current + gestureState.dy), openHeight.current);
+    _wrapperStyles.current.style.height = Math.min(
+      Math.max(closedHeight, _height.current + gestureState.dy),
+      openHeight.current
+    );
 
     if (!horizontal) {
       // vertical CalenderList header
@@ -385,15 +406,21 @@ const ExpandableCalendar = forwardRef<ExpandableCalendarRef, ExpandableCalendarP
     bounceToPosition();
   };
   const numberOfDaysCondition = useMemo(() => {
-    return !numberOfDays || numberOfDays && numberOfDays <= 1;
+    return !numberOfDays || (numberOfDays && numberOfDays <= 1);
   }, [numberOfDays]);
 
-  const panResponder = useMemo(() => numberOfDaysCondition ? PanResponder.create({
-    onMoveShouldSetPanResponder: handleMoveShouldSetPanResponder,
-    onPanResponderMove: handlePanResponderMove,
-    onPanResponderRelease: handlePanResponderEnd,
-    onPanResponderTerminate: handlePanResponderEnd
-  }) : PanResponder.create({}), [numberOfDays, position, headerHeight]); // All the functions here rely on headerHeight directly or indirectly through refs that are updated in useEffect
+  const panResponder = useMemo(
+    () =>
+      numberOfDaysCondition
+        ? PanResponder.create({
+            onMoveShouldSetPanResponder: handleMoveShouldSetPanResponder,
+            onPanResponderMove: handlePanResponderMove,
+            onPanResponderRelease: handlePanResponderEnd,
+            onPanResponderTerminate: handlePanResponderEnd
+          })
+        : PanResponder.create({}),
+    [numberOfDays, position, headerHeight]
+  ); // All the functions here rely on headerHeight directly or indirectly through refs that are updated in useEffect
 
   /** Animated */
 
@@ -414,7 +441,7 @@ const ExpandableCalendar = forwardRef<ExpandableCalendarRef, ExpandableCalendarP
       useNativeDriver: false
     }).start(() => {
       onCalendarToggled?.(_isOpen);
-      setPosition(() => _height.current === closedHeight ? Positions.CLOSED : Positions.OPEN);
+      setPosition(() => (_height.current === closedHeight ? Positions.CLOSED : Positions.OPEN));
     });
     toggleAnimatedHeader(_isOpen);
   };
@@ -446,7 +473,12 @@ const ExpandableCalendar = forwardRef<ExpandableCalendarRef, ExpandableCalendarP
   }, [isOpen, closedHeight]);
 
   const toggleCalendarPosition = useCallback(() => {
-    bounceToPosition(isOpen ? closedHeight : openHeight.current);
+    if (disablePan) {
+      LayoutAnimation.configureNext(LayoutAnimation.create(300, LayoutAnimation.Types.easeInEaseOut, LayoutAnimation.Properties.opacity));
+      setPosition(isOpen ? Positions.CLOSED : Positions.OPEN);
+    } else {
+      bounceToPosition(isOpen ? closedHeight : openHeight.current);
+    }
     return !isOpen;
   }, [isOpen, bounceToPosition, closedHeight]);
 
@@ -460,85 +492,99 @@ const ExpandableCalendar = forwardRef<ExpandableCalendarRef, ExpandableCalendarP
 
   /** Events */
 
-  const _onPressArrowLeft = useCallback((method: () => void, month?: XDate) => {
-    onPressArrowLeft?.(method, month);
-    scrollPage(false, isOpen ? UpdateSources.ARROW_PRESS: UpdateSources.WEEK_ARROW_PRESS);
-  }, [onPressArrowLeft, scrollPage]);
+  const _onPressArrowLeft = useCallback(
+    (method: () => void, month?: XDate) => {
+      onPressArrowLeft?.(method, month);
+      scrollPage(false, isOpen ? UpdateSources.ARROW_PRESS : UpdateSources.WEEK_ARROW_PRESS);
+    },
+    [onPressArrowLeft, scrollPage]
+  );
 
-  const _onPressArrowRight = useCallback((method: () => void, month?: XDate) => {
-    onPressArrowRight?.(method, month);
-    scrollPage(true, isOpen ? UpdateSources.ARROW_PRESS: UpdateSources.WEEK_ARROW_PRESS);
-  }, [onPressArrowRight, scrollPage]);
+  const _onPressArrowRight = useCallback(
+    (method: () => void, month?: XDate) => {
+      onPressArrowRight?.(method, month);
+      scrollPage(true, isOpen ? UpdateSources.ARROW_PRESS : UpdateSources.WEEK_ARROW_PRESS);
+    },
+    [onPressArrowRight, scrollPage]
+  );
 
-  const _onDayPress = useCallback((value: DateData) => {
-    if (numberOfDaysCondition) {
-      setDate?.(value.dateString, UpdateSources.DAY_PRESS);
-    }
-    if (closeOnDayPress && !disablePan) {
-      closeCalendar();
-    }
-    onDayPress?.(value);
-  }, [onDayPress, closeOnDayPress, closeCalendar, numberOfDaysCondition]);
-
-  const onVisibleMonthsChange = useCallback(throttle(
-    (value: DateData[]) => {
-      const newDate = first(value);
-      if (newDate) {
-        const month = newDate.month;
-        if (month && visibleMonth.current !== month) {
-          visibleMonth.current = month;
-
-          const year = newDate.year;
-          if (year) {
-            visibleYear.current = year;
-          }
+  const _onDayPress = useCallback(
+    (value: DateData) => {
+      if (numberOfDaysCondition) {
+        setDate?.(value.dateString, UpdateSources.DAY_PRESS);
+      }
+      if (closeOnDayPress && !disablePan) {
+        closeCalendar();
+      }
+      onDayPress?.(value);
+    },
+    [onDayPress, closeOnDayPress, closeCalendar, numberOfDaysCondition]
+  );
 
-          // for horizontal scroll
-          if (visibleMonth.current !== getMonth(date)) {
-            const next = isLaterDate(newDate, date);
-            scrollPage(next);
-          }
+  const onVisibleMonthsChange = useCallback(
+    throttle(
+      (value: DateData[]) => {
+        const newDate = first(value);
+        if (newDate) {
+          const month = newDate.month;
+          if (month && visibleMonth.current !== month) {
+            visibleMonth.current = month;
+
+            const year = newDate.year;
+            if (year) {
+              visibleYear.current = year;
+            }
 
-          // updating openHeight
-          setTimeout(() => {
-            // to wait for setDate() call in horizontal scroll (scrollPage())
-            const _numberOfWeeks = getNumberOfWeeksInMonth(newDate.dateString);
-            if (_numberOfWeeks !== numberOfWeeks.current) {
-              numberOfWeeks.current = _numberOfWeeks;
-              openHeight.current = getOpenHeight();
-              if (isOpen) {
-                bounceToPosition(openHeight.current);
-              }
+            // for horizontal scroll
+            if (visibleMonth.current !== getMonth(date)) {
+              const next = isLaterDate(newDate, date);
+              scrollPage(next);
             }
-          }, 0);
+
+            // updating openHeight
+            setTimeout(() => {
+              // to wait for setDate() call in horizontal scroll (scrollPage())
+              const _numberOfWeeks = getNumberOfWeeksInMonth(newDate.dateString);
+              if (_numberOfWeeks !== numberOfWeeks.current) {
+                numberOfWeeks.current = _numberOfWeeks;
+                openHeight.current = getOpenHeight();
+                if (isOpen) {
+                  bounceToPosition(openHeight.current);
+                }
+              }
+            }, 0);
+          }
         }
-      }
-    }, 100, {trailing: true, leading: false}
-  ), [date, scrollPage]);
+      },
+      100,
+      {trailing: true, leading: false}
+    ),
+    [date, scrollPage]
+  );
 
   /** Renders */
 
-  const _renderArrow = useCallback((direction: Direction) => {
-    if (isFunction(renderArrow)) {
-      return renderArrow(direction);
-    }
+  const _renderArrow = useCallback(
+    (direction: Direction) => {
+      if (isFunction(renderArrow)) {
+        return renderArrow(direction);
+      }
 
-    return (
-      <Image
-        source={direction === 'right' ? rightArrowImageSource : leftArrowImageSource}
-        style={style.current.arrowImage}
-        testID={`${testID}.${direction}Arrow`}
-      />
-    );
-  }, [renderArrow, rightArrowImageSource, leftArrowImageSource, testID]);
+      return (
+        <Image
+          source={direction === 'right' ? rightArrowImageSource : leftArrowImageSource}
+          style={style.current.arrowImage}
+          testID={`${testID}.${direction}Arrow`}
+        />
+      );
+    },
+    [renderArrow, rightArrowImageSource, leftArrowImageSource, testID]
+  );
 
   const renderWeekDaysNames = () => {
     return (
       <View style={weekDaysStyle}>
-        <WeekDaysNames
-          firstDay={firstDay}
-          style={style.current.dayHeader}
-        />
+        <WeekDaysNames firstDay={firstDay} style={style.current.dayHeader} />
       </View>
     );
   };
@@ -547,11 +593,7 @@ const ExpandableCalendar = forwardRef<ExpandableCalendarRef, ExpandableCalendarP
     const monthYear = new XDate(date)?.toString('MMMM yyyy');
 
     return (
-      <Animated.View
-        ref={header}
-        style={animatedHeaderStyle}
-        pointerEvents={'none'}
-      >
+      <Animated.View ref={header} style={animatedHeaderStyle} pointerEvents={'none'}>
         <Text allowFontScaling={false} style={style.current.headerTitle}>
           {monthYear}
         </Text>
@@ -563,33 +605,44 @@ const ExpandableCalendar = forwardRef<ExpandableCalendarRef, ExpandableCalendarP
   const renderKnob = () => {
     return (
       <View style={style.current.knobContainer} pointerEvents={'box-none'}>
-        <TouchableOpacity style={style.current.knob} testID={`${testID}.knob`} onPress={toggleCalendarPosition} hitSlop={knobHitSlop}/>
+        <TouchableOpacity
+          style={style.current.knob}
+          testID={`${testID}.knob`}
+          onPress={toggleCalendarPosition}
+          hitSlop={knobHitSlop}
+        />
       </View>
     );
   };
 
+  
+
   const renderWeekCalendar = () => {
     const WeekComponent = disableWeekScroll ? Week : WeekCalendar;
+    return (
+      <WeekComponent
+        showHeader
+        testID={`${testID}.weekCalendar`}
+        firstDay={firstDay}
+        {...others}
+        onPressArrowLeft={_onPressArrowLeft}
+        onPressArrowRight={_onPressArrowRight}
+        allowShadow={disableWeekScroll ? undefined : false}
+        current={disableWeekScroll || disablePan ? date : undefined}
+        theme={themeObject}
+        style={calendarStyle}
+        hideDayNames={true}
+        onDayPress={_onDayPress}
+        accessibilityElementsHidden // iOS
+        importantForAccessibility={'no-hide-descendants'} // Android
+      />
+    );
+  };
 
+  const renderAnimatedWeekCalendar = () => {
     return (
-      <Animated.View
-        ref={weekCalendarWrapper}
-        style={weekCalendarStyle}
-        pointerEvents={isOpen ? 'none' : 'auto'}
-      >
-        <WeekComponent
-          testID={`${testID}.weekCalendar`}
-          firstDay={firstDay}
-          {...others}
-          allowShadow={disableWeekScroll ? undefined : false}
-          current={disableWeekScroll ? date : undefined}
-          theme={themeObject}
-          style={calendarStyle}
-          hideDayNames={true}
-          onDayPress={_onDayPress}
-          accessibilityElementsHidden // iOS
-          importantForAccessibility={'no-hide-descendants'} // Android
-        />
+      <Animated.View ref={weekCalendarWrapper} style={weekCalendarStyle} pointerEvents={isOpen ? 'none' : 'auto'}>
+        {renderWeekCalendar()}
       </Animated.View>
     );
   };
@@ -624,6 +677,30 @@ const ExpandableCalendar = forwardRef<ExpandableCalendarRef, ExpandableCalendarP
     );
   };
 
+  const renderStaticCalendar = () => {
+    return (
+      <View>
+        {isOpen ? renderCalendarList() : renderWeekCalendar()}
+      </View>
+    );
+  };
+
+  const renderAnimatedCalendar = () => {
+    return (
+      <Animated.View
+        testID={`${testID}.expandableContainer`}
+        ref={wrapper}
+        style={wrapperStyle}
+        {...panResponder.panHandlers}
+      >
+        {renderCalendarList()}
+        {renderAnimatedWeekCalendar()}
+        {!hideKnob && renderKnob()}
+        {!horizontal && renderAnimatedHeader()}
+      </Animated.View>
+    );
+  };
+
   return (
     <View testID={testID} style={containerStyle}>
       {screenReaderEnabled ? (
@@ -636,13 +713,10 @@ const ExpandableCalendar = forwardRef<ExpandableCalendarRef, ExpandableCalendarP
           hideExtraDays
           renderArrow={_renderArrow}
         />
+      ) : disablePan ? (
+        renderStaticCalendar()
       ) : (
-        <Animated.View testID={`${testID}.expandableContainer`} ref={wrapper} style={wrapperStyle} {...panResponder.panHandlers}>
-          {renderCalendarList()}
-          {renderWeekCalendar()}
-          {!hideKnob && renderKnob()}
-          {!horizontal && renderAnimatedHeader()}
-        </Animated.View>
+        renderAnimatedCalendar()
       )}
     </View>
   );
diff --git a/src/expandableCalendar/style.ts b/src/expandableCalendar/style.ts
index 99bb336188..453aefbda1 100644
--- a/src/expandableCalendar/style.ts
+++ b/src/expandableCalendar/style.ts
@@ -156,6 +156,10 @@ export default function styleConstructor(theme: Theme = {}) {
         }
       })
     },
+    weekCalendarHeader: {
+      backgroundColor: appStyle.calendarBackground,
+      paddingHorizontal: 15
+    },
     todayButtonText: {
       color: appStyle.todayButtonTextColor,
       fontSize: constants.isTablet ? appStyle.todayButtonFontSize + 2 : appStyle.todayButtonFontSize,

From 5b800de1071b667217094dd41a5f82f020d35fd9 Mon Sep 17 00:00:00 2001
From: Nitzan Yizhar <nitzany@wix.com>
Date: Mon, 21 Apr 2025 16:43:25 +0300
Subject: [PATCH 2/4] View height based on heights

---
 src/calendar-list/index.tsx                   |  2 +-
 src/expandableCalendar/WeekCalendar/index.tsx |  2 +-
 src/expandableCalendar/index.tsx              | 11 ++++++++---
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/calendar-list/index.tsx b/src/calendar-list/index.tsx
index 8f0e3b3270..abd34f284c 100644
--- a/src/calendar-list/index.tsx
+++ b/src/calendar-list/index.tsx
@@ -13,8 +13,8 @@ import styleConstructor from './style';
 import Calendar, {CalendarProps} from '../calendar';
 import CalendarListItem from './item';
 import CalendarHeader from '../calendar/header/index';
-export {CalendarHeader};
 import isEqual from 'lodash/isEqual';
+export {CalendarHeader};
 
 const CALENDAR_WIDTH = constants.screenWidth;
 const CALENDAR_HEIGHT = 360;
diff --git a/src/expandableCalendar/WeekCalendar/index.tsx b/src/expandableCalendar/WeekCalendar/index.tsx
index 8e1bd3bef4..f19c98d0ee 100644
--- a/src/expandableCalendar/WeekCalendar/index.tsx
+++ b/src/expandableCalendar/WeekCalendar/index.tsx
@@ -210,7 +210,7 @@ const WeekCalendar = (props: WeekCalendarProps) => {
       },
       onViewableItemsChanged
     }]);
-
+    
     const renderCalendarHeader = () => {
       return (
         <CalendarHeader
diff --git a/src/expandableCalendar/index.tsx b/src/expandableCalendar/index.tsx
index b4894127ec..ad16a888e1 100644
--- a/src/expandableCalendar/index.tsx
+++ b/src/expandableCalendar/index.tsx
@@ -150,9 +150,11 @@ const ExpandableCalendar = forwardRef<ExpandableCalendarRef, ExpandableCalendarP
         layout: {height}
       }
     }: LayoutChangeEvent) => {
-      setHeaderHeight(height || DEFAULT_HEADER_HEIGHT);
+      if (height !== headerHeight) {
+        setHeaderHeight(height || DEFAULT_HEADER_HEIGHT);
+      }
     },
-    []
+    [headerHeight]
   );
 
   /** Date */
@@ -625,10 +627,12 @@ const ExpandableCalendar = forwardRef<ExpandableCalendarRef, ExpandableCalendarP
         testID={`${testID}.weekCalendar`}
         firstDay={firstDay}
         {...others}
+        onHeaderLayout={onHeaderLayout}
         onPressArrowLeft={_onPressArrowLeft}
         onPressArrowRight={_onPressArrowRight}
         allowShadow={disableWeekScroll ? undefined : false}
         current={disableWeekScroll || disablePan ? date : undefined}
+        renderArrow={_renderArrow}
         theme={themeObject}
         style={calendarStyle}
         hideDayNames={true}
@@ -679,8 +683,9 @@ const ExpandableCalendar = forwardRef<ExpandableCalendarRef, ExpandableCalendarP
 
   const renderStaticCalendar = () => {
     return (
-      <View>
+      <View style={{height: isOpen ? openHeight.current : closedHeight}}>
         {isOpen ? renderCalendarList() : renderWeekCalendar()}
+        {!hideKnob && renderKnob()}
       </View>
     );
   };

From efbd3e773bb3a470b4c2adc6ffe4f695b180b652 Mon Sep 17 00:00:00 2001
From: Nitzan Yizhar <nitzany@wix.com>
Date: Tue, 22 Apr 2025 09:56:23 +0300
Subject: [PATCH 3/4] Added day names to week calendar header

---
 src/expandableCalendar/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/expandableCalendar/index.tsx b/src/expandableCalendar/index.tsx
index ad16a888e1..fa11afcc88 100644
--- a/src/expandableCalendar/index.tsx
+++ b/src/expandableCalendar/index.tsx
@@ -635,7 +635,7 @@ const ExpandableCalendar = forwardRef<ExpandableCalendarRef, ExpandableCalendarP
         renderArrow={_renderArrow}
         theme={themeObject}
         style={calendarStyle}
-        hideDayNames={true}
+        hideDayNames={disablePan ? false : true}
         onDayPress={_onDayPress}
         accessibilityElementsHidden // iOS
         importantForAccessibility={'no-hide-descendants'} // Android

From d8ae99678a64b51da51807b454ed6ca474cb5311 Mon Sep 17 00:00:00 2001
From: Nitzan Yizhar <nitzany@wix.com>
Date: Wed, 23 Apr 2025 10:08:36 +0300
Subject: [PATCH 4/4] Changes for day names

---
 src/expandableCalendar/WeekCalendar/index.tsx | 1 +
 src/expandableCalendar/index.tsx              | 4 ++--
 src/expandableCalendar/style.ts               | 6 ++++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/expandableCalendar/WeekCalendar/index.tsx b/src/expandableCalendar/WeekCalendar/index.tsx
index f19c98d0ee..120c41085d 100644
--- a/src/expandableCalendar/WeekCalendar/index.tsx
+++ b/src/expandableCalendar/WeekCalendar/index.tsx
@@ -220,6 +220,7 @@ const WeekCalendar = (props: WeekCalendarProps) => {
           month={currentMonth}
           accessibilityElementsHidden={true} // iOS
           importantForAccessibility={'no-hide-descendants'} // Android
+          hideDayNames={true}
         />
       );
     };
diff --git a/src/expandableCalendar/index.tsx b/src/expandableCalendar/index.tsx
index fa11afcc88..eeda8acecc 100644
--- a/src/expandableCalendar/index.tsx
+++ b/src/expandableCalendar/index.tsx
@@ -606,7 +606,7 @@ const ExpandableCalendar = forwardRef<ExpandableCalendarRef, ExpandableCalendarP
 
   const renderKnob = () => {
     return (
-      <View style={style.current.knobContainer} pointerEvents={'box-none'}>
+      <View style={[style.current.knobContainer, !disablePan && style.current.knobPosition]} pointerEvents={'box-none'}>
         <TouchableOpacity
           style={style.current.knob}
           testID={`${testID}.knob`}
@@ -623,7 +623,7 @@ const ExpandableCalendar = forwardRef<ExpandableCalendarRef, ExpandableCalendarP
     const WeekComponent = disableWeekScroll ? Week : WeekCalendar;
     return (
       <WeekComponent
-        showHeader
+        showHeader={disablePan}
         testID={`${testID}.weekCalendar`}
         firstDay={firstDay}
         {...others}
diff --git a/src/expandableCalendar/style.ts b/src/expandableCalendar/style.ts
index 453aefbda1..a08095504c 100644
--- a/src/expandableCalendar/style.ts
+++ b/src/expandableCalendar/style.ts
@@ -30,12 +30,14 @@ export default function styleConstructor(theme: Theme = {}) {
     container: {
       backgroundColor: appStyle.calendarBackground
     },
-    knobContainer: {
+    knobPosition: {
       position: 'absolute',
       left: 0,
       right: 0,
-      height: KNOB_CONTAINER_HEIGHT,
       bottom: 0,
+    },
+    knobContainer: {
+      height: KNOB_CONTAINER_HEIGHT,
       alignItems: 'center',
       justifyContent: 'center',
       backgroundColor: appStyle.calendarBackground