the-calendar
Calendar of the-components
Installation
$ npm install the-calendar --save
Usage
'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),
}
]
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
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 | {} |
License
This software is released under the MIT License.