# horizontal-calendar

> Fancy horizontal scrolling calendar for react

Latest version **1.0.7** (published 2019-02-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install horizontal-calendar
pnpm add horizontal-calendar
yarn add horizontal-calendar
bun add horizontal-calendar
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2019-02-04 |
| First published | 2018-11-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 1 |
| Unpacked size | 405.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | SethHamilton |
| Maintainers | sethhamilton |

## Links

- npm: https://www.npmjs.com/package/horizontal-calendar
- Repository: https://github.com/CrowdConduct/HorizontalCalendar
- Homepage: https://github.com/CrowdConduct/HorizontalCalendar#readme
- Issues: https://github.com/CrowdConduct/HorizontalCalendar/issues
- npm.io page: https://npm.io/package/horizontal-calendar

## Dependencies (1)

- [scrollomatic](https://npm.io/package/scrollomatic.md) ^1.0.9

## Recent versions

- 1.0.7 (latest) — 2019-02-04
- 1.0.6 — 2019-01-16
- 1.0.5 — 2018-12-14
- 1.0.2 — 2018-11-28
- 1.0.1 — 2018-11-28
- 1.0.0 — 2018-11-28

## README

# horizontal-calendar

> Fancy horizontal scrolling calendar for react

[![NPM](https://img.shields.io/npm/v/horizontal-calendar.svg)](https://www.npmjs.com/package/horizontal-calendar) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

> :baby_bottle: `horizontal-calendar` is in alpha

## Install

```bash
npm install --save horizontal-calendar
```

## Live Example

[Live Horizontal Calendar]()

## Usage

`HorizontalCalendar` will size itself (width-wise) according the width of it's parent container.

## Parameters

- `showing` - object with keys named `years`, `quarters`, `months`, `days`, `weeks` or `days`. This parameter is optional, and will default to all showing. Additionaly, you only have to include the keys you want to toggle.
- `noSelect` - object with same keys as `showing`. This parameter is optional, and only the keys you want to toggle need to be included. If you would like to make something visible, but not selectable (i.e. show years and months, but only select days), you would uses `showing={{quarters: false, weeks: false}}` and `noSelect={{years: false, months:false}}`.
- `startDate` - start of date range to display. Can be Unix seconds or date in string format `YYYY-MM-DD` - note the calendar runs in UTC internally (without a timezone).
- `endDate` - end of date range to display. Can be Unix seconds or date in string format `YYYY-MM-DD` - note the calendar runs in UTC internally (without a timezone).
- `selectedMode` - used to render with a selected period in conjunction with `selectedDate`. Options are `day`, `week`, `month`, `quarter` and `year`.
- `selectedDate` - used to render with a selected period in conjunction with `selectedMode`. Can be Unix seconds or date in string format `YYYY-MM-DD` - note the calendar runs in UTC internally (without a timezone).

> **Note**  this componenet uses [Scrollomatic](https://github.com/CrowdConduct/HorizontalCalendar) for horizontal scrolling with scrollbars that look the same on all platforms.


## Example


```jsx
import React, { Component } from 'react'

import HorizontalCalendar from 'horizontal-calendar'

export default class App extends Component {
  render () {
    return (
      <div>
        <HorizontalCalendar
          showing={{
            years: true,
            quarters: true,
            months: true,
            days: true,
            weeks: true
          }}
          noSelect={{
            years: false,
            quarters: false,
            months: false,
            days: false,
            weeks: false
          }}
          startDate='2015-08-05'
          endDate='2017-08-05'
          selectedMode='day'
          selectedDate='2017-06-07'/>
      </div>
    )
  }
}
```

## License

MIT 

Copyright 2018, Crowd Conduct Corp.

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