simple-react-calendar
simple-react-calendar copied to clipboard
toptal
A simple react based calendar component to be used for selecting dates and date ranges
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.
| 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 ) |
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)
Render Prop's Components
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) => <Day {...props} /> |
RenderPropsComponents/Day/Day.tsx |
renderDayOfWeek |
(props) => <DayOfWeek {...props} /> |
RenderPropsComponents/DayOfWeek/DayOfWeek.tsx |
renderNotice |
(props) => <Notice {...props} /> |
RenderPropsComponents/Notice/Notice.tsx |
Expose date helper methods
You can easily override any helper methods, all of them exposed as pure functions.
| Helper function | Default function |
|---|---|
getDayFormatted |
getDayFormatted |
getISODate |
getISODate |
getNoticeContent |
getNoticeContent |
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).
| Description | Default Class Name | Modifier Class Names |
|---|---|---|
| Calendar (root element) | .calendar |
|
| Calendar month header | .calendar-month_header |
|
| Calendar month header title (month name) | .calendar-month_header_title |
|
| Calendar header button (month switcher) | .calendar-header_button |
|
| Calendar week header (week days) | .calendar-days_of_week |
|
| Calendar week header day (week day) | .calendar-days_of_week_day |
|
| Calendar month (weeks wrapper element) | .calendar-month |
|
| Calendar week (days wrapper element) | .calendar-week |
|
| Calendar day | .calendar-day |
|
| Calendar notice (notice element) | .calendar-notice |
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
toptal