Simple calendar component for React  

  React   Oct 5, 2018

First here is the repository on github and the demo page.

Why a new component?

Quite simple answer, I needed a calendar that could be customized easily for multiple small projects.

This component handles the display of the calendar, and you can give it a custom element for the cells and/or the title (meaning name of the days). You could also don’t use this custom component and just display the date (for a date picker for example - see below).

The main callback is onDateSelected which will be called - as you would guess - when a cell has been clicked with the date as parameter, so you can do anything, like displaying a modal to create lets say an event.

More information on the documentation.

Quick demo

function DatePicker() {
	var date = new Date('08/05/2018');
	return (
		<div>
			<div>
				{/* you could add buttons to navigate between months */}
				<h1>August</h1>
			</div>
			<Calendar
				className="minimal-calendar"
				currentMonth={date}
				onDateSelected={date => console.log(date)}
				cellContainerStyle=
				showMonthName={false}
				titleComponent={CustomTitleCell}
			/>
		</div>
	);
}

Share it