react-full-year-calendar

Twelve months calendar component in React JS

Demo

Visit this link

Documentation

Installation

npm

npm install react-full-year-calendar --save

yarn

yarn add react-full-year-calendar

Props

react-full-year-calendar component accepts the below as props

• year (Mandatory) - Number - Accepts the Year to be displayed
• onSelection (Optional) - Callback Function - returns the selected Date in String Format (YYYY-MM-DD)
• numberOfMonths (Optional) - Number - Accepts the number of months to be displayed from the current Month
• showYearHeading (Optional) - Boolean - Flag to display the year by default it's false
• isWeekDay (Optional) - Callback Function - returns a boolean value
• selectedDates (Optional) - string Array - accepts strings in YYYY-MM-DD format

Example 1

import Calendar from 'react-full-year-calendar';

export default function SimpleCalendar() {
	return <Calendar year={2021} />;
}

Example 2

import Calendar from 'react-full-year-calendar';

export default function SimpleCalendar() {
	const [current, setCurrent] = useState('');
	return <Calendar year={2021} onSelection={setCurrent} />;
}

Example 3

import Calendar from 'react-full-year-calendar';

export default function SimpleCalendar() {
	const [weekDay, setWeekDay] = useState(false);
	return <Calendar year={2021} isWeekDay={setWeekDay} />;
}