Fix/period day styling (#2559)

* Calendar - add 'disabledByWeekDays' prop + cleaning props

* Update src/calendar/header/index.tsx

Co-authored-by: Nitzan Yizhar <[email protected]>

* PeriodDay - fix styling to match basic day

* fix position when marking, fix today style

* remove prop description fix

---------

Co-authored-by: Nitzan Yizhar <[email protected]>

Author: Inbal-Tish

example/src/screens/calendarScreen.tsx

@@ -3,7 +3,7 @@ import {StyleSheet, View, ScrollView, Text, TouchableOpacity} from 'react-native
 import {Calendar, CalendarUtils} from 'react-native-calendars';
 import testIDs from '../testIDs';
 
-const INITIAL_DATE = '2022-07-06';
+const INITIAL_DATE = '2024-11-06';
 
 const CalendarScreen = () => {
   const [selected, setSelected] = useState(INITIAL_DATE);
@@ -135,11 +135,10 @@ const CalendarScreen = () => {
           current={INITIAL_DATE}
           minDate={getDate(-5)}
           displayLoadingIndicator
-          markingType={'period'}
           theme={{
             calendarBackground: '#333248',
             textSectionTitleColor: 'white',
-            textSectionTitleDisabledColor: 'gray',
+            textSectionTitleDisabledColor: 'pink',
             dayTextColor: 'red',
             todayTextColor: 'white',
             selectedDayTextColor: 'white',
@@ -161,6 +160,7 @@ const CalendarScreen = () => {
               }
             }
           }}
+          markingType={'period'}
           markedDates={{
             [getDate(-2)]: {disabled: true},
             [getDate(1)]: {textColor: 'pink'},
@@ -172,9 +172,11 @@ const CalendarScreen = () => {
             [getDate(26)]: {color: 'gray'},
             [getDate(27)]: {endingDay: true, color: 'gray'}
           }}
-          disabledDaysIndexes={[3]}
-          disabledByWeekDays={[3]}
+          firstDay={1}
+          disabledDaysIndexes={[1]}
+          disabledByWeekDays={[1]}
           disableAllTouchEventsForDisabledDays
+          onDayPress={(day) => console.warn(`${day.dateString} pressed`)}
         />
       </Fragment>
     );
@@ -200,7 +202,7 @@ const CalendarScreen = () => {
               }
             },
             [getDate(11)]: {color: '#70d7c7', textColor: 'white', marked: true, dotColor: 'white'},
-            [getDate(12)]: {color: '#70d7c7', inactive: true},
+            [getDate(12)]: {color: '#70d7c7', inactive: true, marked: true},
             [getDate(13)]: {
               endingDay: true,
               color: '#50cebb',
@@ -215,7 +217,8 @@ const CalendarScreen = () => {
           }}
           theme={{
             textInactiveColor: '#a68a9f',
-            textSectionTitleDisabledColor: 'grey',
+            inactiveDotColor: '#a68a9f'
+,           textSectionTitleDisabledColor: 'grey',
             textSectionTitleColor: '#319e8e',
             arrowColor: '#319e8e'
           }}

src/calendar/day/basic/index.tsx

@@ -1,10 +1,9 @@
 import React, {Fragment, useCallback, useRef} from 'react';
 import {TouchableOpacity, Text, View, ViewProps} from 'react-native';
-
 import {xdateToData} from '../../../interface';
 import {Theme, DayState, MarkingTypes, DateData} from '../../../types';
-import styleConstructor from './style';
 import Marking, {MarkingProps} from '../marking';
+import styleConstructor from './style';
 
 
 export interface BasicDayProps extends ViewProps {
@@ -26,10 +25,10 @@ export interface BasicDayProps extends ViewProps {
   disableAllTouchEventsForDisabledDays?: boolean;
   /** Disable all touch events for inactive days (can be override with disableTouchEvent in markedDates) */
   disableAllTouchEventsForInactiveDays?: boolean;
-  /** Test ID */
-  testID?: string;
   /** Accessibility label */
   accessibilityLabel?: string;
+  /** Test ID */
+  testID?: string;
 }
 
 const BasicDay = (props: BasicDayProps) => {
@@ -47,16 +46,17 @@ const BasicDay = (props: BasicDayProps) => {
     children,
     testID
   } = props;
+  const dateData = date ? xdateToData(date) : undefined;
   const style = useRef(styleConstructor(theme));
+
   const _marking = marking || {};
   const isSelected = _marking.selected || state === 'selected';
   const isDisabled = typeof _marking.disabled !== 'undefined' ? _marking.disabled : state === 'disabled';
-  const isInactive = _marking?.inactive;
-  const isToday = state === 'today';
+  const isInactive = typeof marking?.inactive !== 'undefined' ? marking.inactive : state === 'inactive';
+  const isToday = typeof marking?.today !== 'undefined' ? marking.today : state === 'today';
   const isMultiDot = markingType === Marking.markings.MULTI_DOT;
   const isMultiPeriod = markingType === Marking.markings.MULTI_PERIOD;
   const isCustom = markingType === Marking.markings.CUSTOM;
-  const dateData = date ? xdateToData(date) : undefined;
 
   const shouldDisableTouchEvent = () => {
     const {disableTouchEvent} = _marking;
@@ -113,7 +113,7 @@ const BasicDay = (props: BasicDayProps) => {
       styles.push(style.current.inactiveText);
     }
 
-    //Custom marking type
+    // Custom marking type
     if (isCustom && customStyles && customStyles.text) {
       styles.push(customStyles.text);
     }
@@ -172,8 +172,8 @@ const BasicDay = (props: BasicDayProps) => {
       <TouchableOpacity
         testID={testID}
         style={getContainerStyle()}
-        disabled={shouldDisableTouchEvent()}
         activeOpacity={activeOpacity}
+        disabled={shouldDisableTouchEvent()}
         onPress={!shouldDisableTouchEvent() ? _onPress : undefined}
         onLongPress={!shouldDisableTouchEvent() ? _onLongPress : undefined}
         accessible

src/calendar/day/basic/style.ts

@@ -15,26 +15,24 @@ export default function styleConstructor(theme: Theme = {}) {
       height: 32,
       alignItems: 'center'
     },
+    today: {
+      backgroundColor: appStyle.todayBackgroundColor,
+      borderRadius: 16
+    },
+    selected: {
+      backgroundColor: appStyle.selectedDayBackgroundColor,
+      borderRadius: 16
+    },
+    
     text: {
-      marginTop: constants.isAndroid ? 4 : 6,
       fontSize: appStyle.textDayFontSize,
       fontFamily: appStyle.textDayFontFamily,
       fontWeight: appStyle.textDayFontWeight,
       color: appStyle.dayTextColor,
-      backgroundColor: 'rgba(255, 255, 255, 0)',
+      backgroundColor: 'rgba(0, 0, 0, 0)',
+      marginTop: constants.isAndroid ? 4 : 6,
       ...appStyle.textDayStyle
     },
-    alignedText: {
-      marginTop: constants.isAndroid ? 4 : 6
-    },
-    selected: {
-      backgroundColor: appStyle.selectedDayBackgroundColor,
-      borderRadius: 16
-    },
-    today: {
-      backgroundColor: appStyle.todayBackgroundColor,
-      borderRadius: 16
-    },
     todayText: {
       color: appStyle.todayTextColor
     },
@@ -47,27 +45,7 @@ export default function styleConstructor(theme: Theme = {}) {
     inactiveText: {
       color: appStyle.textInactiveColor
     },
-    dot: {
-      width: 4,
-      height: 4,
-      marginTop: 1,
-      borderRadius: 2,
-      opacity: 0,
-      ...appStyle.dotStyle
-    },
-    visibleDot: {
-      opacity: 1,
-      backgroundColor: appStyle.dotColor
-    },
-    selectedDot: {
-      backgroundColor: appStyle.selectedDotColor
-    },
-    disabledDot: {
-      backgroundColor: appStyle.disabledDotColor || appStyle.dotColor
-    },
-    todayDot: {
-      backgroundColor: appStyle.todayDotColor || appStyle.dotColor
-    },
+    
     ...(theme['stylesheet.day.basic'] || {})
   });
 }

src/calendar/day/dot/style.ts

@@ -22,13 +22,13 @@ export default function styleConstructor(theme: Theme = {}) {
       backgroundColor: appStyle.selectedDotColor
     },
     disabledDot: {
-      backgroundColor: appStyle.disabledDotColor || appStyle.dotColor
+      backgroundColor: appStyle.disabledDotColor
     },
     inactiveDot: {
-      backgroundColor: appStyle.inactiveDotColor || appStyle.dotColor
+      backgroundColor: appStyle.inactiveDotColor
     },
     todayDot: {
-      backgroundColor: appStyle.todayDotColor || appStyle.dotColor
+      backgroundColor: appStyle.todayDotColor
     },
     ...(theme['stylesheet.dot'] || {})
   });