kouloughli-hemza/simple-react-calendar

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	.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