simple-react-calendar

A simple calendar component for React based applications.

A component that is easy to start using, yet flexible when you need customization.

Usage

You can find the component's online demo here.

Screen

Install

Using npm

npm install simple-react-calendar

Using yarn

yarn add simple-react-calendar

Usage

import React, { Component } from 'react'

import SimpleReactCalendar from 'simple-react-calendar'

class MyApp extends Component {
  render() {
    return <SimpleReactCalendar activeMonth={new Date()} />
  }
}

Available component properties

All of the properties are optional, just rendering <Calendar /> will already give you a working calendar component.

datePropType - number, string or instanceOf(Date)

Render Prop's Components

You can easily override any rendered part of the calendar by providing the proper render function as a Prop.

Expose date helper methods

You can easily override any helper methods, all of them exposed as pure functions.

Class Names

simple-react-calendar follows BEM-like class naming approach and uses single block name as a prefix. Default block class name is calendar, so elements will have names like calendar-day, calendar-month etc.

Block class name can be overrided with blockClassName prop (see above).

Local development environment

Fork this repository and clone your version of the repository

Install dependencies

  yarn

Start example server locally

  yarn start

You now have examples running on http://localhost:9000

Local StoryBook

Fork this repository and clone your version of the repository

Install dependencies

  yarn

Start example server locally

  yarn storybook

You now have examples running on http://localhost:6006