CalendarFilter.js

import React, { Component } from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
import { Container, Button, Icon } from "native-base";

import { CalendarList} from "react-native-calendars";

import eachDay from "date-fns/each_day";
import format from "date-fns/format";

import styles from "./styles";

import BtnFilter from "@components/BtnFilter";

class CalendarFilter extends Component {
    constructor(props){
        super(props);

        this.state = {
            startDate: null,
            endDate: null,
            period: {}
        };
    }

    _calcBetweenDates = () => {
        const { startDate, endDate } = this.state;
        if ( startDate && endDate ){
            const formatStartDate = new Date(startDate.year, startDate.month - 1, startDate.day);
            const formatEndDate = new Date(endDate.year, endDate.month - 1, endDate.day);
            const arrDates = eachDay(formatStartDate, formatEndDate);
            if ( arrDates.length > 2 ){
                arrDates.shift();
                arrDates.pop();
                const period = arrDates.map( item =>
                    format(item, "YYYY-MM-DD")
                ).reduce( (between, dateString) => {
                    between[dateString] = {
                        customStyles: {
                            container: {
                                borderRadius: 0,
                                backgroundColor: "#f6acb4",
                                width: 45,
                                height: 45,
                                marginBottom: -5,
                            },
                            text: {
                               color: "#fff",
                               marginTop: 11
                            },
                        }
                    };
                    return between;
                }, {} );
                this.setState( ( state ) => ({ period: {
                    ...state.period,
                    ...period
                } }) );
            }
        }
    }

    _handleDayPress = day => {
        const { startDate, endDate, period } = this.state;

        !startDate && this.setState({
            startDate: day,
            period: {
                ...period,
                [day.dateString] : {
                    startingDay: true,
                    customStyles: {
                        container: {
                            borderRadius: 0,
                            backgroundColor: "#ec3949",
                            width: 45,
                            height: 45,
                            marginBottom: -5
                        },
                        text: {
                            color: "#fff",
                            marginTop: 11
                        },
                    }
                },
            }
        }, this._calcBetweenDates);

        startDate && !endDate && this.setState({
            endDate: day,
            period: {
                ...period,
                [day.dateString] : {
                    endingDay: true,
                    customStyles: {
                        container: {
                            borderRadius: 0,
                            backgroundColor: "#ec3949",
                            width: 45,
                            height: 45,
                            marginBottom: -5
                        },
                        text: {
                            color: "#fff",
                            marginTop: 11
                        },
                    }
                },
            }
        }, this._calcBetweenDates);
    }


    _clearSelectedDays = () => {
        this.setState({
            startDate: null,
            endDate: null,
            period: {}
        });
    }

    _handleMonth = month => {
        switch (month) {
            case 1: return "Jan";
            case 2: return "Fev";
            case 3: return "Mar";
            case 4: return "Abr";
            case 5: return "Mai";
            case 6: return "Jun";
            case 7: return "Jul";
            case 8: return "Ago";
            case 9: return "Set";
            case 10: return "Out";
            case 11: return "Nov";
            case 12: return "Dez";
            default: return "Err";
        }
    }

    _navigateTo = (route) => this.props.navigation.navigate(route);

    componentDidMount(){
        this._clearSelectedDays();
    }

    render () {

        const { startDate, endDate } = this.state;

        const { navigate } = this.props.navigation;

        return (
            <Container>
                <View style={{ flexDirection: "row", marginTop: 20, marginBottom: -30, padding: 10 }}>
                    <Button transparent style={{width: 100, height: 100}} onPress={() => this._navigateTo("Reports")}>
                        <Icon name="close" style={ styles.btnIcon }/>
                    </Button>
                    <TouchableOpacity onPress={this._clearSelectedDays}>
                        <Text style={ styles.topText }>
                            Clear
                        </Text>
                    </TouchableOpacity>
                </View>
                <View style={{ flexDirection: "row", padding: 20, bottom: -20 }}>
                    <View style={{ flex: 1 }} >
                        <Text style={ styles.textMonthDay } >
                        {startDate ? `${this._handleMonth(startDate.month)}. ${startDate.day}` : "..."}
                        </Text>
                    </View>
                    <View style={{ flex: 1 }} >
                        <Icon name="ios-arrow-round-forward" type="Ionicons" style={ styles.iconStyle }/>
                    </View>
                    <View style={{ flex: 1 }} >
                        <Text style={ styles.textMonthDay } >
                        {endDate ? `${this._handleMonth(endDate.month)}. ${endDate.day}` : "..."}
                        </Text>
                    </View>
                </View>

                <BtnFilter onBtnPress={ () => {
                    navigate("Reports", { startDate, endDate });
                } }/>

                <View>
                    <CalendarList
                        // Callback which gets executed when visible months change in scroll view. Default = undefined
                        onVisibleMonthsChange={(months) => {console.log("now these months are visible", months);}}
                        // Max amount of months allowed to scroll to the past. Default = 50
                        pastScrollRange={50}
                        // Max amount of months allowed to scroll to the future. Default = 50
                        futureScrollRange={50}
                        // Enable or disable scrolling of calendar list
                        scrollEnabled={true}
                        // Enable or disable vertical scroll indicator. Default = false
                        showScrollIndicator={true}
                        //...calendarParam

                        dayComponent={({date, state, marking}) => {
                            return (
                                <TouchableOpacity
                                //onPress={ (date) => this._handleDayPress(date.day) }
                                onPress={() => this._handleDayPress(date)}
                                style={{
                                    width: 30,
                                    height: 30,
                                    justifyContent: "center",
                                    alignItems: "center",
                                    borderWidth: 1,
                                    borderColor: "black"
                                }}>
                                <Text
                                    style={{
                                    textAlign: "center",
                                    color: "black",
                                    fontSize: 20
                                    }}>{date.day}</Text>
                                </TouchableOpacity>
                            );
                        }}

                        onDayPress={day => this._handleDayPress(day)}

                        theme={{
                            //backgroundColor: "#ffffff",
                            calendarBackground: "#efeff4",
                            //textSectionTitleColor: "#b6c1cd",
                            //selectedDayBackgroundColor: "#00adf5",
                            //selectedDayTextColor: "#ffffff",
                            //todayTextColor: "#00adf5",
                            dayTextColor: "#2d4150",
                            //textDisabledColor: "#d9e1e8",
                            //dotColor: "#00adf5",
                            //selectedDotColor: "#ffffff",
                            //arrowColor: "orange",
                            monthTextColor: "#8c8c8c",
                            textMonthFontWeight: "bold",
                            textDayFontSize: 18,
                            textMonthFontSize: 22,
                            textDayHeaderFontSize: 16,
                        }}

                        markingType={"custom"}
                        markedDates={this.state.period}
                    />
                </View>
            </Container>
        );
    }
}

export default CalendarFilter;