Calendar - add 'disabledByWeekDays' prop (#2557)

* Calendar - add 'disabledByWeekDays' prop + cleaning props

* Update src/calendar/header/index.tsx

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

* remove prop description fix

---------

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

Author: Inbal-Tish

example/src/screens/calendarScreen.tsx

@@ -37,7 +37,7 @@ const CalendarScreen = () => {
   const renderCalendarWithSelectableDate = () => {
     return (
       <Fragment>
-        <Text style={styles.text}>Calendar with selectable date</Text>
+        <Text style={styles.text}>Selectable date</Text>
         <Calendar
           testID={testIDs.calendars.FIRST}
           enableSwipeMonths
@@ -50,19 +50,19 @@ const CalendarScreen = () => {
     );
   };
 
-  const renderCalendarWithWeekNumbers = () => {
+  const renderCalendarWithWeekNumbersAndSpinner = () => {
     return (
       <Fragment>
-        <Text style={styles.text}>Calendar with week numbers</Text>
-        <Calendar style={styles.calendar} hideExtraDays showWeekNumbers/>
+        <Text style={styles.text}>Week numbers and spinner</Text>
+        <Calendar style={styles.calendar} hideExtraDays showWeekNumbers displayLoadingIndicator/>
       </Fragment>
     );
   };
 
   const renderCalendarWithMinAndMaxDates = () => {
     return (
       <Fragment>
-        <Text style={styles.text}>Calendar with min and max dates</Text>
+        <Text style={styles.text}>Min and max dates</Text>
         <Calendar
           style={styles.calendar}
           hideExtraDays
@@ -78,7 +78,7 @@ const CalendarScreen = () => {
   const renderCalendarWithMarkedDatesAndHiddenArrows = () => {
     return (
       <Fragment>
-        <Text style={styles.text}>Calendar with marked dates and hidden arrows</Text>
+        <Text style={styles.text}>Marked dates and hidden arrows</Text>
         <Calendar
           style={styles.calendar}
           current={INITIAL_DATE}
@@ -92,7 +92,6 @@ const CalendarScreen = () => {
             [getDate(10)]: {disabled: true, activeOpacity: 0, disableTouchEvent: false}
           }}
           hideArrows={true}
-          // disabledByDefault={true}
         />
       </Fragment>
     );
@@ -101,7 +100,7 @@ const CalendarScreen = () => {
   const renderCalendarWithMultiDotMarking = () => {
     return (
       <Fragment>
-        <Text style={styles.text}>Calendar with multi-dot marking</Text>
+        <Text style={styles.text}>Multi-dot marking</Text>
         <Calendar
           style={styles.calendar}
           current={INITIAL_DATE}
@@ -127,10 +126,10 @@ const CalendarScreen = () => {
     );
   };
 
-  const renderCalendarWithPeriodMarkingAndSpinner = () => {
+  const renderCalendarWithThemeAndDisabledDays = () => {
     return (
       <Fragment>
-        <Text style={styles.text}>Calendar with period marking and spinner</Text>
+        <Text style={styles.text}>Custom theme and disabled Wednesdays</Text>
         <Calendar
           // style={styles.calendar}
           current={INITIAL_DATE}
@@ -173,6 +172,9 @@ const CalendarScreen = () => {
             [getDate(26)]: {color: 'gray'},
             [getDate(27)]: {endingDay: true, color: 'gray'}
           }}
+          disabledDaysIndexes={[3]}
+          disabledByWeekDays={[3]}
+          disableAllTouchEventsForDisabledDays
         />
       </Fragment>
     );
@@ -181,7 +183,7 @@ const CalendarScreen = () => {
   const renderCalendarWithPeriodMarkingAndDotMarking = () => {
     return (
       <Fragment>
-        <Text style={styles.text}>Calendar with period marking and dot marking</Text>
+        <Text style={styles.text}>Marking and dot marking</Text>
         <Calendar
           current={INITIAL_DATE}
           minDate={getDate(-14)}
@@ -211,7 +213,6 @@ const CalendarScreen = () => {
             },
             [getDate(25)]: {inactive: true, disableTouchEvent: true}
           }}
-          disabledDaysIndexes={[0, 6]}
           theme={{
             textInactiveColor: '#a68a9f',
             textSectionTitleDisabledColor: 'grey',
@@ -227,7 +228,7 @@ const CalendarScreen = () => {
   const renderCalendarWithMultiPeriodMarking = () => {
     return (
       <Fragment>
-        <Text style={styles.text}>Calendar with multi-period marking</Text>
+        <Text style={styles.text}>Multi-period marking</Text>
         <Calendar
           style={styles.calendar}
           current={INITIAL_DATE}
@@ -262,7 +263,7 @@ const CalendarScreen = () => {
   const renderCalendarWithCustomMarkingType = () => {
     return (
       <Fragment>
-        <Text style={styles.text}>Custom calendar with custom marking type</Text>
+        <Text style={styles.text}>Custom marking type</Text>
         <Calendar
           style={styles.calendar}
           hideExtraDays
@@ -360,7 +361,7 @@ const CalendarScreen = () => {
   const renderCalendarWithCustomDay = () => {
     return (
       <Fragment>
-        <Text style={styles.text}>Calendar with custom day component</Text>
+        <Text style={styles.text}>Custom day component</Text>
         <Calendar
           style={[styles.calendar, styles.customCalendar]}
           dayComponent={({date, state}) => {
@@ -416,7 +417,7 @@ const CalendarScreen = () => {
 
     return (
       <Fragment>
-        <Text style={styles.text}>Calendar with custom header title</Text>
+        <Text style={styles.text}>Custom header title</Text>
         <Calendar
           style={styles.calendar}
           customHeaderTitle={CustomHeaderTitle}
@@ -464,7 +465,7 @@ const CalendarScreen = () => {
 
     return (
       <Fragment>
-        <Text style={styles.text}>Calendar with custom header component</Text>
+        <Text style={styles.text}>Custom header component</Text>
         <Calendar
           initialDate={INITIAL_DATE}
           testID={testIDs.calendars.LAST}
@@ -478,7 +479,7 @@ const CalendarScreen = () => {
   const renderCalendarWithInactiveDays = () => {
     return (
       <Fragment>
-        <Text style={styles.text}>Calendar with inactive days</Text>
+        <Text style={styles.text}>Inactive days</Text>
         <Calendar
           style={styles.calendar}
           disableAllTouchEventsForInactiveDays
@@ -500,15 +501,15 @@ const CalendarScreen = () => {
     return (
       <Fragment>
         {renderCalendarWithSelectableDate()}
-        {renderCalendarWithWeekNumbers()}
+        {renderCalendarWithWeekNumbersAndSpinner()}
         {renderCalendarWithMinAndMaxDates()}
         {renderCalendarWithCustomDay()}
         {renderCalendarWithInactiveDays()}
         {renderCalendarWithCustomHeaderTitle()}
         {renderCalendarWithCustomHeader()}
         {renderCalendarWithMarkedDatesAndHiddenArrows()}
         {renderCalendarWithMultiDotMarking()}
-        {renderCalendarWithPeriodMarkingAndSpinner()}
+        {renderCalendarWithThemeAndDisabledDays()}
         {renderCalendarWithPeriodMarkingAndDotMarking()}
         {renderCalendarWithMultiPeriodMarking()}
         {renderCalendarWithCustomMarkingType()}

src/calendar/calendar.api.json

@@ -11,6 +11,11 @@
   ],
   "example": "https://github.com/wix/react-native-calendars/blob/master/example/src/screens/calendars.tsx",
   "props": [
+    {
+      "name": "testID",
+      "type": "string",
+      "description": "Test ID"
+    },
     {
       "name": "theme",
       "type": "Theme",
@@ -46,6 +51,11 @@
       "type": "string",
       "description": "Maximum date that can be selected, dates after maxDate will be grayed out"
     },
+    {
+      "name": "allowSelectionOutOfRange",
+      "type": "boolean",
+      "description": "Whether to allow selection of dates before minDate or after maxDate"
+    },
     {
       "name": "firstDay",
       "type": "number",
@@ -79,7 +89,7 @@
     {
       "name": "disableMonthChange",
       "type": "boolean",
-      "description": "Whether to disable changing month when click on days of other months (when hideExtraDays is false)"
+      "description": "Whether to disable changing month when click on days of other months (when hideExtraDays = false)"
     },
     {
       "name": "enableSwipeMonths",
@@ -92,9 +102,9 @@
       "description": "Whether to disable days by default"
     },
     {
-      "name": "allowSelectionOutOfRange",
-      "type": "boolean",
-      "description": "Whether to allow selection of dates before minDate or after maxDate"
+      "name": "disabledByWeekDays",
+      "type": "number[]",
+      "description": "Disable dates by days of the week (Sunday=0)"
     },
     {
       "name": "onDayPress",

src/calendar/day/basic/index.tsx

@@ -8,25 +8,24 @@ import Marking, {MarkingProps} from '../marking';
 
 
 export interface BasicDayProps extends ViewProps {
+  /** Theme object */
+  theme?: Theme;
+  /** The Day's state ('selected' | 'disabled' | 'inactive' | 'today' | '') */
   state?: DayState;
   /** The marking object */
   marking?: MarkingProps;
-  /** Date marking style [dot/multi-dot/period/multi-period]. Default = 'dot' */
+  /** Date marking style ('dot' | 'multi-dot' | 'period' | 'multi-period' | 'custom'). Default = 'dot' */
   markingType?: MarkingTypes;
-  /** Theme object */
-  theme?: Theme;
   /** onPress callback */
   onPress?: (date?: DateData) => void;
   /** onLongPress callback */
   onLongPress?: (date?: DateData) => void;
   /** The date to return from press callbacks */
   date?: string;
-
-  /** Disable all touch events for disabled days. can be override with disableTouchEvent in markedDates*/
+  /** Disable all touch events for disabled days (can be override with disableTouchEvent in markedDates) */
   disableAllTouchEventsForDisabledDays?: boolean;
-  /** Disable all touch events for inactive days. can be override with disableTouchEvent in markedDates*/
+  /** Disable all touch events for inactive days (can be override with disableTouchEvent in markedDates) */
   disableAllTouchEventsForInactiveDays?: boolean;
-
   /** Test ID */
   testID?: string;
   /** Accessibility label */

src/calendar/header/index.tsx

@@ -20,9 +20,13 @@ import styleConstructor from './style';
 import {Theme, Direction} from '../../types';
 
 export interface CalendarHeaderProps {
+  /** The current month presented in the calendar */
   month?: XDate;
+  /** A callback for when a month is changed from the headers arrows */
   addMonth?: (num: number) => void;
-
+  
+  /** The current date presented */
+  current?: string;
   /** Specify theme properties to override specific styles for calendar parts */
   theme?: Theme;
   /** If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday */
@@ -37,13 +41,13 @@ export interface CalendarHeaderProps {
   hideDayNames?: boolean;
   /** Hide month navigation arrows */
   hideArrows?: boolean;
-  /** Replace default arrows with custom ones (direction can be 'left' or 'right') */
+  /** Replace default arrows with custom ones (direction = 'left' | 'right') */
   renderArrow?: (direction: Direction) => ReactNode;
   /** Handler which gets executed when press arrow icon left. It receive a callback can go back month */
   onPressArrowLeft?: (method: () => void, month?: XDate) => void; //TODO: replace with string
   /** Handler which gets executed when press arrow icon right. It receive a callback can go next month */
   onPressArrowRight?: (method: () => void, month?: XDate) => void; //TODO: replace with string
-  /** Left & Right arrows. Additional distance outside of the buttons in which a press is detected, default: 20 */
+  /** Left & Right arrows. Additional distance outside of the buttons in which a press is detected. Default = 20 */
   arrowsHitSlop?: Insets | number;
   /** Disable left arrow */
   disableArrowLeft?: boolean;
@@ -55,18 +59,19 @@ export interface CalendarHeaderProps {
   renderHeader?: (date?: XDate) => ReactNode; //TODO: replace with string
   /** Replace default title with custom element */
   customHeaderTitle?: JSX.Element;
-
-  /** Provide aria-level for calendar heading for proper accessibility when used with web (react-native-web) */
-  webAriaLevel?: number;
+  /** Test ID */
   testID?: string;
+  /** Specify style for header container element */
   style?: StyleProp<ViewStyle>;
+  /** Provide aria-level for calendar heading for proper accessibility when used with web (react-native-web) */
+  webAriaLevel?: number;
+  /** whether the accessibility elements contained within this accessibility element are hidden (iOS only) */
   accessibilityElementsHidden?: boolean;
+  /** controlling if a view fires accessibility events and if it is reported to accessibility services (Android only) */
   importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants';
-  /** The number of days to present in the header */
+  /** The number of days to present in the header (for example for Timeline display) */
   numberOfDays?: number;
-  /** The current date presented */
-  current?: string;
-  /** Left inset for the timeline calendar header, default is 72 */
+  /** Left inset for the timeline calendar header. Default = 72 */
   timelineLeftInset?: number;
 }
 

src/calendar/index.tsx

@@ -5,7 +5,6 @@ import React, {useRef, useState, useEffect, useCallback, useMemo} from 'react';
 import {View, ViewStyle, StyleProp} from 'react-native';
 // @ts-expect-error
 import GestureRecognizer, {swipeDirections} from 'react-native-swipe-gestures';
-
 import constants from '../commons/constants';
 import {page, isGTE, isLTE, sameMonth} from '../dateutils';
 import {xdateToData, parseDate, toMarkingFormat} from '../interface';
@@ -21,12 +20,6 @@ import BasicDay from './day/basic';
 export interface CalendarProps extends CalendarHeaderProps, DayProps {
   /** Specify theme properties to override specific styles for calendar parts */
   theme?: Theme;
-  /** If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday */
-  firstDay?: number;
-  /** Display loading indicator */
-  displayLoadingIndicator?: boolean;
-  /** Show week numbers */
-  showWeekNumbers?: boolean;
   /** Specify style for calendar container element */
   style?: StyleProp<ViewStyle>;
   /** Initially visible month */
@@ -37,6 +30,8 @@ export interface CalendarProps extends CalendarHeaderProps, DayProps {
   minDate?: string;
   /** Maximum date that can be selected, dates after maxDate will be grayed out */
   maxDate?: string;
+  /** Allow selection of dates before minDate or after maxDate */
+  allowSelectionOutOfRange?: boolean;
   /** Collection of dates that have to be marked */
   markedDates?: MarkedDates;
   /** Do not show days of other months in month page */
@@ -51,18 +46,20 @@ export interface CalendarProps extends CalendarHeaderProps, DayProps {
   onMonthChange?: (date: DateData) => void;
   /** Handler which gets executed when visible month changes in calendar */
   onVisibleMonthsChange?: (months: DateData[]) => void;
-  /** Disables changing month when click on days of other months (when hideExtraDays is false) */
+  /** Disables changing month when click on days of other months (when hideExtraDays = false) */
   disableMonthChange?: boolean;
   /** Enable the option to swipe between months */
   enableSwipeMonths?: boolean;
-  /** Disable days by default */
-  disabledByDefault?: boolean;
   /** Style passed to the header */
   headerStyle?: StyleProp<ViewStyle>;
   /** Allow rendering a totally custom header */
   customHeader?: any;
-  /** Allow selection of dates before minDate or after maxDate */
-  allowSelectionOutOfRange?: boolean;
+  /** Disable days by default */
+  disabledByDefault?: boolean;
+  /** Disable dates by days of the week (Sunday=0) */
+  disabledByWeekDays?: number[]
+  /** Test ID */
+  testID?: string;
 }
 
 /**
@@ -301,9 +298,6 @@ Calendar.propTypes = {
   ...CalendarHeader.propTypes,
   ...Day.propTypes,
   theme: PropTypes.object,
-  firstDay: PropTypes.number,
-  displayLoadingIndicator: PropTypes.bool,
-  showWeekNumbers: PropTypes.bool,
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.number]),
   current: PropTypes.string,
   initialDate: PropTypes.string,

src/day-state-manager.ts

@@ -3,7 +3,7 @@ const {toMarkingFormat} = require('./interface');
 
 
 export function getState(day: XDate, current: XDate, props: any, disableDaySelection?: boolean) {
-  const {minDate, maxDate, disabledByDefault, context} = props;
+  const {minDate, maxDate, disabledByDefault, disabledByWeekDays, context} = props;
   let state = '';
 
   if (!disableDaySelection && ((context?.date ?? toMarkingFormat(current)) === toMarkingFormat(day))) {
@@ -16,6 +16,8 @@ export function getState(day: XDate, current: XDate, props: any, disableDaySelec
     state = 'disabled';
   } else if (!sameMonth(day, current)) {
     state = 'disabled';
+  } else if (disabledByWeekDays && disabledByWeekDays.indexOf(day.getDay()) !== -1) {
+    state = 'disabled';
   }
 
   return state;