0

I am using the Agenda from wix/react-native-calendars in my code. The problem is its not showing any items the way its intended to show on the screen. I don't know where I am going wrong. I have been trying to figure out the solution but nothing seems to help. I am new to React and React Native so any guidance will be highly appreciated.

Kindly look at the code below along with screenshots that showing the problem.

import React, { useState } from "react";
import {
  Alert,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  TouchableWithoutFeedback,
  Keyboard,
  Modal,
} from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { Agenda } from "react-native-calendars";
import colors from "../config/colors";
import NewAppointment from "./NewAppointment";

export default function AppointmentList({ navigation }) {
  const [modalOpen, setModalOpen] = useState(false);
  const [appointments, setAppointments] = useState(() => {
    [
      {
        "2021-03-11": [
          {
            name: "Jeevan More",
            start: "10:00 AM",
            end: "10:30 AM",
            type: "Follow Up",
          },
          {
            name: "Seema More",
            start: "10:30 AM",
            end: "11:30 AM",
            type: "New Consult",
          },
        ],
      },
      {
        "2021-03-12": [
          {
            name: "Madhura Utekar",
            start: "10:00 AM",
            end: "11:00 AM",
            type: "Accute",
          },
          {
            name: "Aditya Utekar",
            start: "12:00 PM",
            end: "12:30 PM",
            type: "Follow Up",
          },
        ],
      },
    ];
  });

  const addAppointment = (appointment) => {
    appointment.id = Math.random().toString();
    setAppointments((currentAppointments) => {
      return [appointment, ...currentAppointments];
    });
    setModalOpen(false);
  };

  const renderItem = (item) => {
    return (
      <TouchableOpacity
        style={[styles.item, { height: item.height }]}
        onPress={() => Alert.alert(item.name)}
      >
        <Text style={styles.timing}>
          {item.start} - {item.end}
        </Text>
        <Text style={styles.name}>{item.name}</Text>
        <Text style={styles.type}>{item.type}</Text>
      </TouchableOpacity>
    );
  };

  return (
    <>
      <Modal visible={modalOpen} animationType="slide">
        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
          <View style={styles.modalContent}>
            <MaterialCommunityIcons
              name="chevron-down"
              size={24}
              color="#424242"
              onPress={() => setModalOpen(false)}
            />
            <NewAppointment addAppointment={addAppointment} />
          </View>
        </TouchableWithoutFeedback>
      </Modal>
      <Agenda
        items={appointments}
        renderItem={(item) => {
          return renderItem(item);
        }}
        selected={"2021-03-11"}
        //pastScrollRange={0}
        //futureScrollRange={0}
        //renderEmptyData={renderEmptyItem}
        //renderEmptyDate={renderEmptyDate}
        //theme={calendarTheme}
      />
      <View style={styles.addbutton}>
        <TouchableOpacity
          onPress={() => setModalOpen(true)}
          style={{
            borderWidth: 2,
            borderColor: "rgba(0,0,0,0.1)",
            alignItems: "center",
            justifyContent: "center",
            width: 50,
            height: 50,
            backgroundColor: "dodgerblue",
            borderRadius: 50,
            marginBottom: 10,
          }}
        >
          <MaterialCommunityIcons name="plus" size={20} color="#fff" />
        </TouchableOpacity>
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  addbutton: {
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f5f5f5",
  },
  item: {
    backgroundColor: "white",
    flex: 1,
    borderRadius: 5,
    padding: 10,
    marginRight: 10,
    marginTop: 17,
  },
  name: {
    fontSize: 18,
    fontWeight: "600",
  },
  timing: {
    color: colors.dark,
  },
  type: {
    color: "#03A9F4",
  },
  emptyDate: {
    height: 15,
    flex: 1,
    paddingTop: 30,
  },
  modalContent: {
    flex: 1,
    marginTop: 20,
    alignItems: "center",
  },
});

screenshot

Jeevan
  • 5
  • 2

1 Answers1

0

Agenda items should receive an object like below. You provided an array that's why it doesn't show the items. Try like below;

{
  "2021-03-11": [{
      name: "Jeevan More",
      start: "10:00 AM",
      end: "10:30 AM",
      type: "Follow Up",
    },
    {
      name: "Seema More",
      start: "10:30 AM",
      end: "11:30 AM",
      type: "New Consult",
    },
  ],
  "2021-03-12": [{
      name: "Madhura Utekar",
      start: "10:00 AM",
      end: "11:00 AM",
      type: "Accute",
    },
    {
      name: "Aditya Utekar",
      start: "12:00 PM",
      end: "12:30 PM",
      type: "Follow Up",
    },
  ]
}

Then you will also have to revise your addAppointment function accordingly.

marty
  • 106
  • 2
  • 5