jlizanab/react-calendar

A no dependencies, lightweight and feature-rich ⚡ calendar component for react.

@natscale/react-calendar

A no dependencies, lightweight and feature-rich ⚡ calendar component for react.

Note - The library is still under active development so the API might change before the first stable release. We do not recommend to use it in production yet.

See Online Demo

The link above is a test page to be able to share the development progress with other people while it's in the beta phase. We are working on an official website for it.

📚 Table of Contents

• Installation
• Usage
• Support
• Contributing
• License

⚡ Features

• 🗓 Date Range
• 🗓 Fixed Date Range
• 🗓 Multiple Dates
• 🗓 Highlight Custom Dates
• 🗓 Disable Custom Dates
• 🗓🗓 Dual Calendar
• 🦄 Easy to Theme
• ✅ No Dependencies
• 💻 SSR Compatible
• 🔩 Lots of Very Easy Customizations
• 🕊 Lightweight - less than 20kb

📦 Installation

The calendar component uses react hooks so it requires the react version to be at least 16.8.0. Make sure you have a react version that is equal to or greater than that.

With yarn

yarn add @natscale/react-calendar

With NPM

npm install @natscale/react-calendar

🚀 Usage

To add the default stylesheet. You can import it from the node_modules folder.

import '@natscale/react-calendar/dist/main.css';

With Typescript

import React, { useState, useCallback } from 'react';
import { Calendar } from '@natscale/react-calendar';

function App() {
  const [value, setValue] = useState();

  const onChange = useCallback(
    (value) => {
      setValue(value);
    },
    [setValue],
  );

  return (
    <div>
      <Calendar value={value} onChange={onChange} />
    </div>
  );
}

With Javascript

import React, { useState, useCallback } from 'react';
import { Calendar } from '@natscale/react-calendar';

function App() {
  const [value, setValue] = useState();

  const onChange = useCallback(
    (value) => {
      setValue(value);
    },
    [setValue],
  );

  return (
    <div>
      <Calendar value={value} onChange={onChange} />
    </div>
  );
}

📝 Motivation

The idea of creating a calendar component was a result of trying to find something online which could handle my requirements without needing me to hack away at the component's internals and possibly breaking it;

ergo, this react calendar which aims to be a one stop shop for every potential use case a web developer could think of when it comes to calendars and dates. All the featues I included are ones I thought would be most required from a calendar component. Any suggestions or updates are always welcome to make it more robust.

🛠️ Support

Please open an issue for support.

📜 License

MIT © Tushar Sharma