multiCalendar.js

'use strict';

var React = require('react');
var _ = require('ramda');
var moment = require('moment');
var Day = require('components/day');
var Calendar = require('components/calendar');


class MultiCalendar extends React.Component {

    constructor(props) {
        super();

        this.state = {
            year: props.year,
            month: props.month
        };
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.year !== this.props.year) {
            this.setState({ year: nextProps.year });
        }

        if (nextProps.month !== this.props.month) {
            this.setState({ month: nextProps.month });
        }
    }

    getCalendars(date) {
        var range = _.range(0, this.props.numCalendars);
        return _.map((num) => date.clone().add(num, 'month'), range);
    }

    increment(direction) {
        var next = moment()
                    .month(this.state.month)
                    .year(this.state.year)
                    .add(direction, 'month');

        this.setState({
            month: next.month(),
            year: next.year()
        });
    }

    render() {
        var date = moment()
                    .month(this.state.month)
                    .year(this.state.year)

        var Calendar = this.props.calendarComponent;
        var calendars = this.getCalendars(date);

        return <div className="multi-calander-container">
            <div className="previous" onClick={this.increment.bind(this, -1)}>Previous</div>
            <div className="next" onClick={this.increment.bind(this, 1)}>Next</div>
            <div className="cal-row">
                {_.map(calendar => <Calendar
                                        {...this.props}
                                        month={calendar.month()}
                                        year={calendar.year()} />, calendars)}
            </div>
        </div>;
    }

}

MultiCalendar.defaultProps = {
    className: '',

    numCalendars: 1,

    month: moment().month(),
    year: moment().year(),

    calendarComponent: Calendar
};

module.exports = MultiCalendar;