Categories

React Calendar Component

Posted on: May 1, 2016 by Dimitar Ivanov

Introduction

Recently, I wrote about my first React based program - a grid component. In this blog post I'll describe how to use Facebook's React library for building better user interfaces. For this purpose I will use the JSX syntax to write the react calendar component. So let's get started.

First create a examples/index.html with the following contents.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>React Calendar</title>
    <script src="../build/react.min.js"></script>
    <script src="../build/react-dom.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <link href="calendar.css" rel="stylesheet">
</head>
<body>
    <div id="calendar"></div>
    <script src="../src/calendar.js"></script>
</body>
</html>

Then create src/calendar.js. This is the place where your React JSX code resides.

ReactDOM.render(
    React.createElement(Calendar),
    document.getElementById("calendar")
);

How to transform JSX

Since we intend to use this code in browser, we need to translate the JSX to plain JavaScript, so the browser can understand it. There are two ways to achieve this:

  • In-Browser Transform - that's what the babel's browser.min.js do in the examples/index.html. Use this method in dev environment, if you'd like. But in production you should use the offline transform for better performance.
  • Offline Transform - First install the Babel command-line tools (requires npm):
    npm install --global babel-cli
    npm install babel-preset-react
    

    Then, translate your src/calendar.js file to plain JavaScript:

    babel --presets react src --watch --out-dir build
    

The above command will auto-generate build/calendar.js. If you choose this method, remove the babel's browser.min.js and replace src/calendar.js with build/calendar.js at the examples/index.html.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>React Calendar</title>
    <script src="../build/react.min.js"></script>
    <script src="../build/react-dom.min.js"></script>
    <link href="calendar.css" rel="stylesheet">
</head>
<body>
    <div id="calendar"></div>
    <script src="../build/calendar.js"></script>
</body>
</html>

The Source Code

It's time to go deep into JSX. Let's see the src/calendar.js. You may notice that the calendar is separated into several react components.

var Calendar = React.createClass({
    calc: function (year, month) {},
    componentWillMount: function () {},
    componentDidMount: function () {},
    componentDidUpdate: function (prevProps, prevState) {},
    getInitialState: function () {
        var date = new Date();
        return {
            year: date.getFullYear(),
            month: date.getMonth(),
            selectedYear: date.getFullYear(),
            selectedMonth: date.getMonth(),
            selectedDate: date.getDate(),
            selectedDt: new Date(date.getFullYear(), date.getMonth(), date.getDate()),
            startDay: 1,
            weekNumbers: false,
            minDate: this.props.minDate ? this.props.minDate : null,
            disablePast: this.props.disablePast ? this.props.disablePast : false,
            dayNames: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
            monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            monthNamesFull: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
            firstOfMonth: null,
            daysInMonth: null
        };
    },
    getPrev: function () {},
    getNext: function () {},
    selectDate: function (year, month, date, element) {},
    render: function () {
        return (
            <div className="r-calendar">
                <div className="r-inner">
                    <Header monthNames={this.state.monthNamesFull} month={this.state.month} year={this.state.year} onPrev={this.getPrev} onNext={this.getNext} />
                    <WeekDays dayNames={this.state.dayNames} startDay={this.state.startDay} weekNumbers={this.state.weekNumbers} />
                    <MonthDates month={this.state.month} year={this.state.year} daysInMonth={this.state.daysInMonth} firstOfMonth={this.state.firstOfMonth} startDay={this.state.startDay} onSelect={this.selectDate} weekNumbers={this.state.weekNumbers} disablePast={this.state.disablePast} minDate={this.state.minDate} />
                </div>
            </div>
        );
    }
});

var Header = React.createClass({
    render: function () {}
});

var WeekDays = React.createClass({
    render: function () {}
});

var MonthDates = React.createClass({
    statics: {
        year: new Date().getFullYear(),
        month: new Date().getMonth(),
        date: new Date().getDate(),
        today: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())
    },
    render: function () {}
});

ReactDOM.render(
    React.createElement(Calendar, {
        //onSelect: function (state) {
            //console.log(this, state);
        //},
        //disablePast: true,
        //minDate: new Date(2016, 2, 28)
    }),
    document.getElementById("calendar")
);

Demo

Play with the react calendar demo on JSFiddle.net

Conclusion

If you want to write modular and reusable react components you may want to read more about browserify and webpack. Source code is available at GitHub.

See also
Share this post

If you have questions about the react calendar component, please leave a comment below. Thanks so much for reading! And do not shy to share this article.


0 Comments

Comments are closed