2 years ago
#75840
ImDarkk
react-native-calendars by wix changes week once date is clicked
This is the code. Once I press the day it changes the display week but the day is correctly selected. If the onDayPress is removed, it works properly. Is it a thing that you can't do with onDayPress? Has anyone run into this problem before and what solution did you find?
const { width, height } = Dimensions.get('window');
export default function JobsScreen() {
const navigation = useNavigation();
const [loading, setLoading] = useState(false);
const { menu } = useStates();
const currentDate = new Date().getFullYear() + "-" + (new Date().getMonth()+1 < 10 && "0" ) + (new Date().getMonth() + 1) + "-" + new Date().getDate();
const [dayMark, setDay] = useState(currentDate);
const [events, setEvents] = useState([]);
useEffect(() => {
const fetchJobs = async() => {
const responseJobs = await useRequest({url: "http://10.0.2.2:2000/getAppointments", method: "POST", body: {date: dayMark}});
setEvents(responseJobs.map((e) => ({
title: e.type + " - " + e.number,
address: e.address,
muni: e.muni,
start: e.date + " " + e.time + ":00",
end: e.date + " " + e.endTime + ":00",
summary: e.comments
})));
setLoading(false);
};
fetchJobs();
}, []);
const requestEvents = async (e) => {
setDay(e.dateString);
const requestedEvents = await useRequest({url: "http://10.0.2.2:2000/getAppointments", method: "POST", body: {date: e.dateString}});
setEvents(requestedEvents.map((e) => ({
title: e.type + " - " + e.number,
address: e.address,
muni: e.muni,
start: e.date + " " + e.time + ":00",
end: e.date + " " + e.endTime + ":00",
summary: e.comments
})));
}
return loading ? <ActivityIndicator size="large" color="#EDEDED" /> : (
<View style={styles.container}>
{menu && (<MenuStrip />)}
<Text style={styles.titles}>Jobs</Text>
<TouchableOpacity style={styles.button} onPress={() => navigation.navigate('New Job')}><Text style={styles.buttonText}>Create new job</Text></TouchableOpacity>
{/* <EventCalendar events={events} width={width} initDate={new Date()} style={styles.eventCalendar} format24h scrollToFirst /> */}
<Agenda selected={dayMark} onDayPress={requestEvents} enableSwipeWeek />
<ScrollView>
{events && (
events.map((e, index) => (
<View style={styles.eventBox} key={index}>
<Text style={styles.eventTitle}>{e.title}</Text>
<Text style={styles.eventAddress}>{e.address}</Text>
<Text style={styles.eventMuni}>{e.muni}</Text>
<Text style={styles.eventComments}>{e.summary}</Text>
</View>
))
)}
</ScrollView>
<BottomNavigation />
</View>
);
};
javascript
reactjs
react-native
velo
react-native-calendars
0 Answers
Your Answer