Allow to select year and month directly about react-native-calendars

[bansalayush]

Hi @tautvilas @mogarick I have implemented an year list which appears on the click of year . You can select a particular year and navigate back to current month of that year . There are two props minYear and maxYear for Calendar component using which max and min year can be specified . If not then 1900 for min and current year for max will be set .
FInd the code here .
https://github.com/bansalayush/react-native-calendars/tree/feat/year-flow

I hope this helps

[naomipol]

@ducpt2 I've implemented the above snippet:

First you need to apply the changes in this pull request to react-native-calendars.

Then use this code:

import { Calendar } from 'react-native-calendars';
import ReversedFlatList from 'react-native-reversed-flat-list';

const initYear = 1949;
const currentYear = Number((new Date()).getFullYear());
const years = Array(currentYear - initYear + 3).fill().map((v,i)=>i + 1);

// react-native-calendar + select year from list on press year in calendar header
export class CalendarWithList extends Component<any,any> {

	constructor(props) {
		super(props);

		this.state = {
			month: undefined,
			yearListVisible: false,
			current: this.props.current,
		}

		this.renderYear = this.renderYear.bind(this);

		this.onPressYear = this.onPressYear.bind(this);
		this.onPressHeader = this.onPressHeader.bind(this);

	}

	componentWillReceiveProps(nextProps) {
		if(this.props.current !== nextProps.current) {
			this.setState({current: nextProps.current})
		}
	}

	renderYear({item}) {
		const year = initYear + item;

		return <TouchableOpacity
					onPress={() => this.onSelectYear(year)}
					style={{height: 50, alignItems: 'center'}}>
					<Text>{year}</Text>
			   </TouchableOpacity>
	}

	onPressYear(month) {

		const current = month.toString('yyyy-MM-dd');
		this.setState({
			yearListVisible: true,
			month,
			current
		})

	}

	onPressHeader() {

		this.setState({
			yearListVisible: false,
		})

	}

	onSelectYear(year) {

		this.setState(({month}) => {
			month.setFullYear(year);
			const current = month.toString('yyyy-MM-dd');
			return {
				yearListVisible: false,
				current
			}
		})

	}

	render() {
		const { yearListVisible, month } = this.state;
		const themeForMonth = {
			textMonthFontFamily: 'System',
			textMonthFontWeight: '300',
			textMonthFontSize: 16,
			...this.props.theme
		};
		return yearListVisible ?
			<View style={[{flex: 1}, this.props.style]}>
				<View style={{padding: 10, height: 45, justifyContent: 'center'}}>
		 		<TouchableOpacity onPress={this.onPressHeader} style={{alignItems: 'center'}}>
        				<Text style={{
        					fontSize: themeForMonth.textMonthFontSize,
        					fontFamily: themeForMonth.textMonthFontFamily,
        					fontWeight: themeForMonth.textMonthFontWeight,
        					color: themeForMonth.monthTextColor || themeForMonth.textDefaultColor || '#2d4150'}}>
        				{month.toString('MMMM yyyy')}
        				</Text>
      				</TouchableOpacity>
				</View>
				<ReversedFlatList
					style={{marginTop: 5, maxHeight: 270}}
					data={years}
					keyExtractor={item => item}
					renderItem={this.renderYear}
				/>
				</View> :
				<Calendar {...this.props}
					current={this.state.current}
					onPressYear={this.onPressYear}
				/>
	}

Hope it helps

[mogarick]

Thank you for your answer @tautvilas.
I think it would be really great to integrate such kind of functionality in the calendar components.
I was using an awesome component (IMHO) called react-infinite-calendar by @clauderic.
Unfortunately it's not fully implemented yet for react native. There's only a partial implementation as a concept proof.
I started toward completing the React Native version but time is not on my side and that's why I needed to look elsewhere for a React Native solution and I found Wix React Native Calendars.
Maybe you can look at React Infinite Calendar and think about doing something similar or even joining forces with @clauderic for the CalendarList component. I'd like to know about what you think.

Meanwhile I'm gonna try to make some time to continue with my effort with Infinite Calendar or with your CalendarList component to add this functionality.

Thank you again for your attention. 👍

[tautvilas]

Hi, currently such components are not being planned for this package. I would suggest you to implement your own year/month pickers using platform native combobox components. After user chooses year/month you can update current prop of <Calendar /> to allow user to interact with that month.

[12ya]

try this and let me know if there are any errors

import React, { useState, useEffect } from 'react';
import { View, Text, TouchableNativeFeedback, TouchableOpacity } from 'react-native';
import { Calendar, LocaleConfig } from 'react-native-calendars';
import dayjs from 'dayjs';

const CustomCalendar = () => {
    const [arr, setArr] = useState([]);
    const [customDate, setCustomDate] = useState(dayjs());
    const [isModalVisible, setIsModalVisible] = useState(false);

    useEffect(() => {
        for (let i = dayjs().year(); i > dayjs().year() - 100; i--) {
            setArr((prev) => [...prev, i]);
        }
    }, []);

    return (
        <>
            <Calendar
                renderHeader={() => (
                    <TouchableNativeFeedback onPress={() => setIsYearModalVisible(true)}>
                        <View>
                            <Text>
                                {customDate.month() + 1}월 {customDate.year()}
                            </Text>
                        </View>
                    </TouchableNativeFeedback>
                )}
                onPressArrowLeft={() => setCustomDate((prev) => dayjs(prev.format('YYYY-MM-DD')).subtract(1, 'month'))}
                onPressArrowRight={() => setCustomDate((prev) => dayjs(prev.format('YYYY-MM-DD')).add(1, 'month'))}
                initialDate={customDate.format('YYYY-MM-DD')}
                allowSelectionOutOfRange
                current={customDate.format('YYYY-MM-DD').toString()}
                markingType='multi-dot'
                markedDates={{ [answers[item.id]]: { selected: true } }}
                onDayPress={({ dateString }) => {
                    setAnswers({
                        ...answers,
                        [item.id]: dateString,
                    });
                }}
            />
            {isModalVisible && arr.length > 0 && (
                <View
                    style={{
                        zIndex: 10,
                        position: 'absolute',
                        width: '100%',
                        height: '100%',
                        backgroundColor: 'green',
                    }}
                >
                    <View
                        style={{
                            flexDirection: 'row',
                            alignItems: 'center',
                            justifyContent: 'space-between',
                            marginBottom: 40,
                        }}
                    >
                        <View style={{ flex: 7, alignItems: 'center' }}>
                            <Text style={{ fontSize: 20 }}>select Year</Text>
                        </View>
                        <TouchableNativeFeedback onPress={() => setIsModalVisible(false)}>
                            <View
                                style={{
                                    flex: 1,
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                }}
                            ></View>
                        </TouchableNativeFeedback>
                    </View>
                    <ScrollView>
                        <View
                            style={{
                                alignItems: 'center',
                                zIndex: 25,
                                padding: 15,
                                width: '100%',
                                height: '100%',
                            }}
                        >
                            {arr.map((year) => (
                                <TouchableOpacity
                                    key={year}
                                    onPress={() => {
                                        setCustomDate((prev) => dayjs().subtract(dayjs().year() - year, 'years'));
                                        setIsModalVisible(false);
                                    }}
                                >
                                    <View style={{ padding: 20, width: '100%' }}>
                                        <Text style={{ fontSize: 16, fontWeight: 'bold' }}>{year}</Text>
                                    </View>
                                </TouchableOpacity>
                            ))}
                        </View>
                    </ScrollView>
                </View>
            )}
        </>
    );
};

[naomipol]

@bansalayush The link you dropped to your code is not updated. Just couldn't find it!
Could you drop me an updated link? I'd love to use it, I'ts exactly what I need!
Thanks!

[bansalayush]

Will update the code over the weekend and post it back here . :)

[ducpt2]

@bansalayush can you share your code or suggest the way you do that?
This is awesome. Thank you alot.

[logicman]

Will update the code over the weekend and post it back here . :)

The GitHub page above that you posted is no longer there. Is it possible for you to paste the code here. I am looking at building this functionality and this would help tremendously. Thanks.