SmokedPorcupine
SmokedPorcupine

Reputation: 35

Add event to selected day Calendar Agenda

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 https://github.com/wix/react-native-calendars/blob/master/example/src/screens/agendaScreen.tsx

import React, { Component, useState } from "react";
import { Alert, StyleSheet, Text, View, TouchableOpacity } from "react-native";
import {
  Agenda,
  DateData,
  AgendaEntry,
  AgendaSchedule,
} from "react-native-calendars";
import { Card } from "react-native-paper";

const timeToString = (time) => {
  const date = new Date(time);
  return date.toISOString().split("T")[0];
};

const CalendarComponent = () => {
  const [entree, setItems] = useState({});
 
  const loadItems = (day) => {
    setTimeout(() => {
      for (let i = -15; i < 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) => {
        newItems[key] = entree[key];
      });
      setItems(newItems);
    }, 1000);
  };

  const renderEmptyDate = () => {
    return (
      <View style={styles.emptyDate}>
        <Text>This is empty date!</Text>
      </View>
    );
  };

  const renderItem = (item) => {
    return (
      <TouchableOpacity style={styles.item}>
        <Card>
          <Card.Content>
            <View>
              <Text>{item.name}</Text>
            </View>
          </Card.Content>
        </Card>
      </TouchableOpacity>
    );
  };
  return (
    <Agenda
      items={entree}
      loadItemsForMonth={loadItems}
      renderItem={renderItem}
      renderEmptyDate={renderEmptyDate}
      showClosingKnob={true}
      
    />
  );
};

const styles = StyleSheet.create({
  item: {
    backgroundColor: "white",
    flex: 1,
    borderRadius: 5,
    padding: 10,
    marginRight: 10,
    marginTop: 17,
  },
  emptyDate: {
    height: 15,
    flex: 1,
    paddingTop: 30,
  },
});

export default CalendarComponent;

Upvotes: 1

Views: 87

Answers (0)

Related Questions