react-calendar-hook

React hook which enables you to easily create your custom calendars in a couple of minutes

Installation

npm install react-calendar-hook

yarn add react-calendar-hook

Usage

Live demo: Code Sandbox

import React from 'react';
import {
   useCalendar, // Hook shown bellow
   dayNames, // Monday, Tuesday, etc...
   shortDayNames, // Mon, Tue, etc...
   monthNames, // January, February, etc...
   shortMonthNames, // Jan, Feb, etc...
   Calendar, // Type shown bellow
   CalendarItem // Type shown bellow
} from 'react-calendar-hook';

function App() {
   // Date is optional, current date will be set by default
   const currentDate = new Date();
   
   const calendar = useCalendar(currentDate);
}

// Return value of the userCalendar() hook
interface Calendar {
	date: Date; // Date object
	month: {
		index: number; // 0 - 11
		number: number; // 1 - 12
		name: string; // January, February, etc...
	};
	day: {
		index: number; // 0 - 6
		number: number; // 1 - 31
		name: string; // Monday, Tuesday, etc...
	};
	year: number; // 2020
	prevMonth: () => void; // Select previous month
	nextMonth: () => void; //Select next month
	selectDate: (date: Date) => void; // Select specific date
	items: CalendarItem[];
}

interface CalendarItem {
   date: number; // 1 - 31
   fullDate: Date; // Date object
   active: boolean; // Belongs to the current month
   selected: boolean; // Is current date
   name: string; // Monday, Tuesday, etc...
}