Many times you need to make calendars in your application, but while making it, you waste a lot of time writing the same code may be using "MomentJs" or maybe the "Date" object from Javascript. Hence I made a simple npm package to make the task easier ✨.

Using the Package

1. Import the package :

    yarn add calendify
    or
    npm install calendify
   

1. Use it in your application

    import getCalendar from "calendify/calendify/getCalendar";
    import prevMonth from "calendify/calendify/prevMonth";
    import nextMonth from "calendify/calendify/nextMonth";
   
    const [calendar,setCalendar] = useState(getCalendar());//This returns a simple object as shown further below.
    const nextMonth = ()=>{
        setCalendar(nextMonth());
    }
    const prevMonth = ()=>{
        setCalendar(prevMonth());   
    }
   

2. This basic setup will provide you with enough materials for making a calendar ✨

What does this package return?

{
month: 'April',
year: 2023,
days: [
{ date: 26, type: 'previousMonth' },
{ date: 27, type: 'previousMonth' },
{ date: 28, type: 'previousMonth' },
{ date: 29, type: 'previousMonth' },
{ date: 30, type: 'previousMonth' },
{ date: 31, type: 'previousMonth' },
{ date: 1, type: 'activeMonth' },
{ date: 2, type: 'activeMonth' },
{ date: 3, type: 'activeMonth' },
{ date: 4, type: 'activeMonth' },
{ date: 5, type: 'activeMonth' },
{ date: 6, type: 'activeMonth' },
{ date: 7, type: 'activeMonth' },
{ date: 8, type: 'activeMonth' },
{ date: 9, type: 'activeMonth' },
{ date: 10, type: 'activeMonth' },
{ date: 11, type: 'activeMonth' },
{ date: 12, type: 'activeMonth' },
{ date: 13, type: 'activeMonth' },
{ date: 14, type: 'activeMonth' },
{ date: 15, type: 'activeMonth' },
{ date: 16, type: 'activeMonth' },
{ date: 17, type: 'activeMonth' },
{ date: 18, type: 'activeMonth' },
{ date: 19, type: 'activeMonth' },
{ date: 20, type: 'activeMonth' },
{ date: 21, type: 'activeMonth' },
{ date: 22, type: 'activeMonth' },
{ date: 23, type: 'activeMonth' },
{ date: 24, type: 'activeMonth' },
{ date: 25, type: 'activeMonth' },
{ date: 26, type: 'activeMonth' },
{ date: 27, type: 'activeMonth' },
{ date: 28, type: 'activeMonth' },
{ date: 29, type: 'activeMonth' },
{ date: 30, type: 'activeMonth' },
{ date: 1, type: 'nextMonth' },
{ date: 2, type: 'nextMonth' },
{ date: 3, type: 'nextMonth' },
{ date: 4, type: 'nextMonth' },
{ date: 5, type: 'nextMonth' },
{ date: 6, type: 'nextMonth' }
],
today: 2,
day: 'Sunday'
}

Link to the npm package

npm package

Demo Website

Calendify demo website