title: How to add functionality to the Agenda component in react-native-calendars
body: <p>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.</p>
  <p><strong>What my question is, is actually adding an item to the agenda via user input.</strong></p>
  <p>Please refer to the code below:</p>
  <p>I created a Button and Modal component for reusability.</p>
  <p>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.</p>
  <pre><code>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 &quot;react&quot;;
  import {addDays, format} from 'date-fns';
  
  
  //Class Imports
  import {Button} from &quot;../../components/Button&quot;
  import {Modal} from &quot;../../components/Modal&quot;
  
  
  export default function CalendarView() {
  
  
      const [isModalVisible, setIsModalVisible] = React.useState(false);
      const handleModal = () =&gt; setIsModalVisible(() =&gt; !isModalVisible);
  
      return (
          &lt;View style={styles.container}&gt;
              &lt;Agenda
                      style={styles.calendarWrapper}
                      scrollEnabled={true}
                      theme={{
                          // calendarBackground: '#000000'
                          todayTextColor: '#00adf5',
                      }}&gt;
              &lt;/Agenda&gt;
  
              &lt;View style={styles.absolute}
                    behavior={Platform.OS === &quot;ios&quot; ? &quot;padding&quot; : &quot;height&quot;}&gt;
                  &lt;Button onPress={handleModal}/&gt;
                  &lt;Modal isVisible={isModalVisible}&gt;
                      &lt;Modal.Container&gt;
                          &lt;Modal.Header title=&quot;Placeholder&quot;/&gt;
                          &lt;Modal.Body&gt;
                              &lt;Text style={styles.text}&gt;Placeholder Text&lt;/Text&gt;
                          &lt;/Modal.Body&gt;
                          &lt;Modal.Footer&gt;
                              &lt;Button onPress={handleModal}/&gt;
                          &lt;/Modal.Footer&gt;
                      &lt;/Modal.Container&gt;
                  &lt;/Modal&gt;
              &lt;/View&gt;
          &lt;/View&gt;
      )
  }
  
  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: &quot;400&quot;,
          textAlign: &quot;center&quot;,
      },
  
  })
  </code></pre>
  <p>My goal is to use this modal to enter in information about the event (let's say time, date, title), click &quot;Add&quot;, and have that information added into the agenda.</p>
  <p>Any help would be appreciated! Thank you.</p>
  <p>Also, if you need more information please let me know, I will provide anything I can.</p>