the-calendar
==========

<!---
This file is generated by the-tmpl. Do not update manually.
--->

<!-- Badge Start -->
<a name="badges"></a>

[![Build Status][bd_travis_shield_url]][bd_travis_url]
[![npm Version][bd_npm_shield_url]][bd_npm_url]
[![JS Standard][bd_standard_shield_url]][bd_standard_url]

[bd_repo_url]: https://github.com/the-labo/the-calendar
[bd_travis_url]: http://travis-ci.org/the-labo/the-calendar
[bd_travis_shield_url]: http://img.shields.io/travis/the-labo/the-calendar.svg?style=flat
[bd_travis_com_url]: http://travis-ci.com/the-labo/the-calendar
[bd_travis_com_shield_url]: https://api.travis-ci.com/the-labo/the-calendar.svg?token=
[bd_license_url]: https://github.com/the-labo/the-calendar/blob/master/LICENSE
[bd_npm_url]: http://www.npmjs.org/package/the-calendar
[bd_npm_shield_url]: http://img.shields.io/npm/v/the-calendar.svg?style=flat
[bd_standard_url]: http://standardjs.com/
[bd_standard_shield_url]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg

<!-- Badge End -->


<!-- Description Start -->
<a name="description"></a>

Calendar of the-components

<!-- Description End -->


<!-- Overview Start -->
<a name="overview"></a>



<!-- Overview End -->


<!-- Sections Start -->
<a name="sections"></a>

<!-- Section from "doc/guides/01.Installation.md.hbs" Start -->

<a name="section-doc-guides-01-installation-md"></a>

Installation
-----

```bash
$ npm install the-calendar --save
```


<!-- Section from "doc/guides/01.Installation.md.hbs" End -->

<!-- Section from "doc/guides/02.Usage.md.hbs" Start -->

<a name="section-doc-guides-02-usage-md"></a>

Usage
---------

```javascript
'use strict'

import React from 'react'
import { TheCalendar, TheCalendarStyle } from 'the-calendar'
import { TheButtonStyle } from 'the-button'

const events = [
  {
    id: 1,
    node: <span>This is event01</span>,
    start: new Date(),
    end: new Date(new Date().getTime() + 60 * 60 * 1000),
    onSelect: (event) => {
      console.log('event01 selected!', event)
    }
  },

  {
    id: 2,
    node: <span>This is event02</span>,
    start: new Date(new Date().getTime() + 24 * 60 * 60 * 1000),
    end: new Date(new Date().getTime() + 25 * 60 * 60 * 1000),
    onSelect: (event) => {
      console.log('event02 selected!', event)
    }
  }
]

class ExampleComponent extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      view: 'month',
      date: new Date(),
    }
  }

  render () {
    return (
      <div>
        <TheButtonStyle/>
        <TheCalendarStyle/>
        <TheCalendar onNavigate={(date) => this.setState({ date })}
                     onView={(view) => this.setState({ view })}
                     date={this.state.date}
                     view={this.state.view}
                     events={events}
        >
        </TheCalendar>
      </div>

    )
  }
}

export default ExampleComponent

```


<!-- Section from "doc/guides/02.Usage.md.hbs" End -->

<!-- Section from "doc/guides/03.Components.md.hbs" Start -->

<a name="section-doc-guides-03-components-md"></a>

Components
-----------

### TheCalendar

Calendar of the-components

**Props**

| Name | Type | Description | Default |
| --- | --- | ---- | ---- |
| `date` | object  | Showing date object | `` |
| `events` | arrayOf object | Events to show | `[]` |
| `lang` | string  | Lang | `'en'` |
| `onNavigate` | func  | Navigate to date | `null` |
| `onView` | func  | Change view | `null` |
| `view` | string  | View of calendar | `'month'` |
| `views` | arrayOf string |  | `['month', 'day']` |
| `toolbar` |   |  | `false` |

### TheCalendarStyle

Style for TheCalendar

**Props**

| Name | Type | Description | Default |
| --- | --- | ---- | ---- |
| `options` | object  | Style options | `{}` |



<!-- Section from "doc/guides/03.Components.md.hbs" End -->


<!-- Sections Start -->


<!-- LICENSE Start -->
<a name="license"></a>

License
-------
This software is released under the [MIT License](https://github.com/the-labo/the-calendar/blob/master/LICENSE).

<!-- LICENSE End -->


<!-- Links Start -->
<a name="links"></a>

Links
------

+ [THE Labo][t_h_e_labo_url]

[t_h_e_labo_url]: https://github.com/the-labo

<!-- Links End -->
