0

In the example code from the repository (https://github.com/wix/react-native-calendars/blob/master/example/src/screens/agendaScreen.tsx) the code is a little complicated and in class rendering.

I just want to simply add an event to a day (doesn't matter what date) as an example to continue. :) This is the code I have (it just makes the agenda without any events) :

export default function App() {
  const [items,setItems] = useState([]);

  const timeToString = (time) => {
    const date = new Date(time);
    return date.toISOString().split('T')[0];
  }
 
  const  loadItems = (day) => {
    const items = items || {};

    setTimeout(() => {
      for (let i = -15; i < 85; i++) {
        const time = day.timestamp + i * 24 * 60 * 60 * 1000;
        const strTime = timeToString(time);

        if (!items[strTime]) {
          items[strTime] = [];
          
          const numItems = Math.floor(Math.random() * 3 + 1);
          for (let j = 0; j < numItems; j++) {
            items[strTime].push({
              name: 'Item for ' + strTime + ' #' + j,
              height: Math.max(50, Math.floor(Math.random() * 150)),
              day: strTime
            });
          }
        }
      }
      
      const newItems = {};
      Object.keys(items).forEach(key => {
        newItems[key] = items[key];
      });
    setItems(newItems)
    }, 1000);
  }

  return (
    <View style={styles.container}>
        <Agenda
        items={items}
        loadItemsForMonth={loadItems}
        selected={'2017-05-16'}
       
       />
    </View>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

0 Answers0