react-data-calendar

React calendar component. Displays daily events for each month.

Setup

This package is available via npm:

$ npm install react-data-calendar

Simply import the component into your application and render with React:

var React = require("react");
var Calendar = require("react-data-calendar");
 
React.render(<Calendar />, document.body);

Already have the events? Fantastic! Here's how you could display them:

var React = require("react");
var Calendar = require("react-data-component");
 
var ITEMS = {
    months: {
        // January
        "0": {
            days: {
                "1": [
                    {link: true, url: "http://google.com", text: "A link to content"},
                    {link: false, url: null, text: "Some other content"}
                ],
                "2": [
                    {link: false, url: null, text: "Some other content"}
                ]
            }
        },
 
        // March
        "2": {
            days: {
                "7": [
                    {link: true, url: "http://google.com", text: "A link to content"},
                    {link: false, url: null, text: "Some other content"}
                ],
                "20": [
                    {link: false, url: null, text: "Some other content"}
                ]
            }
        }
    }
};
 
React.render(<Calendar data={ITEMS} />, document.body);

Styles for react-data-calendar are found in dist/styles.css.

NOTE - This is still a work-in-progress and subject to change.

Development

You can build both the src JS and LESS with the npm build script:

$ npm run-script build

Or, build them separately:

// build JS
$ npm run-script build-js
 
// build LESS
$ npm run-script build-less