Timeline calendar num of days issues

src/dateutils.ts

@@ -20,7 +20,20 @@ export function sameDate(a?: XDate, b?: XDate) {
     return false;
   } else {
     return a?.getFullYear() === b?.getFullYear() && a?.getMonth() === b?.getMonth() && a?.getDate() === b?.getDate();
-  } 
+  }
+}
+
+export function sameWeekRange(a: string, b: string, numberOfDays: number, firstDayOfWeek: string){
+  const aDate = new XDate(a);
+  const bDate = new XDate(b);
+  const firstDayDate = new XDate(firstDayOfWeek);
+  const aDiff = aDate.getTime() - firstDayDate.getTime();
+  const bDiff = bDate.getTime() - firstDayDate.getTime();
+  const aTotalDays = Math.ceil(aDiff / (1000 * 3600 * 24));
+  const bTotalDays = Math.ceil(bDiff / (1000 * 3600 * 24));
+  const aWeek = Math.floor(aTotalDays / numberOfDays);
+  const bWeek = Math.floor(bTotalDays / numberOfDays);
+  return aWeek === bWeek;
 }
 
 export function sameWeek(a: string, b: string, firstDayOfWeek: number) {

src/day-state-manager.ts

@@ -3,10 +3,10 @@ const {toMarkingFormat} = require('./interface');
 
 
 export function getState(day: XDate, current: XDate, props: any) {
-  const {minDate, maxDate, disabledByDefault, context} = props;
+  const {minDate, maxDate, disabledByDefault, context, disableDaySelection} = props;
   let state = '';
 
-  if ((context?.date ?? toMarkingFormat(current)) === toMarkingFormat(day)) {
+  if (!disableDaySelection && ((context?.date ?? toMarkingFormat(current)) === toMarkingFormat(day))) {
     state = 'selected';
   } else if (isToday(day)) {
     state = 'today';

src/expandableCalendar/WeekCalendar/index.tsx

@@ -3,7 +3,7 @@ import XDate from 'xdate';
 import React, {useCallback, useContext, useMemo, useRef, useState} from 'react';
 import {FlatList, View, ViewToken} from 'react-native';
 
-import {sameWeek} from '../../dateutils';
+import {sameWeek, sameWeekRange} from '../../dateutils';
 import {toMarkingFormat} from '../../interface';
 import {DateData} from '../../types';
 import styleConstructor from '../style';
@@ -23,6 +23,7 @@ const APPLY_ANDROID_FIX = constants.isAndroid && constants.isRTL;
 export interface WeekCalendarProps extends CalendarListProps {
   /** whether to have shadow/elevation for the calendar */
   allowShadow?: boolean;
+  disableDaySelection?: boolean;
 }
 
 /**
@@ -36,7 +37,8 @@ const WeekCalendar = (props: WeekCalendarProps) => {
     hideDayNames,
     current,
     theme,
-    testID
+    testID,
+    disableDaySelection,
   } = props;
   const context = useContext(CalendarContext);
   const {allowShadow = true, ...calendarListProps} = props;
@@ -52,7 +54,10 @@ const WeekCalendar = (props: WeekCalendarProps) => {
 
   useDidUpdate(() => {
     if (updateSource !== UpdateSources.WEEK_SCROLL) {
-      const pageIndex = items.current.findIndex(item => sameWeek(item, date, firstDay));
+      const pageIndex = items.current.findIndex(
+        item => (numberOfDays && numberOfDays > 1) ?
+          sameWeekRange(item, date, numberOfDays, item) :
+          sameWeek(item, date, firstDay));
       if (pageIndex !== currentIndex.current) {
         if (pageIndex >= 0) {
           visibleWeek.current = items.current[pageIndex];
@@ -95,9 +100,10 @@ const WeekCalendar = (props: WeekCalendarProps) => {
         onDayPress={_onDayPress}
         numberOfDays={numberOfDays}
         timelineLeftInset={timelineLeftInset}
+        disableDaySelection={disableDaySelection}
       />
     );
-  },[firstDay, _onDayPress, context, date]);
+  },[firstDay, _onDayPress, context, date, disableDaySelection]);
 
   const keyExtractor = useCallback((item) => item, []);
 

src/expandableCalendar/index.tsx

@@ -221,7 +221,7 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
         paddingRight: isNumber(rightPaddings) ? rightPaddings + 6 : DAY_NAMES_PADDING
       }
     ];
-  }, [calendarStyle, numberOfDays]);
+  }, [calendarStyle]);
 
   const animatedHeaderStyle = useMemo(() => {
     return [style.current.header, {height: HEADER_HEIGHT + 10, top: headerDeltaY.current}];
@@ -539,6 +539,7 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
           onDayPress={_onDayPress}
           accessibilityElementsHidden // iOS
           importantForAccessibility={'no-hide-descendants'} // Android
+          disableDaySelection={!!numberOfDays && numberOfDays > 1}
         />
       </Animated.View>
     );

src/expandableCalendar/week.tsx

@@ -14,6 +14,7 @@ import {CalendarContextProps} from './Context';
 
 export type WeekProps = CalendarProps & {
   context?: CalendarContextProps;
+  disableDaySelection?: boolean;
 };
 
 function arePropsEqual(prevProps: WeekProps, nextProps: WeekProps) {