Skip to content

Commit 9c045ac

Browse files
Inbal-TishInbal-Tish
committed
Merge branch 'master' of github.com:wix/react-native-calendars into release
2 parents edf88b3 + 7a7dd7a commit 9c045ac

38 files changed

+1045
-736
lines changed

‎.gitignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,5 +63,7 @@ fastlane/screenshots
6363

6464
# CocoaPods
6565
ios/Pods
66+
ios/Podfile.lock
6667

67-
.eslintcache
68+
.eslintcache
69+
.reassure

‎example/src/mocks/AgendaItem.tsx‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import isEmpty from 'lodash/isEmpty';
2+
import React, {useCallback} from 'react';
3+
import {StyleSheet, Alert, View, Text, TouchableOpacity, Button} from 'react-native';
4+
import testIDs from '../testIDs';
5+
6+
7+
interface ItemProps {
8+
item: any;
9+
}
10+
11+
const AgendaItem = (props: ItemProps) => {
12+
const {item} = props;
13+
14+
const buttonPressed = useCallback(() => {
15+
Alert.alert('Show me more');
16+
}, []);
17+
18+
const itemPressed = useCallback(() => {
19+
Alert.alert(item.title);
20+
}, []);
21+
22+
if (isEmpty(item)) {
23+
return (
24+
<View style={styles.emptyItem}>
25+
<Text style={styles.emptyItemText}>No Events Planned Today</Text>
26+
</View>
27+
);
28+
}
29+
30+
return (
31+
<TouchableOpacity onPress={itemPressed} style={styles.item} testID={testIDs.agenda.ITEM}>
32+
<View>
33+
<Text style={styles.itemHourText}>{item.hour}</Text>
34+
<Text style={styles.itemDurationText}>{item.duration}</Text>
35+
</View>
36+
<Text style={styles.itemTitleText}>{item.title}</Text>
37+
<View style={styles.itemButtonContainer}>
38+
<Button color={'grey'} title={'Info'} onPress={buttonPressed}/>
39+
</View>
40+
</TouchableOpacity>
41+
);
42+
};
43+
44+
export default AgendaItem;
45+
46+
47+
const styles = StyleSheet.create({
48+
item: {
49+
padding: 20,
50+
backgroundColor: 'white',
51+
borderBottomWidth: 1,
52+
borderBottomColor: 'lightgrey',
53+
flexDirection: 'row'
54+
},
55+
itemHourText: {
56+
color: 'black'
57+
},
58+
itemDurationText: {
59+
color: 'grey',
60+
fontSize: 12,
61+
marginTop: 4,
62+
marginLeft: 4
63+
},
64+
itemTitleText: {
65+
color: 'black',
66+
marginLeft: 16,
67+
fontWeight: 'bold',
68+
fontSize: 16
69+
},
70+
itemButtonContainer: {
71+
flex: 1,
72+
alignItems: 'flex-end'
73+
},
74+
emptyItem: {
75+
paddingLeft: 20,
76+
height: 52,
77+
justifyContent: 'center',
78+
borderBottomWidth: 1,
79+
borderBottomColor: 'lightgrey'
80+
},
81+
emptyItemText: {
82+
color: 'lightgrey',
83+
fontSize: 14
84+
}
85+
});

‎example/src/mocks/agendaItems.ts‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
import isEmpty from 'lodash/isEmpty';
2+
3+
const today = new Date().toISOString().split('T')[0];
4+
const fastDate = getPastDate(3);
5+
const futureDates = getFutureDates(12);
6+
const dates = [fastDate, today].concat(futureDates);
7+
8+
function getFutureDates(numberOfDays: number) {
9+
const array = [];
10+
for (let index = 1; index <= numberOfDays; index++) {
11+
let d = Date.now();
12+
if (index > 8) {
13+
// set dates on the next month
14+
const newMonth = new Date(d).getMonth() + 1;
15+
d = new Date(d).setMonth(newMonth);
16+
}
17+
const date = new Date(d + 864e5 * index); // 864e5 == 86400000 == 24*60*60*1000
18+
const dateString = date.toISOString().split('T')[0];
19+
array.push(dateString);
20+
}
21+
return array;
22+
}
23+
function getPastDate(numberOfDays: number) {
24+
return new Date(Date.now() - 864e5 * numberOfDays).toISOString().split('T')[0];
25+
}
26+
27+
export const agendaItems = [
28+
{
29+
title: dates[0],
30+
data: [{hour: '12am', duration: '1h', title: 'First Yoga'}]
31+
},
32+
{
33+
title: dates[1],
34+
data: [
35+
{hour: '4pm', duration: '1h', title: 'Pilates ABC'},
36+
{hour: '5pm', duration: '1h', title: 'Vinyasa Yoga'}
37+
]
38+
},
39+
{
40+
title: dates[2],
41+
data: [
42+
{hour: '1pm', duration: '1h', title: 'Ashtanga Yoga'},
43+
{hour: '2pm', duration: '1h', title: 'Deep Stretches'},
44+
{hour: '3pm', duration: '1h', title: 'Private Yoga'}
45+
]
46+
},
47+
{
48+
title: dates[3],
49+
data: [{hour: '12am', duration: '1h', title: 'Ashtanga Yoga'}]
50+
},
51+
{
52+
title: dates[4],
53+
data: [{}]
54+
},
55+
{
56+
title: dates[5],
57+
data: [
58+
{hour: '9pm', duration: '1h', title: 'Middle Yoga'},
59+
{hour: '10pm', duration: '1h', title: 'Ashtanga'},
60+
{hour: '11pm', duration: '1h', title: 'TRX'},
61+
{hour: '12pm', duration: '1h', title: 'Running Group'}
62+
]
63+
},
64+
{
65+
title: dates[6],
66+
data: [
67+
{hour: '12am', duration: '1h', title: 'Ashtanga Yoga'}
68+
]
69+
},
70+
{
71+
title: dates[7],
72+
data: [{}]
73+
},
74+
{
75+
title: dates[8],
76+
data: [
77+
{hour: '9pm', duration: '1h', title: 'Pilates Reformer'},
78+
{hour: '10pm', duration: '1h', title: 'Ashtanga'},
79+
{hour: '11pm', duration: '1h', title: 'TRX'},
80+
{hour: '12pm', duration: '1h', title: 'Running Group'}
81+
]
82+
},
83+
{
84+
title: dates[9],
85+
data: [
86+
{hour: '1pm', duration: '1h', title: 'Ashtanga Yoga'},
87+
{hour: '2pm', duration: '1h', title: 'Deep Stretches'},
88+
{hour: '3pm', duration: '1h', title: 'Private Yoga'}
89+
]
90+
},
91+
{
92+
title: dates[10],
93+
data: [
94+
{hour: '12am', duration: '1h', title: 'Last Yoga'}
95+
]
96+
},
97+
{
98+
title: dates[11],
99+
data: [
100+
{hour: '1pm', duration: '1h', title: 'Ashtanga Yoga'},
101+
{hour: '2pm', duration: '1h', title: 'Deep Stretches'},
102+
{hour: '3pm', duration: '1h', title: 'Private Yoga'}
103+
]
104+
},
105+
{
106+
title: dates[12],
107+
data: [
108+
{hour: '12am', duration: '1h', title: 'Last Yoga'}
109+
]
110+
},
111+
{
112+
title: dates[13],
113+
data: [
114+
{hour: '12am', duration: '1h', title: 'Last Yoga'}
115+
]
116+
}
117+
];
118+
119+
type MarkedDate = {
120+
[key: string]: object;
121+
}
122+
123+
export function getMarkedDates() {
124+
const marked: MarkedDate = {};
125+
126+
agendaItems.forEach(item => {
127+
// NOTE: only mark dates with data
128+
if (item.data && item.data.length > 0 && !isEmpty(item.data[0])) {
129+
marked[item.title] = {marked: true};
130+
} else {
131+
marked[item.title] = {disabled: true};
132+
}
133+
});
134+
return marked;
135+
}

‎example/src/mocks/theme.ts‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import {Platform} from "react-native";
2+
3+
export const themeColor = '#00AAAF';
4+
export const lightThemeColor = '#f2f7f7';
5+
6+
export function getTheme() {
7+
const disabledColor = 'grey';
8+
9+
return {
10+
// arrows
11+
arrowColor: 'black',
12+
arrowStyle: {padding: 0},
13+
// knob
14+
expandableKnobColor: themeColor,
15+
// month
16+
monthTextColor: 'black',
17+
textMonthFontSize: 16,
18+
textMonthFontFamily: 'HelveticaNeue',
19+
textMonthFontWeight: 'bold' as 'bold',
20+
// day names
21+
textSectionTitleColor: 'black',
22+
textDayHeaderFontSize: 12,
23+
textDayHeaderFontFamily: 'HelveticaNeue',
24+
textDayHeaderFontWeight: 'normal' as 'normal',
25+
// dates
26+
dayTextColor: themeColor,
27+
todayTextColor: '#af0078',
28+
textDayFontSize: 18,
29+
textDayFontFamily: 'HelveticaNeue',
30+
textDayFontWeight: '500' as '500',
31+
textDayStyle: {marginTop: Platform.OS === 'android' ? 2 : 4},
32+
// selected date
33+
selectedDayBackgroundColor: themeColor,
34+
selectedDayTextColor: 'white',
35+
// disabled date
36+
textDisabledColor: disabledColor,
37+
// dot (marked date)
38+
dotColor: themeColor,
39+
selectedDotColor: 'white',
40+
disabledDotColor: disabledColor,
41+
dotStyle: {marginTop: -2}
42+
};
43+
}

‎example/src/screens/calendarScreen.tsx‎

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

6-
const INITIAL_DATE = '2020-02-02';
6+
const INITIAL_DATE = '2022-07-06';
77

88
const CalendarScreen = () => {
99
const [selected, setSelected] = useState(INITIAL_DATE);
1010
const [currentMonth, setCurrentMonth] = useState(INITIAL_DATE);
1111

12-
const onDayPress: CalendarProps['onDayPress'] = useCallback(day => {
12+
const onDayPress = useCallback((day) => {
1313
setSelected(day.dateString);
1414
}, []);
1515

@@ -20,6 +20,10 @@ const CalendarScreen = () => {
2020
disableTouchEvent: true,
2121
selectedColor: 'orange',
2222
selectedTextColor: 'red'
23+
},
24+
['2022-07-22']: {
25+
dotColor: 'red',
26+
marked: true
2327
}
2428
};
2529
}, [selected]);

0 commit comments

Comments
 (0)