natscale/react-calendar

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

@natscale/react-calendar

A no dependency, 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
• 🗓 Add Your Own Shorcuts
• 🦄 Easy to Theme
• ✅ No Dependencies
• 💻 SSR Compatible
• 🔩 Lots of 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

react-calendar's Issues

Create docs website

Add props to access root ref

Value Should Be Validated For Fixed Range Parameter As Well

Unable to install package

When runing the npm install command :

npm ERR! Could not resolve dependency: npm ERR! peer react@"^16.8.0 || ^17.0.0" from @natscale/[email protected] npm ERR! node_modules/@natscale/react-calendar npm ERR! @natscale/react-calendar@"*" from the root project

I think the dependencies need to be updated with [email protected]

dual calendar not displayed

Describe the bug
dual calendar not displayed

To Reproduce
normal installation

Callback for each multi select date

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Focus after programmatically changing date range

Using calendar with isRangeSelector to true, displayed month is not changed when date range is updated.

For example, if initial date range is 2023-01-01 to 2023-01-10, initial "focus" will be January 2023. If I programmatically change it to 2023-03-01 to 2023-03-10, the focus will still be on January 2023 instead of March 2023.

Is there a way to specify what should be the current focus or default focus after an update (start date, end date, ...) ?

Thanks

Remove CSS reference from the component

react-calendar/src/components/react-calendar/calendar.tsx

Line 33 in 0560cca

import './calendar.css';

Add keyboard movement controls

Add option to hide prev/next month dates

Use RGBA for theming instead of HexCode

Lighter color is 10% of the primary color

primary: lighter: rgb(240 62 62)
lighter: rgb(240 62 62 / 10%)

Range Start/End Does Not Show Highlighted Border

How change locale (date language) ??

Change language

Is there any way to change the language?

How to change width and height of the calendar

is there any way to change height and width of the calendar ?

onTabChange or onFocusChange

I need events to scroll through the month/year.
For example, I need to load data for all days of the month, and then determine for each day whether it is active or not.

For example, when changing a focused day.

auto submitted in <form> when changing date

When I use this Calendar component in <form> and select a date, it is auto submitted.
I looked at the html and found the date is <button> and no type speicified.
The default behavior of <button> is submit in HTML5, so it seems to happen.
Please put the type in <button> tag.
This should be good enough for this issue.
<button type="button">

Add partial range select listener

How to reset date range programmaticaly, ie. by click button which is in a different place?

Add option to show year/month selector initially before the month dates view

Fix minor height adjustments in the body of the calendar

Fix dual calendar initial date

Initial Value in secondary dual calendar should have a month's diff.

Use native weekday index even when start of the week is different

Use HSL colors for easy theming

Cell is empty when range start/end selected date is disabled

Fixed Range Does Not Work Well With Disabled Dates

Describe the bug
If future date is disabled, you select fixed range = 3, it will select even the disabled dates. It should not.

Shorcuts don't work nicely with Dual Calendar

There's a layout issue when using both shortcuts and dual calendar.

Do not cache today's date

There is an edge case if a user transitions from 11:59 to 12:01 midnight using the calendar. The calendar will not function right.

Use better element types

react-calendar/src/components/react-calendar/calendar.tsx

Line 316 in 0560cca

<section style={styles.root.arc} className={computedClass}>

Make it more accessible

Add option to be able to move to a month/year/date

Add option to show shortcuts

Shortcuts like "today", "selected", "range start", "range end", "toggle dates"

Add simple localization

A way to prevent the weekends from being highlighted in red?

I really like this calender, but the weekends being highlighted in red is kinda weird, is there a way to turn this off?

If not then a boolean prop named "highlightWeekends" would be much appreciated!

Don't throw an error on invalid props (value as Array for normal view)