Responsive React.js event calendar (Demo)
are both considered external dependencies, so they are not packed/distributed within this component set, but must be included in your setup.
npm install tannen.js- open
example/index.htmlin a browser
If you clone the project from Github, make sure you run npm install to get all the dependencies.
var React = require('react');
var Tannen = require('tannen.js');
React.render(
<Tannen
init_date='2015-07-01'
events={[
{
start_date: '2015-07-22',
end_date: '2015-07-28',
title: 'Event A',
description: 'This will show up in a tooltip if a library like Semantic UI is detected.',
url: 'http://www.example.com'
},
{
start_date: '2015-07-24',
end_date: '2015-07-24',
title: 'Event B'
},
{
start_date: '2015-07-05',
end_date: '2015-07-10',
title: 'Event C'
},
{
start_date: '2015-07-24',
end_date: '2015-07-27',
title: 'Event D'
},
{
start_date: '2015-07-25',
end_date: '2015-07-25',
title: 'Event E'
}
]}/>,
document.getElementById('tannen-example')
);A number of settings can be controlled through the props:
| Prop name | type | initial Value | Description |
|---|---|---|---|
| init_date | string | today | day to initialize the calendar on in string format (ex: 2015-07-31) |
| view_mode | string | 'month' | can be set to either 'month' or 'week' to determine what view mode to initialize with |
| view_mode_switch | boolean | true | whether or not to display the view mode switch link |
| events | array | null | list of events that will populate the calendar |
| width | string | '100%' | width of the component |
| previous_label | string | '◀' | HTML for the previous month link |
| next_label | string | '▶' | HTML for the next month link |
| event_colors | array | ['#1678c2', '#16ab39', '#fbbd08', '#2185d0', '#6435c9'] |
list of colors to cycle through for events |
| weekdays_alignment | string | 'center' | header text alignment |
| day_alignment | string | 'right' | calendar day text alignment |
| event_title | string | 'title' | event property to use for the title |
| event_content | string | 'content' | event property to use for the tooltip |
The rest can and should be overridden with CSS.
- Tooltip support for Bootstrap and Foundation if detected