# wink-react-calendar

> Yet another calendar React component

Latest version **0.1.3** (published 2021-12-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install wink-react-calendar
pnpm add wink-react-calendar
yarn add wink-react-calendar
bun add wink-react-calendar
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2021-12-03 |
| First published | 2021-12-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 72.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Alen Ajam |
| Maintainers | winksrl |
| Keywords | calendar, react, wink, component, responsive |

## Links

- npm: https://www.npmjs.com/package/wink-react-calendar
- Repository: https://github.com/WINKgroup/wink-react-calendar
- Homepage: https://github.com/WINKgroup/wink-react-calendar#readme
- Issues: https://github.com/WINKgroup/wink-react-calendar/issues
- npm.io page: https://npm.io/package/wink-react-calendar

## Dependencies (4)

- [sass](https://npm.io/package/sass.md) ^1.44.0
- [luxon](https://npm.io/package/luxon.md) ^2.1.1
- [classnames](https://npm.io/package/classnames.md) ^2.3.1
- [typescript](https://npm.io/package/typescript.md) ^4.5.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.3 (latest) — 2021-12-03
- 0.1.2 — 2021-12-01
- 0.1.1 — 2021-12-01
- 0.1.0 — 2021-12-01

## README

# WiNK React Calendar

Yet another calendar React component

[![wink developer](https://badgen.net/badge/WiNK/Developer/ff5a3a)](https://wink.by)
[![npm](https://img.shields.io/npm/v/wink-react-calendar)](https://www.npmjs.com/package/wink-react-calendar)

[<img alt="calendar preview" src="https://winkgroup.github.io/wink-react-calendar/calendar_month_preview.png" height="300px"/>](https://winkgroup.github.io/wink-react-calendar/)

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) ✅
- Built on top of the modern and lightweight [Luxon](https://moment.github.io/luxon/#/) ⏰

## Demos

Check out the demos [here!](https://winkgroup.github.io/wink-react-calendar/)

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

<b>CalendarMonth</b>

| 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

---
_Source: https://npm.io/package/wink-react-calendar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._