Conditional rendering of week calendar and calendar list

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>
   );
 };

src/calendar-list/index.tsx

@@ -14,6 +14,7 @@ import Calendar, {CalendarProps} from '../calendar';
 import CalendarListItem from './item';
 import CalendarHeader from '../calendar/header/index';
 import isEqual from 'lodash/isEqual';
+export {CalendarHeader};
 
 const CALENDAR_WIDTH = constants.screenWidth;
 const CALENDAR_HEIGHT = 360;

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, []);
 
@@ -206,38 +210,50 @@ const WeekCalendar = (props: WeekCalendarProps) => {
       },
       onViewableItemsChanged
     }]);
+
+    const renderCalendarHeader = () => {
+      return (
+        <CalendarHeader
+          {...headerProps}
+          testID={`${testID}.staticHeader`}
+          style={style.current.weekCalendarHeader}
+          month={currentMonth}
+          accessibilityElementsHidden={true} // iOS
+          importantForAccessibility={'no-hide-descendants'} // Android
+          hideDayNames={true}
+        />
+      );
+    };
 
-  return (
-    <View
-      testID={testID}
-      style={weekCalendarStyle}
-    >
-      {!hideDayNames && (
-        <View style={containerStyle}>
-          {renderWeekDaysNames}
+    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) {