toptal / simple-react-calendar

A simple react based calendar component to be used for selecting dates and date ranges

simple-react-calendar

---

⚠️ Please note that the repository is no longer maintained and was archived. If you need to use a calendar, please use the Calendar component from Picasso component library or React Day Picker library

---

---

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	.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
Calendar week header day (week day)	.calendar-days_of_week_day	.is-weekend - when the day is the weekend
Calendar month (weeks wrapper element)	.calendar-month
Calendar week (days wrapper element)	.calendar-week
Calendar day	.calendar-day	.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)	.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

simple-react-calendar's Issues

daysOfWeek array of String - Duplicated key if using ['M', 'T', 'W', 'T']

If you use an array of string for the days of the week like this:

daysOfWeek={['M', 'T', 'W', 'T', 'F', 'S', 'S']}

The package will use duplicated keys and bug when clicking on days... Maybe instead of using the values of the array for the keys, use the index of the value?

Update `Webpack` and `Babel`

Are you submitting a bug report or a feature request?

Road to Storybook support, update to the latest version of Webpack and Babel

What is the current behavior?

--

What is the expected behavior?

--

What's your environment?

--

Other information

--

Extract date related logic from components

Are you submitting a bug report or a feature request?

What is the current behavior?

What is the expected behavior?

What's your environment?

Other information

[extend] Add support for Timezones

Are you submitting a bug report or a feature request?

What is the current behavior?

What is the expected behavior?

What's your environment?

Other information

TypeError: Cannot set property 'defaultPrevented' of undefined

What is the current behavior?

If we click on a disabled date, an error like this is thrown:

TypeError: Cannot set property 'defaultPrevented' of undefined
  at preventDefault(./node_modules/react-dom/cjs/react-dom.production.min.js:1235:10)
  at apply(./node_modules/@toptal/picasso-lab/node_modules/simple-react-calendar/lib/calendar/month.js:385:7)
  at apply(./node_modules/react-dom/cjs/react-dom.production.min.js:80:7)

What is the expected behavior?

For it not to throw errors when clicking on a disabled day.

What's your environment?

Chrome 80
Mac OS X Catalina
[email protected]

Add automatic range selection handling

• onSelect callback in range mode will be called when second date is selected.
• New callback will be added: onSelectionProgress. It will work exactly how onSelect works right now with range mode. When it's passed, automatic range selection handling will be disabled.

Number of weeks must be consistent

Currently a number of displayed weeks is depends on a month, but it's usual practice (see OSX apps) to display 6 weeks in any month, like that:

Update `Jest`

Are you submitting a bug report or a feature request?

Outdated warning received during yarn installation related to jest-context

What is the current behavior?

--

What is the expected behavior?

--

What's your environment?

--

Other information

--

Remove unused `Test` build settings from Webpack

Are you submitting a bug report or a feature request?

Request

What is the current behavior?

---

What is the expected behavior?

Remove unused Test settings from webpack

What's your environment?

---

Other information

---

highlight more than one date

Hello,
I want to highlight more than one date. Currently it is accepting only one object. like

The highlighted props is accepting only single object. But i need array of object, just like disabledIntervals props

I have added more comments in attached file. Please check it.
app.txt

I request to please update the npm package with above feature.

css for the calendar?

Hello guys,

it seems to be a stupid question, but when i import the calendar and use it in react it issnt styled - i also cant find any styles in the source-code? can you help me?

Upgrade to React 16

Support React 16

Error when starting the development server

Are you submitting a bug report or a feature request?

Bug report

What is the current behavior?

An error is thrown when I try to run yarn start:

ERROR in Entry module not found: Error: Can't resolve './src/example/index.jsx' in '/path/to/project/simple-react-calendar'

What is the expected behavior?

Starting the development server correctly

What's your environment?

React version: 16.0.0
Node version: 10.18.0
OS: Ubuntu 18.04

Other information

I'll send a PR to fix it.

Invalid build for `1.6.0` version

Hey, guys. I tried to use calendar with React 16 and installed 1.6.0 version. And I noticed in lib/calendar/_lib/index.js there is a wrong link to PropTypes. Here is a content of that file:

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.datePropType = undefined;

var _react = require('react');

var datePropType = exports.datePropType = _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string, _react.PropTypes.instanceOf(Date)]);

PropTypes was imported from react. Can you re-upload the package, please?

When activeMonth is not passed, it breaks on the second render

The activeMonth prop is optional, but on componentWillReceiveProps there is condition that breaks the component:

componentWillReceiveProps(nextProps) {
  if (!isSameMonth(nextProps.activeMonth, this.props.activeMonth)) {
    this.setState({activeMonth: startOfMonth(nextProps.activeMonth)})
  }
}

Implement `Jest` for testing

Are you submitting a bug report or a feature request?

This is a feature request

What is the current behavior?

What is the expected behavior?

Using Jest as a multi thread test suite for testing the lib

What's your environment?

Other information

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

The push permission to the Git repository is required.

semantic-release cannot push the version tag to the branch master on remote Git repository with URL https://[secure]@github.com/toptal/simple-react-calendar.git.

Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment and make sure the repositoryUrl is configured with a valid Git URL.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Missing LICENSE file

Are you submitting a bug report or a feature request?

Bug report.

What is the current behavior?

No license is included with the source code.

What is the expected behavior?

A license would be included with the source code.

What's your environment?

N/A

Other information

The package.json file suggests that the project is MIT licensed, but there there is no license in the repo to refer to. Maybe that's enough, or maybe it's not? I am not a lawyer, so I can't say for sure. But I do think that including an explicit license would make it a lot easier to tell.

Images for README.md

Weekend modifier is missing on weekend week days

Create base Github files and Changelog

Create

• CONTRIBUTING.md -> to provide guideline for contributing
• issue_template.md -> to have template for issues
• PULL_REQUEST_TEMPLATE.md -> to have PR template
• CHANGELOG.md -> to provide history for releases

React warns about componentWillReceiveProps

Are you submitting a bug report or a feature request?

Using React 16 this module generates runtime warnings

Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this 
warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all 
deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-
lifecycles` in your project source folder.

What is the current behavior?

I see the warning.

What is the expected behavior?

I see no warning.

What's your environment?

[email protected]

Add classes for selected dates

Hey guys, awesome plugin!
Got a question, how do I add all the classes onclick for selected dates etc? By default there is no class added to the item when I click it.

Thank you

support locale

Are you submitting a bug report or a feature request?

What is the current behavior?

What is the expected behavior?

What's your environment?

Other information

Add locale support for month name

Are you submitting a bug report or a feature request?

Feature request

What is the current behavior?

Month names are english only and there is no way to change it since it's using formatDate function from date-fns, which defaults to en-US if no locale is specified.

What is the expected behavior?

Should be able to pass a locale prop to the component and get months names according to it.

What's your environment?

simple-react-calendar 1.9.4

Deliver type definitions with the package

we need to deliver .d.ts files as well

Add `Prettier` to the project

• Provide consistent code formatting for .js and .md files
• Add commit hook to provide consistent code base formatted

Add storybook support?

Something like in airbnb-dates

Rewrite tests with testing-library

Are you submitting a bug report or a feature request?

Problem. Current tests are testing implementation details

What is the current behavior?

What is the expected behavior?

Tests doesn't test implementation details

What's your environment?

Other information

[build] Upgrade to Babel 7

Are you submitting a bug report or a feature request?

feature request

What is the current behavior?

Babel 6 -> Babel 7

What is the expected behavior?

What's your environment?

Other information

Upgrade calendar to v2 of date-fns

Improve Readme

Are you submitting a bug report or a feature request?

Current Readme has a broken section of ClassNames

What is the current behavior?

What is the expected behavior?

Should be fixed in markDown

What's your environment?

Other information

Missing styles in build ?

Hello,

I have just installed this library using yarn and I tried to include in my app:

<SimpleReactCalendar activeMonth={new Date()} />

I am using fresh React boilerplate from create-react-app, no extra configuration. It looks like that styles are missing, but they are also not present in dist directory of this package.

Am I missing something ?

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two-Factor Authentication, make configure the auth-only level is supported. semantic-release cannot publish with the default auth-and-writes level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀