<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/nickjvm/pen/bERraX?depth=everything&order=popularity&page=11&q=react&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<style class="cp-pen-styles">.vertical-center {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
html {
font-size: 62.5%;
}
body {
background: #EFEFEF;
}
.row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
}
.calendar {
display: block;
background: #FFFFFF;
width: 300px;
border: solid 1px #CCCCCC;
margin: 10px auto;
box-shadow: 0 0 15px 0 #C0C0C0;
font-size: 1.3rem;
text-align: center;
}
.calendar header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #FFFFFF;
cursor: default;
font-size: 1.4rem;
display: block;
font-weight: bold;
text-transform: uppercase;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.calendar header .month-display {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 40px;
background: #2875C7;
}
.calendar header .month-label {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.calendar header .arrow {
text-align: center;
-ms-flex-preferred-size: 15%;
flex-basis: 15%;
font-weight: bold;
cursor: pointer;
-webkit-transition: background .2s;
transition: background .2s;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.calendar header .arrow:hover {
background: #1f5c9d;
}
.calendar .week {
border-top: solid 1px #CCCCCC;
}
.calendar .week:first-child {
border-top: none;
}
.calendar .day-names {
color: #2875C7;
font-weight: bold;
cursor: default;
font-size: 1.2rem;
}
.calendar .day-names .day {
cursor: default;
}
.calendar .day-names .day:hover {
background: inherit;
}
.calendar .day {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
height: 35px;
border-left: solid 1px #CCCCCC;
cursor: pointer;
-webkit-transition: all .2s;
transition: all .2s;
}
.calendar .day:hover {
background: #EFEFEF;
}
.calendar .day:first-child {
border-left: none;
}
.calendar .day.today {
background: #dceaf8;
}
.calendar .day.different-month {
color: #C0C0C0;
}
.calendar .day.selected {
background: #2875C7;
color: #FFFFFF;
}
</style></head><body>
<div id="app"></div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script><script src='https://momentjs.com/downloads/moment.min.js'></script>
<script >'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
//based on https://www.codementor.io/reactjs/tutorial/building-a-calendar-using-react-js--less-css-and-font-awesome
var Calendar = function (_React$Component) {
_inherits(Calendar, _React$Component);
function Calendar(props) {
_classCallCheck(this, Calendar);
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
_this.state = {
month: moment(),
selected: moment().startOf('day')
};
_this.previous = _this.previous.bind(_this);
_this.next = _this.next.bind(_this);
return _this;
}
Calendar.prototype.previous = function previous() {
var month = this.state.month;
this.setState({
month: month.subtract(1, 'month')
});
};
Calendar.prototype.next = function next() {
var month = this.state.month;
this.setState({
month: month.add(1, 'month')
});
};
Calendar.prototype.select = function select(day) {
this.setState({
selected: day.date,
month: day.date.clone()
});
};
Calendar.prototype.renderWeeks = function renderWeeks() {
var _this2 = this;
var weeks = [];
var done = false;
var date = this.state.month.clone().startOf("month").add("w" - 1).day("Sunday");
var count = 0;
var monthIndex = date.month();
var _state = this.state;
var selected = _state.selected;
var month = _state.month;
while (!done) {if (window.CP.shouldStopExecution(1)){break;}
weeks.push(React.createElement(Week, { key: date,
date: date.clone(),
month: month,
select: function select(day) {
return _this2.select(day);
},
selected: selected }));
date.add(1, "w");
done = count++ > 2 && monthIndex !== date.month();
monthIndex = date.month();
}
window.CP.exitedLoop(1);
return weeks;
};
Calendar.prototype.renderMonthLabel = function renderMonthLabel() {
var month = this.state.month;
return React.createElement(
'span',
{ className: 'month-label' },
month.format("MMMM YYYY")
);
};
Calendar.prototype.render = function render() {
return React.createElement(
'section',
{ className: 'calendar' },
React.createElement(
'header',
{ className: 'header' },
React.createElement(
'div',
{ className: 'month-display row' },
React.createElement('i', { className: 'arrow fa fa-angle-left', onClick: this.previous }),
this.renderMonthLabel(),
React.createElement('i', { className: 'arrow fa fa-angle-right', onClick: this.next })
),
React.createElement(DayNames, null)
),
this.renderWeeks()
);
};
return Calendar;
}(React.Component);
var DayNames = function (_React$Component2) {
_inherits(DayNames, _React$Component2);
function DayNames() {
_classCallCheck(this, DayNames);
return _possibleConstructorReturn(this, _React$Component2.apply(this, arguments));
}
DayNames.prototype.render = function render() {
return React.createElement(
'div',
{ className: 'row day-names' },
React.createElement(
'span',
{ className: 'day' },
'Sun'
),
React.createElement(
'span',
{ className: 'day' },
'Mon'
),
React.createElement(
'span',
{ className: 'day' },
'Tue'
),
React.createElement(
'span',
{ className: 'day' },
'Wed'
),
React.createElement(
'span',
{ className: 'day' },
'Thu'
),
React.createElement(
'span',
{ className: 'day' },
'Fri'
),
React.createElement(
'span',
{ className: 'day' },
'Sat'
)
);
};
return DayNames;
}(React.Component);
var Week = function (_React$Component3) {
_inherits(Week, _React$Component3);
function Week() {
_classCallCheck(this, Week);
return _possibleConstructorReturn(this, _React$Component3.apply(this, arguments));
}
Week.prototype.render = function render() {
var days = [];
var date = this.props.date;
var _props = this.props;
var month = _props.month;
var selected = _props.selected;
var select = _props.select;
for (var i = 0; i < 7; i++) {if (window.CP.shouldStopExecution(2)){break;}
var day = {
name: date.format("dd").substring(0, 1),
number: date.date(),
isCurrentMonth: date.month() === month.month(),
isToday: date.isSame(new Date(), "day"),
date: date
};
days.push(React.createElement(Day, { day: day,
selected: selected,
select: select }));
date = date.clone();
date.add(1, "day");
}
window.CP.exitedLoop(2);
return React.createElement(
'div',
{ className: 'row week', key: days[0] },
days
);
};
return Week;
}(React.Component);
var Day = function (_React$Component4) {
_inherits(Day, _React$Component4);
function Day() {
_classCallCheck(this, Day);
return _possibleConstructorReturn(this, _React$Component4.apply(this, arguments));
}
Day.prototype.render = function render() {
var _props2 = this.props;
var day = _props2.day;
var _props2$day = _props2.day;
var date = _props2$day.date;
var isCurrentMonth = _props2$day.isCurrentMonth;
var isToday = _props2$day.isToday;
var number = _props2$day.number;
var select = _props2.select;
var selected = _props2.selected;
return React.createElement(
'span',
{
key: date.toString(),
className: "day" + (isToday ? " today" : "") + (isCurrentMonth ? "" : " different-month") + (date.isSame(selected) ? " selected" : ""),
onClick: function onClick() {
return select(day);
} },
number
);
};
return Day;
}(React.Component);
ReactDOM.render(React.createElement(Calendar, null), document.getElementById('app'));
//# sourceURL=pen.js
</script>
</body></html>
