Categories
React Calendar Component
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 theexamples/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
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.
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.
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