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} ></Calendar>;
}

Example 2

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

Example 3

import Calendar from 'react-full-year-calendar';
export default function SimpleCalendar() {
    const [weekDay, setWeekDay] = useState(false);
    return <Calendar year={2021} isWeekDay={setWeekDay} ></Calendar>;
}