React Calendify

An Events Calendar library for React

⚠ CAUTION - API may change drastically

The aim of this project to create highly customizable events based calendar for react. Although many feature-rich libraries like react-big-calendar, react-full-calendar, dayz exist, the lack of customizability can be a hindrance sometime. It will have month, week and day view.

Install

npm

npm i dayjs react-calendify

yarn

yarn add dayjs react-calendify

pnpm

pnpm add dayjs react-calendify

Usage

Import the Calendar component

import Calendar from "react-calendify";

Import the default react-calendify/dist/style.css file to your .css or .js or .tsx file

CSS

@import "~react-calendify/dist/style.css";

JS/TS

import "~react-calendify/dist/style.css";

The ~ in the front might not be needed in case you are not using webpack. Consult with build system on how to import styles from node modules.

In the .js/.jsx/.tsx file

function CustomCalendar () {
	return(
		<Calender type="weekly" events={[
			{start: '2022-05-09 09:56', end: '2022-05-18 13:38'}
		]}>
	)
}

API

props	options
type	"monthly", "weekly", "daily" // currently only weekly view working
events	{start: string, end: string}[]