Slek

An unstyled calendar component for React.

Features

• 🛠️ Customizable
• 🌟 Lightweight
• ☝️ 1 dependency
• ↩️ RTL support

Installation

npm install slek

Usage

import Calendar, {useCalendar} from 'slek';

const { date, setDate } = useCalendar(new Date());

<Calendar date={date} onChange={((d) => setDate(d))}>
  <Calendar.Header>
    <Calendar.Headline />
    <Calendar.NextButton />
    <Calendar.PrevButton />
  </Calendar.Header>
  <Calendar.Grid>
      {(props) => <MyCell>{props.value}</MyCell>}
  </Calendar.Grid>
</Calendar>

API Reference

The Calendar component is composed of several parts. All parts accept basic HTML element props (style, className...), including ref. Each part has a specific data-attribute (starting with slek-) that can be used for easy styling.

Calendar

slek-root - The main component.

Prop	Type	Default	Description
date	Date | Date[]	--	The date to display in the calendar
minDate	Date	--	The minimum date that can be selected
maxDate	Date	--	The maximum date that can be selected
weekStart	number	0	The day of the week to start on (0 = Sunday, 1 = Monday...)
locale	string	"en"	The locale to use for formatting dates
disabled	boolean	false	Whether the calendar is disabled
onChange	(date: Date | Date[]) => void	--	Callback when the date changes

Under the hood, we are using dayjs to do all the magic, so if you want to change the local make sure to import that locale from the dayjs package. (See more info here)

Header

slek-header - The header wrapper of the calendar, should contain the headline and the navigation buttons.

Prop	Type	Default	Description
ref	React.RefObject	--	The ref of the header element

Headline

slek-headline - The headline of the calendar, displays the current month and year.

Prop	Type	Default	Description
monthStyle	"full" | "short"	"full"	The style of the month name
disableClick	boolean	false	Whether the headline is clickable
ref	React.RefObject	--	The ref of the headline element
onClick	() => void	--	Callback when the headline is clicked

NextButton

slek-next-button - The next button of the calendar, navigates to the next month or next 10 years. Can also be used as a wrapper for a custom next button.

Prop	Type	Default	Description
ref	React.RefObject	--	The ref of the next button element
onClick	() => void	--	Callback when the next button is clicked

PrevButton

slek-prev-button - The previous button of the calendar, navigates to the previous month or previous 10 years. Can also be used as a wrapper for a custom previous button.

Prop	Type	Default	Description
ref	React.RefObject	--	The ref of the previous button element
onClick	() => void	--	Callback when the previous button is clicked

Grid

slek-grid - The grid of the calendar, contains the cells.

Prop	Type	Default	Description
mode	"single" | "range" | "multiple"	"single"	The selection mode of the calendar
direction	"ltr" | "rtl"	"ltr"	The direction of the calendar
weekdayStyle	"full" | "short" | "min"	"min"	The style of the weekday names
monthStyle	"full" | "short"	"short"	The style of the month name
showOutsideDates	boolean	true	Whether to show dates from the previous and next months
ref	React.RefObject	--	The ref of the grid element

The children of the Grid component is a render prop that receives the following props:

Prop	Type	Description
value	string | number	The value of the cell
type	"date" | "month" | "year"	The type of the cell
outsideDate	boolean	Whether the cell is from the previous or next month
today	boolean	Whether the cell is today
disabled	boolean	Whether the cell is disabled
invalid	boolean	Whether the cell is invalid (based on the min/max dates)
selected	boolean	Whether the cell is selected
between	boolean	Whether the cell is between two selected dates (only in range mode)

Cell

slek-cell - The cell of the calendar, used as a wrapper for a custom cell. For convenience, the Cell includes those data attributes:

Data attribute	Values
data-outside-date	"true" | "false"
data-today	"true" | "false"
data-disabled	"true" | "false"
data-invalid	"true" | "false"
data-selected	"true" | "false"
data-between	"true" | "false"
data-type	"date" | "month" | "year"

Utils

useCalendar

A simple hook that returns the current date and a function to set the date. You can use it to control the date from outside the calendar. The hook accepts an optional initial date. The hook returns an object with the following properties:

Property	Type	Description
date	Date | Date[]	The current date
setDate	(date: Date | Date[]) => void	A function to set the date
selectToday	() => void	A function to select today
selectCustom	(date: Date) => void	A function to select a custom date

const { date, setDate } = useCalendar();

<Calendar date={date} onChange={(d) => setDate(d)}>
...
</Calendar>

Contributing

If you want to contribute to the development, please follow these steps:

Fork the repository. Create a new branch. Make your changes. Submit a pull request.

License

This project is licensed under the MIT License.