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.

Subscribe to our newsletter

Join our mailing list and stay tuned! Never miss out news about Zino UI, new releases, or even blog post.

0 Comments

Comments are closed

Categories