WiNK React Calendar

Yet another calendar React component

Why should I use it?

• Get things done quickly with singleSelection and rangeSelection modes ✅
• Or do your own thing with custom mode and get creative 🎨
• Calendar events? We've got you covered
• Responsive and mobile first 📱
• Continously updated 🔥
• Layout built with the flexible CSS Grid ✅
• Built on top of the modern and lightweight Luxon ⏰

Demos

Check out the demos here!

Get Started

$ npm i wink-react-calendar

Usage

1. Import the css module

import 'wink-react-calendar/dist/css/style.css';

2. Import and use the component

import { CalendarMonth } from 'wink-react-calendar';

...

const [date, setDate] = useState();

...

<CalendarMonth
  mode='singleSelection'
  selectedDate={date}
  onCellClick={setDate}
/>

Props

CalendarMonth

Name	Type	Default	Description
mode	'singleSelection' | 'rangeSelection' | 'custom'	undefined	Define the mode of the calendar
currentMonth	Timestamp	Current month	Current month visualized on the calendar
className	string	undefined	Custom class for the outer container
weekDaysExceptions	WeekDay[]	[]	Weekdays to exclude from being rendered
cellsConfig	BaseCalendarMonthCellConfig[]	[]	Custom config for any cell based on date
minDate	Timestamp	undefined	Disable any cell which date is before this param
maxDate	Timestamp	undefined	Disable any cell which date is after this param
weeks	number	6	Number of weeks to be rendered at the same time
opaqueExtraMonthCells	boolean	true	Render cells which date doesn't belong to current month with a opaque style
borderCurrentDay	boolean	true	Render current day with a bordered style
navigateToCorrespondingMonth	boolean	true	Navigate to the corresponding month of a cell which date doesn't belong to current month
showWeekDaysLabels	boolean	true	Show weekdays labels on top
onCellClick	(date: Timestamp) => void	undefined	Triggered when a cell is clicked
onMonthChange	(date: Timestamp) => void	undefined	Triggered when the current month is changed
selectedDate	Timestamp	undefined	(singleSelection mode only) The current selected day which by default is shown with an active style
startDate	Timestamp	undefined	(rangeSelection mode only) Starting date of the range
endDate	Timestamp	undefined	(rangeSelection mode only) Ending date of the range
onSelectStartDate	(date?: Timestamp) => void	undefined	(rangeSelection mode only) Triggered when first date is selected
onSelectEndDate	(date?: Timestamp) => void	undefined	(rangeSelection mode only) Triggered when second date is selected

Typescript support

The package comes with types included