2 years ago

#75840

test-img

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

Accepted video resources