Skip to content

React Calendar Toolkit is a set of React Components capable of rendering various calendars, datepickers etc.

License

Notifications You must be signed in to change notification settings

morewings/react-calendar-toolkit

Repository files navigation

Build Status codecov npm version npm types included types included

React calendar toolkit

Datepicker screenshot

Description

react-calendar-toolkit (RCT) is a set of React Components capable of rendering various calendars, datepickers etc.

Documentation

Demo

Motivation

There are many good datepickers on the market. Unfortunately, most of them are style-opinionated, so if you like logic of chosen datepicker, you are subscribing to the visual style of it. But your website or application style may be completely different. With RCT you don't have hack third-party CSS, you can write your own styled UI components and RCT will render them.

Features

  • Use your custom UI components to change look and feel to match your visual style.
  • Has default theme in Material Design style.
  • Uses date-fns as logic provider.
  • Supports localization for 69 languages, using date-fns locales. You can create custom one.
  • Lightweight: adds just ~10kb to your bundle.
  • Typescript friendly, type definitions included.
  • Disable any date:
    disableDate: ({isWeekend, precision, date}) => Boolean
  • Highlight any date:
    highlightDate: ({isWeekend, precision, date}) => Boolean
  • Highlight weekends:
    highlightWeekends: Boolean

Browsers support

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
iOS Safari
iOS Safari
IE11*, Edge last 2 versions, ESR last 2 versions last 2 versions last 2 versions

/* needs polyfills, see docs

Quickstart

yarn add react-calendar-toolkit date-fns@2

Then use it like this:

import React from 'react';
import Datepicker from 'react-calendar-toolkit'; // datepicker component
import 'react-calendar-toolkit/lib/style/default.css'; // styles

const Component = () => (
  <div>
    <Datepicker onDateSet={date => {console.log('date set', date)}} />
  </div>
);

export default Component;

Development

Available scripts

  • start - starts application in development mode;
  • start:docs - starts Docz;
  • build:docs - builds Docz;
  • build:lib - builds package;
  • lint:js - runs eslint;
  • fix:js - runs eslint with fix option enabled;
  • test - runs tests.
  • lint:style: runs stylelint;
  • fix:style: runs stylelint with fix option enabled.

About

React Calendar Toolkit is a set of React Components capable of rendering various calendars, datepickers etc.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages