Skip to content

Latest commit

 

History

History
88 lines (65 loc) · 4.25 KB

README.md

File metadata and controls

88 lines (65 loc) · 4.25 KB

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.