[英]How to add functionality to the Agenda component in react-native-calendars
I am building a simple to do list and calendar/agenda to teach myself javascript and react native.我正在构建一个简单的待办事项列表和日历/议程来自学 javascript 并做出本机反应。 I found react-native-calendars and I really like how it looks.我找到了 react-native-calendars,我真的很喜欢它的外观。
What my question is, is actually adding an item to the agenda via user input.我的问题是,实际上是通过用户输入将项目添加到议程中。
Please refer to the code below:请参考以下代码:
I created a Button and Modal component for reusability.我创建了一个 Button 和 Modal 组件以实现可重用性。
Here is the calendar component.这是日历组件。 As of right now it shows an empty agenda, a simple + button, with a modal that pops up on click.截至目前,它显示了一个空议程,一个简单的 + 按钮,点击时会弹出一个模式。
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",
},
})
My goal is to use this modal to enter in information about the event (let's say time, date, title), click "Add", and have that information added into the agenda.我的目标是使用此模式输入有关事件的信息(比如时间、日期、标题),单击“添加”,并将该信息添加到议程中。
Any help would be appreciated.任何帮助,将不胜感激。 Thank you.谢谢你。
Also, if you need more information please let me know, I will provide anything I can.另外,如果您需要更多信息,请告诉我,我会尽我所能提供。
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
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.