Skip to content

Commit 9b3bbcd

Browse files
Inbal-TishInbal-Tish
authored
Fix day selection (#2003)
* WeekCalendar - fix - onDayPress not invoked * fix example screens - marked dates objects override selected mark * Day state - avoid 'disabled' condition from overriding 'selection' * CalendarScreen - make dates dynamic and match initial date * revert WeekCalendar fix * revert change
1 parent 784264f commit 9b3bbcd

File tree

4 files changed

+78
-69
lines changed

4 files changed

+78
-69
lines changed

‎example/src/screens/calendarListScreen.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,6 @@ const CalendarListScreen = (props: Props) => {
1717
const [selected, setSelected] = useState(initialDate);
1818
const marked = useMemo(() => {
1919
return {
20-
[selected]: {
21-
selected: true,
22-
disableTouchEvent: true,
23-
selectedColor: '#5E60CE',
24-
selectedTextColor: 'white'
25-
},
2620
[nextWeekDate]: {
2721
selected: selected === nextWeekDate,
2822
selectedTextColor: '#5E60CE',
@@ -32,6 +26,12 @@ const CalendarListScreen = (props: Props) => {
3226
selected: selected === nextMonthDate,
3327
selectedTextColor: '#5E60CE',
3428
marked: true
29+
},
30+
[selected]: {
31+
selected: true,
32+
disableTouchEvent: true,
33+
selectedColor: '#5E60CE',
34+
selectedTextColor: 'white'
3535
}
3636
};
3737
}, [selected]);

‎example/src/screens/calendarPlaygroundScreen.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -86,16 +86,20 @@ const NewCalendarScreen = () => {
8686

8787
const dotMarks = useMemo(() => {
8888
return {
89+
[getDate(1)]: {
90+
disabled: true,
91+
dotColor: RED,
92+
marked: true
93+
},
94+
[getDate(2)]: {
95+
dotColor: RED,
96+
marked: true
97+
},
8998
[selected]: {
9099
selected: true,
91100
disableTouchEvent: true,
92101
selectedColor: PINK,
93102
selectedTextColor: RED
94-
},
95-
[getDate(1)]: {
96-
disabled: true,
97-
dotColor: RED,
98-
marked: true
99103
}
100104
};
101105
}, [selected]);

‎example/src/screens/calendarScreen.tsx‎

Lines changed: 62 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, {useState, Fragment, useCallback, useMemo, useRef} from 'react';
22
import {StyleSheet, View, ScrollView, Text, TouchableOpacity} from 'react-native';
3-
import {Calendar} from 'react-native-calendars';
3+
import {Calendar, CalendarUtils} from 'react-native-calendars';
44
import testIDs from '../testIDs';
55

66
const INITIAL_DATE = '2022-07-06';
@@ -9,21 +9,27 @@ const CalendarScreen = () => {
99
const [selected, setSelected] = useState(INITIAL_DATE);
1010
const [currentMonth, setCurrentMonth] = useState(INITIAL_DATE);
1111

12+
const getDate = (count: number) => {
13+
const date = new Date(INITIAL_DATE);
14+
const newDate = date.setDate(date.getDate() + count);
15+
return CalendarUtils.getCalendarDateString(newDate);
16+
};
17+
1218
const onDayPress = useCallback((day) => {
1319
setSelected(day.dateString);
1420
}, []);
1521

1622
const marked = useMemo(() => {
1723
return {
24+
[getDate(-1)]: {
25+
dotColor: 'red',
26+
marked: true
27+
},
1828
[selected]: {
1929
selected: true,
2030
disableTouchEvent: true,
2131
selectedColor: 'orange',
2232
selectedTextColor: 'red'
23-
},
24-
['2022-07-22']: {
25-
dotColor: 'red',
26-
marked: true
2733
}
2834
};
2935
}, [selected]);
@@ -60,9 +66,10 @@ const CalendarScreen = () => {
6066
<Calendar
6167
style={styles.calendar}
6268
hideExtraDays
63-
current={'2012-05-16'}
64-
minDate={'2012-05-10'}
65-
maxDate={'2012-05-20'}
69+
current={INITIAL_DATE}
70+
minDate={getDate(-6)}
71+
maxDate={getDate(6)}
72+
disableAllTouchEventsForDisabledDays
6673
/>
6774
</Fragment>
6875
);
@@ -74,16 +81,15 @@ const CalendarScreen = () => {
7481
<Text style={styles.text}>Calendar with marked dates and hidden arrows</Text>
7582
<Calendar
7683
style={styles.calendar}
77-
current={'2012-05-16'}
84+
current={INITIAL_DATE}
7885
hideExtraDays
79-
disableAllTouchEventsForDisabledDays
8086
firstDay={1}
8187
markedDates={{
82-
'2012-05-23': {selected: true, marked: true, disableTouchEvent: true},
83-
'2012-05-24': {selected: true, marked: true, dotColor: 'red'},
84-
'2012-05-25': {marked: true, dotColor: 'red', disableTouchEvent: true},
85-
'2012-05-26': {marked: true},
86-
'2012-05-27': {disabled: true, activeOpacity: 0, disableTouchEvent: false}
88+
[getDate(6)]: {selected: true, marked: true, disableTouchEvent: true},
89+
[getDate(7)]: {selected: true, marked: true, dotColor: 'red'},
90+
[getDate(8)]: {marked: true, dotColor: 'red', disableTouchEvent: true},
91+
[getDate(9)]: {marked: true},
92+
[getDate(10)]: {disabled: true, activeOpacity: 0, disableTouchEvent: false}
8793
}}
8894
hideArrows={true}
8995
// disabledByDefault={true}
@@ -98,17 +104,17 @@ const CalendarScreen = () => {
98104
<Text style={styles.text}>Calendar with multi-dot marking</Text>
99105
<Calendar
100106
style={styles.calendar}
101-
current={'2012-05-16'}
107+
current={INITIAL_DATE}
102108
markingType={'multi-dot'}
103109
markedDates={{
104-
'2012-05-08': {
110+
[getDate(2)]: {
105111
selected: true,
106112
dots: [
107113
{key: 'vacation', color: 'blue', selectedDotColor: 'red'},
108114
{key: 'massage', color: 'red', selectedDotColor: 'white'}
109115
]
110116
},
111-
'2012-05-09': {
117+
[getDate(3)]: {
112118
disabled: true,
113119
dots: [
114120
{key: 'vacation', color: 'green', selectedDotColor: 'red'},
@@ -127,8 +133,8 @@ const CalendarScreen = () => {
127133
<Text style={styles.text}>Calendar with period marking and spinner</Text>
128134
<Calendar
129135
// style={styles.calendar}
130-
current={'2012-05-16'}
131-
minDate={'2012-05-10'}
136+
current={INITIAL_DATE}
137+
minDate={getDate(-5)}
132138
displayLoadingIndicator
133139
markingType={'period'}
134140
theme={{
@@ -157,15 +163,15 @@ const CalendarScreen = () => {
157163
}
158164
}}
159165
markedDates={{
160-
'2012-05-17': {disabled: true},
161-
'2012-05-08': {textColor: 'pink'},
162-
'2012-05-09': {textColor: 'pink'},
163-
'2012-05-14': {startingDay: true, color: 'green', endingDay: true},
164-
'2012-05-21': {startingDay: true, color: 'green'},
165-
'2012-05-22': {endingDay: true, color: 'gray'},
166-
'2012-05-24': {startingDay: true, color: 'gray'},
167-
'2012-05-25': {color: 'gray'},
168-
'2012-05-26': {endingDay: true, color: 'gray'}
166+
[getDate(-2)]: {disabled: true},
167+
[getDate(1)]: {textColor: 'pink'},
168+
[getDate(2)]: {textColor: 'pink'},
169+
[getDate(12)]: {startingDay: true, color: 'green', endingDay: true},
170+
[getDate(22)]: {startingDay: true, color: 'green'},
171+
[getDate(23)]: {endingDay: true, color: 'gray'},
172+
[getDate(25)]: {startingDay: true, color: 'gray'},
173+
[getDate(26)]: {color: 'gray'},
174+
[getDate(27)]: {endingDay: true, color: 'gray'}
169175
}}
170176
/>
171177
</Fragment>
@@ -177,23 +183,23 @@ const CalendarScreen = () => {
177183
<Fragment>
178184
<Text style={styles.text}>Calendar with period marking and dot marking</Text>
179185
<Calendar
180-
current={'2012-05-16'}
181-
minDate={'2012-05-01'}
186+
current={INITIAL_DATE}
187+
minDate={getDate(-14)}
182188
markingType={'period'}
183189
markedDates={{
184-
'2012-05-15': {marked: true, dotColor: '#50cebb'},
185-
'2012-05-16': {marked: true, dotColor: '#50cebb'},
186-
'2012-05-21': {startingDay: true, color: '#50cebb', textColor: 'white'},
187-
'2012-05-22': {
190+
[INITIAL_DATE]: {marked: true, dotColor: '#50cebb'},
191+
[getDate(4)]: {marked: true, dotColor: '#50cebb'},
192+
[getDate(9)]: {startingDay: true, color: '#50cebb', textColor: 'white'},
193+
[getDate(10)]: {
188194
color: '#70d7c7',
189195
customTextStyle: {
190196
color: '#FFFAAA',
191197
fontWeight: '700'
192198
}
193199
},
194-
'2012-05-23': {color: '#70d7c7', textColor: 'white', marked: true, dotColor: 'white'},
195-
'2012-05-24': {color: '#70d7c7', inactive: true},
196-
'2012-05-25': {
200+
[getDate(11)]: {color: '#70d7c7', textColor: 'white', marked: true, dotColor: 'white'},
201+
[getDate(12)]: {color: '#70d7c7', inactive: true},
202+
[getDate(13)]: {
197203
endingDay: true,
198204
color: '#50cebb',
199205
textColor: 'white',
@@ -202,7 +208,7 @@ const CalendarScreen = () => {
202208
borderBottomRightRadius: 5
203209
}
204210
},
205-
'2012-05-30': {inactive: true, disableTouchEvent: true}
211+
[getDate(25)]: {inactive: true, disableTouchEvent: true}
206212
}}
207213
disabledDaysIndexes={[0, 6]}
208214
theme={{
@@ -223,23 +229,23 @@ const CalendarScreen = () => {
223229
<Text style={styles.text}>Calendar with multi-period marking</Text>
224230
<Calendar
225231
style={styles.calendar}
226-
current={'2012-05-16'}
232+
current={INITIAL_DATE}
227233
markingType={'multi-period'}
228234
markedDates={{
229-
'2012-05-16': {
235+
[INITIAL_DATE]: {
230236
periods: [
231237
{startingDay: true, endingDay: false, color: 'green'},
232238
{startingDay: true, endingDay: false, color: 'orange'}
233239
]
234240
},
235-
'2012-05-17': {
241+
[getDate(1)]: {
236242
periods: [
237243
{startingDay: false, endingDay: true, color: 'green'},
238244
{startingDay: false, endingDay: true, color: 'orange'},
239245
{startingDay: true, endingDay: false, color: 'pink'}
240246
]
241247
},
242-
'2012-05-18': {
248+
[getDate(3)]: {
243249
periods: [
244250
{startingDay: true, endingDay: true, color: 'orange'},
245251
{color: 'transparent'},
@@ -259,11 +265,11 @@ const CalendarScreen = () => {
259265
<Calendar
260266
style={styles.calendar}
261267
hideExtraDays
262-
current={'2018-03-01'}
263-
minDate={'2018-03-01'}
268+
current={INITIAL_DATE}
269+
minDate={INITIAL_DATE}
264270
markingType={'custom'}
265271
markedDates={{
266-
'2018-03-01': {
272+
[INITIAL_DATE]: {
267273
customStyles: {
268274
container: {
269275
backgroundColor: 'white',
@@ -275,10 +281,10 @@ const CalendarScreen = () => {
275281
}
276282
}
277283
},
278-
'2018-03-08': {
284+
[getDate(8)]: {
279285
selected: true
280286
},
281-
'2018-03-09': {
287+
[getDate(9)]: {
282288
customStyles: {
283289
container: {
284290
backgroundColor: 'red',
@@ -289,7 +295,7 @@ const CalendarScreen = () => {
289295
}
290296
}
291297
},
292-
'2018-03-14': {
298+
[getDate(14)]: {
293299
customStyles: {
294300
container: {
295301
backgroundColor: 'green'
@@ -299,7 +305,7 @@ const CalendarScreen = () => {
299305
}
300306
}
301307
},
302-
'2018-03-15': {
308+
[getDate(15)]: {
303309
customStyles: {
304310
container: {
305311
backgroundColor: 'black',
@@ -310,18 +316,18 @@ const CalendarScreen = () => {
310316
}
311317
}
312318
},
313-
'2018-03-21': {
319+
[getDate(21)]: {
314320
disabled: true
315321
},
316-
'2018-03-28': {
322+
[getDate(28)]: {
317323
customStyles: {
318324
text: {
319325
color: 'black',
320326
fontWeight: 'bold'
321327
}
322328
}
323329
},
324-
'2018-03-30': {
330+
[getDate(30)]: {
325331
customStyles: {
326332
container: {
327333
backgroundColor: 'pink',
@@ -336,7 +342,7 @@ const CalendarScreen = () => {
336342
}
337343
}
338344
},
339-
'2018-03-31': {
345+
[getDate(31)]: {
340346
customStyles: {
341347
container: {
342348
backgroundColor: 'orange',
@@ -477,10 +483,10 @@ const CalendarScreen = () => {
477483
disableAllTouchEventsForInactiveDays
478484
current={INITIAL_DATE}
479485
markedDates={{
480-
'2020-02-10': {
486+
[getDate(3)]: {
481487
inactive: true
482488
},
483-
'2020-02-11': {
489+
[getDate(4)]: {
484490
inactive: true
485491
}
486492
}}

‎src/day-state-manager.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@ export function getState(day: XDate, current: XDate, props: any) {
1010
state = 'selected';
1111
} else if (isToday(day)) {
1212
state = 'today';
13-
}
14-
if (disabledByDefault) {
13+
} else if (disabledByDefault) {
1514
state = 'disabled';
1615
} else if (isDateNotInRange(day, minDate, maxDate)) {
1716
state = 'disabled';

0 commit comments

Comments
 (0)