title: Add event to selected day Calendar Agenda
body: <p>I am currently learning to build an app with react native expo and javascript. I have my calendar displaying but I can't figure out how to add event to day selected. There will be a button that the user press and from this they should be able to add events to that day. This was the guide used to build the agenda <a href="https://github.com/wix/react-native-calendars/blob/master/example/src/screens/agendaScreen.tsx" rel="nofollow noreferrer">https://github.com/wix/react-native-calendars/blob/master/example/src/screens/agendaScreen.tsx</a></p>
  <pre><code>import React, { Component, useState } from &quot;react&quot;;
  import { Alert, StyleSheet, Text, View, TouchableOpacity } from &quot;react-native&quot;;
  import {
    Agenda,
    DateData,
    AgendaEntry,
    AgendaSchedule,
  } from &quot;react-native-calendars&quot;;
  import { Card } from &quot;react-native-paper&quot;;
  
  const timeToString = (time) =&gt; {
    const date = new Date(time);
    return date.toISOString().split(&quot;T&quot;)[0];
  };
  
  const CalendarComponent = () =&gt; {
    const [entree, setItems] = useState({});
   
    const loadItems = (day) =&gt; {
      setTimeout(() =&gt; {
        for (let i = -15; i &lt; 85; i++) {
          const time = day.timestamp + i * 24 * 60 * 60 * 1000;
          const strTime = timeToString(time);
  
          if (!entree[strTime]) {
            entree[strTime] = [];
          }
        }
  
        const newItems = {};
        Object.keys(entree).forEach((key) =&gt; {
          newItems[key] = entree[key];
        });
        setItems(newItems);
      }, 1000);
    };
  
    const renderEmptyDate = () =&gt; {
      return (
        &lt;View style={styles.emptyDate}&gt;
          &lt;Text&gt;This is empty date!&lt;/Text&gt;
        &lt;/View&gt;
      );
    };
  
    const renderItem = (item) =&gt; {
      return (
        &lt;TouchableOpacity style={styles.item}&gt;
          &lt;Card&gt;
            &lt;Card.Content&gt;
              &lt;View&gt;
                &lt;Text&gt;{item.name}&lt;/Text&gt;
              &lt;/View&gt;
            &lt;/Card.Content&gt;
          &lt;/Card&gt;
        &lt;/TouchableOpacity&gt;
      );
    };
    return (
      &lt;Agenda
        items={entree}
        loadItemsForMonth={loadItems}
        renderItem={renderItem}
        renderEmptyDate={renderEmptyDate}
        showClosingKnob={true}
        
      /&gt;
    );
  };
  
  const styles = StyleSheet.create({
    item: {
      backgroundColor: &quot;white&quot;,
      flex: 1,
      borderRadius: 5,
      padding: 10,
      marginRight: 10,
      marginTop: 17,
    },
    emptyDate: {
      height: 15,
      flex: 1,
      paddingTop: 30,
    },
  });
  
  export default CalendarComponent;
  </code></pre>