A simple calendar component for React based applications

simple-react-calendar

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

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 0

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