Calendar-canvas NPM

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.