A simple calendar component for React based applications.
npm install simple-react-calendar[![NPM version][npm-image]][npm-url]
[![deps][deps]][deps-url]
[![build status][travis-image]][travis-url]
[![npm download][download-image]][download-url]
[![CodeFactor][cf-image]][cf-url]
[![codecov.io][codecov-image]][codecov-url]
[![styled with prettier][prettier-image]][prettier-url]
[![Tested with Jest][jest-image]][jest-url]
[![storybook provided][storybook-image]][storybook-url]
[![semantic-release][semantic-image]][semantic-url]
[![npm badge][npm-badge-png]][package-url]
---
A simple calendar component for React based applications.
A component that is easy to start using, yet flexible when you need customization.
You can find the component's online demo here.
#### Using npm
``bash`
npm install simple-react-calendar
#### Using yarn
`bash`
yarn add simple-react-calendar
`js
import React, { Component } from 'react'
import SimpleReactCalendar from 'simple-react-calendar'
class MyApp extends Component {
render() {
return
}
}
`
All of the properties are optional, just rendering will already give you a working calendar component.
| Properties | PropType | Description |
| ---------------------- | -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| MonthHeaderComponent | object or func | replace the month header of the component with this node object or class function |activeMonth
| | datePropType\* | any day within the month that you want initially displayed |blockClassName
| | string | base class name that will be used as a class prefix (see [](#class-names)) |daysOfWeek
| | [string] | array of string represents the days |disableDaysOfWeek
| | bool | disable rendering days of the week |disabledIntervals
| | [{start: datePropType, end: datePropType}] | disabled intervals of dates. Array of objects [{start: Date(), end: Date()}]. When user try to select disabled date or date range which consist disabled date(s) inside, Notice will appear |headerNextArrow
| | element | any kind of react element will be rendered into the next month button (element) |headerNextTitle
| | string | text will be rendered as the title of the next month button Next month |headerPrevArrow
| | element | any kind of react element will be rendered into the previous month button (element) |headerPrevTitle
| | string | text will be rendered as the title of the previous month button, default is Previous month |highlighted
| | {start: datePropType, end: datePropType} | highlighted dates. Object {start: Date(), end: Date()}. Undefined by default |maxDate
| | datePropType\* | latest date available for selection |minDate
| | datePropType\* | earliest date available for selection |minNumberOfWeeks
| | number | minimum number of weeks in a month. Undefined by default |mode
| | string one of range or single | selection mode, one of either range or single. Default is single |onDayHover
| | func | a function that is called on mouseMove on days |onMonthChange
| | func | a function that is called whenever user changes the month. If defined then you have to handle month changing by yourself by changing activeMonth property |onSelect
| | func | a function that is called whenever user |onSelectionProgress
| | func | a function that is called whenever user changes |rangeLimit
| | number | limit number of days for selection (number) |selected
| | | selected dates. Can be ether single Date object if mode is single, or object {start: Date(), end: Date()} if mode is range |today
| | datePropType\* | current date (useful when you want to show current date in different time zone). Default is new Date() selects a date (in single mode) or a dates range (range mode) selection. Works only in the range mode. When the function is passed then automatic range selection handing will be disabled. |weekStartsOn
| | number | the index of the first day of the week (0 - Sunday). Default is 1 - Monday |
datePropType - number, string or instanceOf(Date)
You can easily override any rendered part of the calendar by providing the proper render function as a Prop.
| Render Prop name | Default usage | Default Render Prop Component |
| ----------------- | ------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| renderDay | (props) => | RenderPropsComponents/Day/Day.tsx |renderDayOfWeek
| | (props) => | RenderPropsComponents/DayOfWeek/DayOfWeek.tsx |renderNotice
| | (props) => | RenderPropsComponents/Notice/Notice.tsx |
You can easily override any helper methods, all of them exposed as pure functions.
| Helper function | Default function |
| ------------------ | --------------------------------------------- |
| getDayFormatted | getDayFormatted |getISODate
| | getISODate |getNoticeContent
| | getNoticeContent |
simple-react-calendar follows BEM-like class naming approach and usescalendar
single block name as a prefix. Default block class name is , socalendar-day
elements will have names like , calendar-month etc.
Block class name can be overrided with blockClassName prop (see above).
| Description | Default Class Name | Modifier Class Names |
| ---------------------------------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Calendar (root element) | .calendar | |.calendar-month_header
| Calendar month header | | |.calendar-month_header_title
| Calendar month header title (month name) | | |.calendar-header_button
| Calendar header button (month switcher) | | .calendar-days_of_week
|.is-prev - when is the previous month button.is-next - when is the next month button.is-disabled - when the button is disabled
| Calendar week header (week days) | | |.calendar-days_of_week_day
| Calendar week header day (week day) | | .calendar-month
|.is-weekend - when the day is the weekend
| Calendar month (weeks wrapper element) | | |.calendar-week
| Calendar week (days wrapper element) | | |.calendar-day
| Calendar day | | .calendar-notice
|.is-selected - when the date is selected.is-highlighted - when the date is highlighted.is-today - when the date is current one.is-start_selection - when the date is start day of selection.is-end_selection - when the date is end day of selection.is-current_month - when the date belongs to the current month.is-prev_month - when the date belongs to the previous month.is-next_month - when the date belongs to the next month.is-weekend - when the date is the weekend.is-working_day - when the date is the working day.is-selectable - when the date can be selected.is-not_selectable - when the date can't be selected
| Calendar notice (notice element) | | |
Fork this repository and clone your version of the repository
Install dependencies
`bash`
yarn
Start example server locally
`bash`
yarn start
You now have examples running on http://localhost:9000
Fork this repository and clone your version of the repository
Install dependencies
`bash`
yarn
Start example server locally
`bash``
yarn storybook
You now have examples running on http://localhost:6006
[npm-badge-png]: https://nodei.co/npm/simple-react-calendar.png?downloads=true&downloadRank=true&stars=true
[npm-version-svg]: http://versionbadg.es/toptal/simple-react-calendar.svg
[deps]: https://david-dm.org/toptal/simple-react-calendar.svg
[deps-url]: https://david-dm.org/toptal/simple-react-calendar
[package-url]: https://npmjs.org/package/simple-react-calendar
[npm-image]: http://img.shields.io/npm/v/simple-react-calendar.svg
[npm-url]: http://npmjs.org/package/simple-react-calendar
[travis-image]: https://travis-ci.org/toptal/simple-react-calendar.svg?branch=master
[travis-url]: https://travis-ci.org/toptal/simple-react-calendar?branch=master
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg
[node-url]: http://nodejs.org/download/
[download-image]: https://img.shields.io/npm/dm/simple-react-calendar.svg
[download-url]: https://npmjs.org/package/simple-react-calendar
[cf-image]: https://www.codefactor.io/repository/github/toptal/simple-react-calendar/badge
[cf-url]: https://www.codefactor.io/repository/github/toptal/simple-react-calendar
[prettier-image]: https://img.shields.io/badge/styled_with-prettier-ff69b4.svg
[prettier-url]: https://github.com/prettier/prettier
[jest-image]: https://img.shields.io/badge/tested_with-Jest-%2399424f.svg
[jest-url]: https://facebook.github.io/jest/
[codecov-image]: https://codecov.io/gh/toptal/simple-react-calendar/branch/master/graph/badge.svg
[codecov-url]: https://codecov.io/gh/toptal/simple-react-calendar
[storybook-image]: https://img.shields.io/badge/storybook-provided-f1618c.svg
[storybook-url]: https://storybook.js.org/
[semantic-image]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
[semantic-url]: https://github.com/semantic-release/semantic-release