CalendarForm.js

import React, { Component } from 'react';
import { View, Text, ScrollView, StyleSheet } from "react-native";
import { Calendar, Agenda, CalendarList, calendarTheme } from 'react-native-calendars';
import DateTimePickerModal from "react-native-modal-datetime-picker";
import { format } from 'date-fns';
class CalendarForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            today: ""
        };
    }
    componentDidMount() {
        this.setState({ today: format(new Date(), "yyyy-MM-dd") })

    }

    renderItem(item) {
        return (
            <View style={[styles.item, { height: ((item.length) * 50) + 50 }]}>
                <View style={{ flexDirection: "row" }}>
                    <View style={{ width: "70%" }}><Text style={{ fontSize: 10 }}>{item[0].calendar_id}</Text></View>
                </View>
            </View>
        );
    }

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

    rowHasChanged(r1, r2) {
        return true;
        //return r1.name !== r2.name;
    }

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


    addAgenda = (day) => {
        const time = day.timestamp + 0 * 24 * 60 * 60 * 1000;
        const strTime = this.timeToString(time);
        if (this.props.itemReducer.items[strTime] == undefined) {
            this.props.CreateCalendar({ id: strTime, name: strTime });
            this.state.value[strTime] = [];
            this.state.value[strTime].push("");
            this.state.val[strTime] = [];
            this.state.val[strTime].push("");
            // alert(this.state.value[strTime]);
        }
    }

    render() {
        return (
            <View>
                <DateTimePickerModal
                    isVisible={this.state.isDatePickerVisible}
                    mode="date"
                    onConfirm={this.handleConfirm}
                    onCancel={this.hideDatePicker}
                    style={{ zIndex: 200 }}
                />
                <View style={{ width: "100%", height: "100%" }}>
                    <ScrollView>
                        <View style={{ flexDirection: "column", height: "100%" }}>
                            <Agenda
                                items={this.props.itemReducer.items}
                                loadItemsForMonth={this.loadItems.bind(this)}
                                selected={this.state.today}
                                renderItem={this.renderItem.bind(this)}
                                renderEmptyDate={this.renderEmptyDate.bind(this)}
                                rowHasChanged={this.rowHasChanged.bind(this)}
                                onDayPress={this.addAgenda}
                            />
                        </View>
                    </ScrollView>
                </View>
            </View>
        )
    }
}
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 CalendarForm;