# @foundationcomponentrepo/calendar-date-picker

> Base Calendar Date Picker component for foundation

Latest version **0.6.0** (published 2023-02-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @foundationcomponentrepo/calendar-date-picker
pnpm add @foundationcomponentrepo/calendar-date-picker
yarn add @foundationcomponentrepo/calendar-date-picker
bun add @foundationcomponentrepo/calendar-date-picker
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.6.0 |
| Published | 2023-02-07 |
| First published | 2022-12-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 3 |
| Unpacked size | 314.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | UnPlatforms |
| Maintainers | devvasudha |

## Links

- npm: https://www.npmjs.com/package/@foundationcomponentrepo/calendar-date-picker
- Repository: https://github.com/unplatforms/FoundationalRepo
- Homepage: https://github.com/unplatforms/FoundationalRepo#readme
- Issues: https://github.com/unplatforms/FoundationalRepo/issues
- npm.io page: https://npm.io/package/@foundationcomponentrepo/calendar-date-picker

## Dependencies (3)

- [react](https://npm.io/package/react.md) latest
- [react-dom](https://npm.io/package/react-dom.md) latest
- [styled-components](https://npm.io/package/styled-components.md) ^5.3.5

## Recent versions

- 0.6.0 (latest) — 2023-02-07
- 0.5.3 — 2023-02-06
- 0.5.2 — 2023-01-31
- 0.5.0 — 2022-12-18
- 0.4.0 — 2022-12-18
- 0.3.0 — 2022-12-18

## README

# @foundationcomponentrepo/calendar-date-picker

> Base Calendar Date Picker component for foundation

## Props

### `availableSlots: object`

The `availableSlots` prop is used to pass the information regarding the dates available for selection

The object structure is as follows:

```
availableSlots = {
    [year: number]: {
      [month: number]: Array<number>;
    };
};
```

### `startDate?: string`

The `startDate` prop is to set a lower limit for calendar navigation. The string can be of any format that can be accepted by the `Date` constructor.

### `endDate?: string`

The `endDate` prop is to set a upper limit for calendar navigation. The string can be of any format that can be accepted by the `Date` constructor.

### `onClick: (e: any) => void`

The `onClick` can be used to pass a function to retrieve the date string of the date on which the user clicks.

### `onChange: (month: number, year: number) => void`

The `onChange` can be used to pass a function to retrieve the month and year of the current calendar being displayed. This function gets triggered everytime the user goes to the next or previous month.

## Install

```bash
npm install --save @foundationcomponentrepo/calendar-date-picker
```

## License

MIT © [unplatforms](https://github.com/unplatforms)

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