Skip to content

Commit 20d89d0

Browse files
nitzanyiznitzanyiz
committed
Merge remote-tracking branch 'origin' into release
2 parents a7ffe04 + b7ec3d1 commit 20d89d0

File tree

11 files changed

+197
-154
lines changed

11 files changed

+197
-154
lines changed

‎example/src/screens/calendarScreen.tsx‎

Lines changed: 29 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {StyleSheet, View, ScrollView, Text, TouchableOpacity} from 'react-native
33
import {Calendar, CalendarUtils} from 'react-native-calendars';
44
import testIDs from '../testIDs';
55

6-
const INITIAL_DATE = '2022-07-06';
6+
const INITIAL_DATE = '2024-11-06';
77

88
const CalendarScreen = () => {
99
const [selected, setSelected] = useState(INITIAL_DATE);
@@ -37,7 +37,7 @@ const CalendarScreen = () => {
3737
const renderCalendarWithSelectableDate = () => {
3838
return (
3939
<Fragment>
40-
<Text style={styles.text}>Calendar with selectable date</Text>
40+
<Text style={styles.text}>Selectable date</Text>
4141
<Calendar
4242
testID={testIDs.calendars.FIRST}
4343
enableSwipeMonths
@@ -50,19 +50,19 @@ const CalendarScreen = () => {
5050
);
5151
};
5252

53-
const renderCalendarWithWeekNumbers = () => {
53+
const renderCalendarWithWeekNumbersAndSpinner = () => {
5454
return (
5555
<Fragment>
56-
<Text style={styles.text}>Calendar with week numbers</Text>
57-
<Calendar style={styles.calendar} hideExtraDays showWeekNumbers/>
56+
<Text style={styles.text}>Week numbers and spinner</Text>
57+
<Calendar style={styles.calendar} hideExtraDays showWeekNumbers displayLoadingIndicator/>
5858
</Fragment>
5959
);
6060
};
6161

6262
const renderCalendarWithMinAndMaxDates = () => {
6363
return (
6464
<Fragment>
65-
<Text style={styles.text}>Calendar with min and max dates</Text>
65+
<Text style={styles.text}>Min and max dates</Text>
6666
<Calendar
6767
style={styles.calendar}
6868
hideExtraDays
@@ -78,7 +78,7 @@ const CalendarScreen = () => {
7878
const renderCalendarWithMarkedDatesAndHiddenArrows = () => {
7979
return (
8080
<Fragment>
81-
<Text style={styles.text}>Calendar with marked dates and hidden arrows</Text>
81+
<Text style={styles.text}>Marked dates and hidden arrows</Text>
8282
<Calendar
8383
style={styles.calendar}
8484
current={INITIAL_DATE}
@@ -92,7 +92,6 @@ const CalendarScreen = () => {
9292
[getDate(10)]: {disabled: true, activeOpacity: 0, disableTouchEvent: false}
9393
}}
9494
hideArrows={true}
95-
// disabledByDefault={true}
9695
/>
9796
</Fragment>
9897
);
@@ -101,7 +100,7 @@ const CalendarScreen = () => {
101100
const renderCalendarWithMultiDotMarking = () => {
102101
return (
103102
<Fragment>
104-
<Text style={styles.text}>Calendar with multi-dot marking</Text>
103+
<Text style={styles.text}>Multi-dot marking</Text>
105104
<Calendar
106105
style={styles.calendar}
107106
current={INITIAL_DATE}
@@ -127,20 +126,19 @@ const CalendarScreen = () => {
127126
);
128127
};
129128

130-
const renderCalendarWithPeriodMarkingAndSpinner = () => {
129+
const renderCalendarWithThemeAndDisabledDays = () => {
131130
return (
132131
<Fragment>
133-
<Text style={styles.text}>Calendar with period marking and spinner</Text>
132+
<Text style={styles.text}>Custom theme and disabled Wednesdays</Text>
134133
<Calendar
135134
// style={styles.calendar}
136135
current={INITIAL_DATE}
137136
minDate={getDate(-5)}
138137
displayLoadingIndicator
139-
markingType={'period'}
140138
theme={{
141139
calendarBackground: '#333248',
142140
textSectionTitleColor: 'white',
143-
textSectionTitleDisabledColor: 'gray',
141+
textSectionTitleDisabledColor: 'pink',
144142
dayTextColor: 'red',
145143
todayTextColor: 'white',
146144
selectedDayTextColor: 'white',
@@ -162,6 +160,7 @@ const CalendarScreen = () => {
162160
}
163161
}
164162
}}
163+
markingType={'period'}
165164
markedDates={{
166165
[getDate(-2)]: {disabled: true},
167166
[getDate(1)]: {textColor: 'pink'},
@@ -173,6 +172,11 @@ const CalendarScreen = () => {
173172
[getDate(26)]: {color: 'gray'},
174173
[getDate(27)]: {endingDay: true, color: 'gray'}
175174
}}
175+
firstDay={1}
176+
disabledDaysIndexes={[1]}
177+
disabledByWeekDays={[1]}
178+
disableAllTouchEventsForDisabledDays
179+
onDayPress={(day) => console.warn(`${day.dateString} pressed`)}
176180
/>
177181
</Fragment>
178182
);
@@ -181,7 +185,7 @@ const CalendarScreen = () => {
181185
const renderCalendarWithPeriodMarkingAndDotMarking = () => {
182186
return (
183187
<Fragment>
184-
<Text style={styles.text}>Calendar with period marking and dot marking</Text>
188+
<Text style={styles.text}>Marking and dot marking</Text>
185189
<Calendar
186190
current={INITIAL_DATE}
187191
minDate={getDate(-14)}
@@ -198,7 +202,7 @@ const CalendarScreen = () => {
198202
}
199203
},
200204
[getDate(11)]: {color: '#70d7c7', textColor: 'white', marked: true, dotColor: 'white'},
201-
[getDate(12)]: {color: '#70d7c7', inactive: true},
205+
[getDate(12)]: {color: '#70d7c7', inactive: true, marked: true},
202206
[getDate(13)]: {
203207
endingDay: true,
204208
color: '#50cebb',
@@ -211,10 +215,10 @@ const CalendarScreen = () => {
211215
},
212216
[getDate(25)]: {inactive: true, disableTouchEvent: true}
213217
}}
214-
disabledDaysIndexes={[0, 6]}
215218
theme={{
216219
textInactiveColor: '#a68a9f',
217-
textSectionTitleDisabledColor: 'grey',
220+
inactiveDotColor: '#a68a9f'
221+
, textSectionTitleDisabledColor: 'grey',
218222
textSectionTitleColor: '#319e8e',
219223
arrowColor: '#319e8e'
220224
}}
@@ -227,7 +231,7 @@ const CalendarScreen = () => {
227231
const renderCalendarWithMultiPeriodMarking = () => {
228232
return (
229233
<Fragment>
230-
<Text style={styles.text}>Calendar with multi-period marking</Text>
234+
<Text style={styles.text}>Multi-period marking</Text>
231235
<Calendar
232236
style={styles.calendar}
233237
current={INITIAL_DATE}
@@ -262,7 +266,7 @@ const CalendarScreen = () => {
262266
const renderCalendarWithCustomMarkingType = () => {
263267
return (
264268
<Fragment>
265-
<Text style={styles.text}>Custom calendar with custom marking type</Text>
269+
<Text style={styles.text}>Custom marking type</Text>
266270
<Calendar
267271
style={styles.calendar}
268272
hideExtraDays
@@ -360,7 +364,7 @@ const CalendarScreen = () => {
360364
const renderCalendarWithCustomDay = () => {
361365
return (
362366
<Fragment>
363-
<Text style={styles.text}>Calendar with custom day component</Text>
367+
<Text style={styles.text}>Custom day component</Text>
364368
<Calendar
365369
style={[styles.calendar, styles.customCalendar]}
366370
dayComponent={({date, state}) => {
@@ -416,7 +420,7 @@ const CalendarScreen = () => {
416420

417421
return (
418422
<Fragment>
419-
<Text style={styles.text}>Calendar with custom header title</Text>
423+
<Text style={styles.text}>Custom header title</Text>
420424
<Calendar
421425
style={styles.calendar}
422426
customHeaderTitle={CustomHeaderTitle}
@@ -464,7 +468,7 @@ const CalendarScreen = () => {
464468

465469
return (
466470
<Fragment>
467-
<Text style={styles.text}>Calendar with custom header component</Text>
471+
<Text style={styles.text}>Custom header component</Text>
468472
<Calendar
469473
initialDate={INITIAL_DATE}
470474
testID={testIDs.calendars.LAST}
@@ -478,7 +482,7 @@ const CalendarScreen = () => {
478482
const renderCalendarWithInactiveDays = () => {
479483
return (
480484
<Fragment>
481-
<Text style={styles.text}>Calendar with inactive days</Text>
485+
<Text style={styles.text}>Inactive days</Text>
482486
<Calendar
483487
style={styles.calendar}
484488
disableAllTouchEventsForInactiveDays
@@ -500,15 +504,15 @@ const CalendarScreen = () => {
500504
return (
501505
<Fragment>
502506
{renderCalendarWithSelectableDate()}
503-
{renderCalendarWithWeekNumbers()}
507+
{renderCalendarWithWeekNumbersAndSpinner()}
504508
{renderCalendarWithMinAndMaxDates()}
505509
{renderCalendarWithCustomDay()}
506510
{renderCalendarWithInactiveDays()}
507511
{renderCalendarWithCustomHeaderTitle()}
508512
{renderCalendarWithCustomHeader()}
509513
{renderCalendarWithMarkedDatesAndHiddenArrows()}
510514
{renderCalendarWithMultiDotMarking()}
511-
{renderCalendarWithPeriodMarkingAndSpinner()}
515+
{renderCalendarWithThemeAndDisabledDays()}
512516
{renderCalendarWithPeriodMarkingAndDotMarking()}
513517
{renderCalendarWithMultiPeriodMarking()}
514518
{renderCalendarWithCustomMarkingType()}

‎src/calendar/calendar.api.json‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,11 @@
1111
],
1212
"example": "https://github.com/wix/react-native-calendars/blob/master/example/src/screens/calendars.tsx",
1313
"props": [
14+
{
15+
"name": "testID",
16+
"type": "string",
17+
"description": "Test ID"
18+
},
1419
{
1520
"name": "theme",
1621
"type": "Theme",
@@ -46,6 +51,11 @@
4651
"type": "string",
4752
"description": "Maximum date that can be selected, dates after maxDate will be grayed out"
4853
},
54+
{
55+
"name": "allowSelectionOutOfRange",
56+
"type": "boolean",
57+
"description": "Whether to allow selection of dates before minDate or after maxDate"
58+
},
4959
{
5060
"name": "firstDay",
5161
"type": "number",
@@ -79,7 +89,7 @@
7989
{
8090
"name": "disableMonthChange",
8191
"type": "boolean",
82-
"description": "Whether to disable changing month when click on days of other months (when hideExtraDays is false)"
92+
"description": "Whether to disable changing month when click on days of other months (when hideExtraDays = false)"
8393
},
8494
{
8595
"name": "enableSwipeMonths",
@@ -92,9 +102,9 @@
92102
"description": "Whether to disable days by default"
93103
},
94104
{
95-
"name": "allowSelectionOutOfRange",
96-
"type": "boolean",
97-
"description": "Whether to allow selection of dates before minDate or after maxDate"
105+
"name": "disabledByWeekDays",
106+
"type": "number[]",
107+
"description": "Disable dates by days of the week (Sunday=0)"
98108
},
99109
{
100110
"name": "onDayPress",

‎src/calendar/day/basic/index.tsx‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,34 @@
11
import React, {Fragment, useCallback, useRef} from 'react';
22
import {TouchableOpacity, Text, View, ViewProps} from 'react-native';
3-
43
import {xdateToData} from '../../../interface';
54
import {Theme, DayState, MarkingTypes, DateData} from '../../../types';
6-
import styleConstructor from './style';
75
import Marking, {MarkingProps} from '../marking';
6+
import styleConstructor from './style';
87

98

109
export interface BasicDayProps extends ViewProps {
10+
/** Theme object */
11+
theme?: Theme;
12+
/** The Day's state ('selected' | 'disabled' | 'inactive' | 'today' | '') */
1113
state?: DayState;
1214
/** The marking object */
1315
marking?: MarkingProps;
14-
/** Date marking style [dot/multi-dot/period/multi-period]. Default = 'dot' */
16+
/** Date marking style ('dot' | 'multi-dot' | 'period' | 'multi-period' | 'custom'). Default = 'dot' */
1517
markingType?: MarkingTypes;
16-
/** Theme object */
17-
theme?: Theme;
1818
/** onPress callback */
1919
onPress?: (date?: DateData) => void;
2020
/** onLongPress callback */
2121
onLongPress?: (date?: DateData) => void;
2222
/** The date to return from press callbacks */
2323
date?: string;
24-
25-
/** Disable all touch events for disabled days. can be override with disableTouchEvent in markedDates*/
24+
/** Disable all touch events for disabled days (can be override with disableTouchEvent in markedDates) */
2625
disableAllTouchEventsForDisabledDays?: boolean;
27-
/** Disable all touch events for inactive days. can be override with disableTouchEvent in markedDates*/
26+
/** Disable all touch events for inactive days (can be override with disableTouchEvent in markedDates) */
2827
disableAllTouchEventsForInactiveDays?: boolean;
29-
30-
/** Test ID */
31-
testID?: string;
3228
/** Accessibility label */
3329
accessibilityLabel?: string;
30+
/** Test ID */
31+
testID?: string;
3432
}
3533

3634
const BasicDay = (props: BasicDayProps) => {
@@ -48,16 +46,17 @@ const BasicDay = (props: BasicDayProps) => {
4846
children,
4947
testID
5048
} = props;
49+
const dateData = date ? xdateToData(date) : undefined;
5150
const style = useRef(styleConstructor(theme));
51+
5252
const _marking = marking || {};
5353
const isSelected = _marking.selected || state === 'selected';
5454
const isDisabled = typeof _marking.disabled !== 'undefined' ? _marking.disabled : state === 'disabled';
55-
const isInactive = _marking?.inactive;
56-
const isToday = state === 'today';
55+
const isInactive = typeof marking?.inactive !== 'undefined' ? marking.inactive : state === 'inactive';
56+
const isToday = typeof marking?.today !== 'undefined' ? marking.today : state === 'today';
5757
const isMultiDot = markingType === Marking.markings.MULTI_DOT;
5858
const isMultiPeriod = markingType === Marking.markings.MULTI_PERIOD;
5959
const isCustom = markingType === Marking.markings.CUSTOM;
60-
const dateData = date ? xdateToData(date) : undefined;
6160

6261
const shouldDisableTouchEvent = () => {
6362
const {disableTouchEvent} = _marking;
@@ -114,7 +113,7 @@ const BasicDay = (props: BasicDayProps) => {
114113
styles.push(style.current.inactiveText);
115114
}
116115

117-
//Custom marking type
116+
// Custom marking type
118117
if (isCustom && customStyles && customStyles.text) {
119118
styles.push(customStyles.text);
120119
}
@@ -173,8 +172,8 @@ const BasicDay = (props: BasicDayProps) => {
173172
<TouchableOpacity
174173
testID={testID}
175174
style={getContainerStyle()}
176-
disabled={shouldDisableTouchEvent()}
177175
activeOpacity={activeOpacity}
176+
disabled={shouldDisableTouchEvent()}
178177
onPress={!shouldDisableTouchEvent() ? _onPress : undefined}
179178
onLongPress={!shouldDisableTouchEvent() ? _onLongPress : undefined}
180179
accessible

0 commit comments

Comments
 (0)