Diptanshu Mahish's Blog
Making a Simple Calendar using Calendify package

Making a Simple Calendar using Calendify package

Diptanshu Mahish's photo
Diptanshu Mahish
·

2 min read

Table of contents

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'
}

npm package

Demo Website

Calendify demo website

calendarTypeScriptJavaScriptReact