How to add functionality to the Agenda component in react-native-calendars

Question

I am building a simple to do list and calendar/agenda to teach myself javascript and react native. I found react-native-calendars and I really like how it looks.

What my question is, is actually adding an item to the agenda via user input.

Please refer to the code below:

I created a Button and Modal component for reusability.

Here is the calendar component. As of right now it shows an empty agenda, a simple + button, with a modal that pops up on click.

import * as React from 'react';
import {View, StyleSheet, Text, TouchableOpacity, Platform} from 'react-native';
import {Agenda} from 'react-native-calendars';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {useEffect, useState} from "react";
import {addDays, format} from 'date-fns';


//Class Imports
import {Button} from "../../components/Button"
import {Modal} from "../../components/Modal"


export default function CalendarView() {


    const [isModalVisible, setIsModalVisible] = React.useState(false);
    const handleModal = () => setIsModalVisible(() => !isModalVisible);

    return (
        <View style={styles.container}>
            <Agenda
                    style={styles.calendarWrapper}
                    scrollEnabled={true}
                    theme={{
                        // calendarBackground: '#000000'
                        todayTextColor: '#00adf5',
                    }}>
            </Agenda>

            <View style={styles.absolute}
                  behavior={Platform.OS === "ios" ? "padding" : "height"}>
                <Button onPress={handleModal}/>
                <Modal isVisible={isModalVisible}>
                    <Modal.Container>
                        <Modal.Header title="Placeholder"/>
                        <Modal.Body>
                            <Text style={styles.text}>Placeholder Text</Text>
                        </Modal.Body>
                        <Modal.Footer>
                            <Button onPress={handleModal}/>
                        </Modal.Footer>
                    </Modal.Container>
                </Modal>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    absolute: {
      position: 'absolute',
        bottom: 80,
        right: 20
    },
    container: {
        position: 'static',
        flex: 1,
        backgroundColor: '#E8EAED',
    },
    calendarWrapper: {},
    items: {},
    dayPressColor: {
        backgroundColor: '#000000'
    },
    itemContainer: {
        backgroundColor: 'white',
        margin: 5,
        borderRadius: 15,
        justifyContent: 'center',
        alignItems: 'center',
        flex: 1,
    },
    text: {
        fontSize: 16,
        fontWeight: "400",
        textAlign: "center",
    },

})

My goal is to use this modal to enter in information about the event (let's say time, date, title), click "Add", and have that information added into the agenda.

Any help would be appreciated. Thank you.

Also, if you need more information please let me know, I will provide anything I can.

Answer 1

import React, {useState} from 'react';
import {Agenda} from 'react-native-calendars';

// States
const [events, setEvents] = useState({});
const [marksDate, setMarksDate] = useState({});
const [refreshCalender, setRefreshCalender] = useState(false);

// On Add Function
const onAddEventSubmit = () => {
    setRefreshCalender(true);
    let items = events;
    let mark = {};
    let eventDetails = {
        date: "2022-02-23", // Modal Value
        title: "Your Event Title" // Modal Value
    }

    if (!items[eventDetails.date]) {
        items[eventDetails.date] = [];
    }

    items[eventDetails.date].push(eventDetails);


    mark[eventDetails.date] = {
        customStyles: {
          container: {
            backgroundColor: '#0f0',
          },
          text: {
            color: 'white',
            fontWeight: 'bold',
          },
        },
    };

    setEvents(items);
    setMarksDate(mark);
    setRefreshCalender(false);
}



<Agenda
    items={events}
    loadItemsForMonth={loadItems} // Function
    refreshing={refreshCalender}
    renderItem={(item) => {
        return (
            <View>
                <Text>{item.title}</Text>
            </view>
        )
    }}
    markingType={'custom'}
    markedDates={marksDate}
    // ..other props
/>