Calendar Canvas

A highly customizable and lightweight calendar library to render your events. This library offers an easy way to create interactive and customizable calendar components for your React applications.

Screenshots

• Month View
• Week View
• Day View

Installation

To install the calendar-canvas library, run the following command:

npm install calendar-canvas

or if you are using yarn:

yarn add calendar-canvas

Usage

Here's how you can use the calendar-canvas component in your project:

Example

"use client";
import {
  CalendarCanvas,
  CalendarContent,
  CalendarContentHeader,
  CalendarContentWrapper,
  CalendarHeader,
} from "calendar-canvas";
import "calendar-canvas/dist/main.css";
import { events } from "../events";

function App() {
  return (
    <CalendarCanvas events={events} defaultView="month">
      <CalendarHeader />
      <CalendarContentWrapper>
        <CalendarContentHeader />
        <CalendarContent />
      </CalendarContentWrapper>
    </CalendarCanvas>
  );
}

export default App;

Props

The CalendarCanvas component accepts the following props:

Prop	Type	Default Value	Description
defaultDate	Date	new Date()	Sets the default date to display in the calendar.
defaultView	CalendarCanvasViewUnion	'month'	Specifies the default view of the calendar.
events	Array<CalendarCanvasEvent>	[]	An array of events to be displayed on the calendar.
className	string	undefined	Optional CSS class to apply to the calendar wrapper.

Documentation

Now we have launched the documentation for the Calendar Canvas library. You can find it here.

Development

To run the development build, use the following command:

npm run build

This will generate the production-ready files in the dist/ folder. The library will be available as both CommonJS (dist/index.js) and ES Modules (dist/index.mjs).

Contributing

We welcome contributions! If you find any issues or have suggestions for improvements, feel free to create a pull request or open an issue in the repository.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Abhishek Prajapati [email protected] Website: https://abhishekprajapati1.com