如何向 react-native-calendars 中的 Agenda 組件添加功能

Question

我正在構建一個簡單的待辦事項列表和日歷/議程來自學 javascript 並做出本機反應。 我找到了 react-native-calendars，我真的很喜歡它的外觀。

我的問題是，實際上是通過用戶輸入將項目添加到議程中。

請參考以下代碼：

我創建了一個 Button 和 Modal 組件以實現可重用性。

這是日歷組件。 截至目前，它顯示了一個空議程，一個簡單的 + 按鈕，點擊時會彈出一個模式。

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 "react";
import {addDays, format} from 'date-fns';


//Class Imports
import {Button} from "../../components/Button"
import {Modal} from "../../components/Modal"


export default function CalendarView() {


    const [isModalVisible, setIsModalVisible] = React.useState(false);
    const handleModal = () => setIsModalVisible(() => !isModalVisible);

    return (
        <View style={styles.container}>
            <Agenda
                    style={styles.calendarWrapper}
                    scrollEnabled={true}
                    theme={{
                        // calendarBackground: '#000000'
                        todayTextColor: '#00adf5',
                    }}>
            </Agenda>

            <View style={styles.absolute}
                  behavior={Platform.OS === "ios" ? "padding" : "height"}>
                <Button onPress={handleModal}/>
                <Modal isVisible={isModalVisible}>
                    <Modal.Container>
                        <Modal.Header title="Placeholder"/>
                        <Modal.Body>
                            <Text style={styles.text}>Placeholder Text</Text>
                        </Modal.Body>
                        <Modal.Footer>
                            <Button onPress={handleModal}/>
                        </Modal.Footer>
                    </Modal.Container>
                </Modal>
            </View>
        </View>
    )
}

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: "400",
        textAlign: "center",
    },

})

我的目標是使用此模式輸入有關事件的信息（比如時間、日期、標題），單擊“添加”，並將該信息添加到議程中。

任何幫助，將不勝感激。 謝謝你。

另外，如果您需要更多信息，請告訴我，我會盡我所能提供。

Answer 1

import React, {useState} from 'react';
import {Agenda} from 'react-native-calendars';

// States
const [events, setEvents] = useState({});
const [marksDate, setMarksDate] = useState({});
const [refreshCalender, setRefreshCalender] = useState(false);

// On Add Function
const onAddEventSubmit = () => {
    setRefreshCalender(true);
    let items = events;
    let mark = {};
    let eventDetails = {
        date: "2022-02-23", // Modal Value
        title: "Your Event Title" // Modal Value
    }

    if (!items[eventDetails.date]) {
        items[eventDetails.date] = [];
    }

    items[eventDetails.date].push(eventDetails);


    mark[eventDetails.date] = {
        customStyles: {
          container: {
            backgroundColor: '#0f0',
          },
          text: {
            color: 'white',
            fontWeight: 'bold',
          },
        },
    };

    setEvents(items);
    setMarksDate(mark);
    setRefreshCalender(false);
}



<Agenda
    items={events}
    loadItemsForMonth={loadItems} // Function
    refreshing={refreshCalender}
    renderItem={(item) => {
        return (
            <View>
                <Text>{item.title}</Text>
            </view>
        )
    }}
    markingType={'custom'}
    markedDates={marksDate}
    // ..other props
/>