14+ React Calendar Examples

This post contains a total of 14+ React Calendar Examples with Source Code. All these Calendar examples are made using React.

You can use the source code of these examples with credits to the original owner.

Related Posts

React Calendar Examples

1. Fully Working React Calendar

Made by Leith. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
<style>
body {
  background-color: #444444;
}

button:focus,
select:focus,
input {
  outline: 0;
}

.outer {
  padding: 1vw 0 1vw 0;
  margin-left: 50%;
  transform: translateX(-50%);
}
.outer .wrapper {
  margin: auto;
  position: static;
  display: flex;
}
.outer .wrapper .flip-container-left .flipper,
.outer .wrapper .flip-container-right .flipper {
  transform-style: preserve-3d;
  position: relative;
  height: inherit;
}
.outer .wrapper .flip-container-left .flipper .btn,
.outer .wrapper .flip-container-right .flipper .btn {
  width: 4vw;
  height: 4vw;
  cursor: pointer;
  border-radius: 50%;
}
.outer .wrapper .flip-container-left .flipper .btn:hover,
.outer .wrapper .flip-container-right .flipper .btn:hover {
  opacity: 0.5;
}
.outer .wrapper .flip-container-left .flipper .btn-prev,
.outer .wrapper .flip-container-left .flipper .btn-next,
.outer .wrapper .flip-container-right .flipper .btn-prev,
.outer .wrapper .flip-container-right .flipper .btn-next {
  border: 0.25vw #195499 solid;
  font-weight: bold;
  font-size: 1vw;
}
.outer .wrapper .flip-container-left .flipper .select-month,
.outer .wrapper .flip-container-right .flipper .select-month {
  height: 2vw;
  cursor: pointer;
  font-size: 1.5vw;
  border: none;
  border-left: 0.25vw solid #195499;
  border-right: 0.25vw solid #195499;
}
.outer .wrapper .flip-container-left .flipper .input-year,
.outer .wrapper .flip-container-right .flipper .input-year {
  width: 4vw;
  height: 2vw;
  font-size: 1.5vw;
  text-align: center;
  border: none;
  border-bottom: 0.25vw solid #195499;
}
.outer .wrapper .flip-container-left .flipper .container-event,
.outer .wrapper .flip-container-right .flipper .container-event {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-around;
}
.outer .wrapper .flip-container-left .flipper .container-event .input-time,
.outer .wrapper .flip-container-right .flipper .container-event .input-time {
  width: 4vw;
  height: 2vw;
  font-size: 1.5vw;
  text-align: center;
  border: none;
  border-bottom: 0.25vw solid #195499;
}
.outer .wrapper .flip-container-left .flipper .container-event .btn-submit,
.outer .wrapper .flip-container-right .flipper .container-event .btn-submit {
  border: 0.25vw #195499 solid;
}
.outer .wrapper .flip-container-left .flipper .input-event,
.outer .wrapper .flip-container-right .flipper .input-event {
  margin-top: 1vw;
  width: 16vw;
  height: 2vw;
  font-size: 1.5vw;
  text-align: center;
  border: none;
  border-bottom: 0.25vw solid #195499;
}
.outer .wrapper .flip-container-left .flipper .option-month,
.outer .wrapper .flip-container-right .flipper .option-month {
  color: #eeeeee;
  background-color: #195499;
}
.outer .wrapper .flip-container-left .flipper .front-left,
.outer .wrapper .flip-container-left .flipper .back-left,
.outer .wrapper .flip-container-right .flipper .front-left,
.outer .wrapper .flip-container-right .flipper .back-left {
  border-bottom-left-radius: 3vw;
  border-top-left-radius: 3vw;
}
.outer .wrapper .flip-container-left .flipper .front-left .btn-flip,
.outer .wrapper .flip-container-left .flipper .back-left .btn-flip,
.outer .wrapper .flip-container-right .flipper .front-left .btn-flip,
.outer .wrapper .flip-container-right .flipper .back-left .btn-flip {
  font-size: 1vw;
}
.outer .wrapper .flip-container-left .front-right,
.outer .wrapper .flip-container-left .back-right,
.outer .wrapper .flip-container-right .front-right,
.outer .wrapper .flip-container-right .back-right {
  border-bottom-right-radius: 3vw;
  border-top-right-radius: 3vw;
}
.outer .wrapper .flip-container-left .back,
.outer .wrapper .flip-container-right .back {
  transform: rotateX(180deg);
}
.outer .wrapper .flip-container-left .front,
.outer .wrapper .flip-container-left .back,
.outer .wrapper .flip-container-right .front,
.outer .wrapper .flip-container-right .back {
  backface-visibility: hidden;
  position: absolute;
}
.outer .flip-container-left .toggle {
  transform: rotateX(180deg);
}
.outer .flip-container-left .flipper {
  transition: 1s ease-out;
}
.outer .flip-container-left .flipper .front {
  background-color: #195499;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.outer .flip-container-left .flipper .front * {
  background-color: #195499;
  color: #eeeeee;
}
.outer .flip-container-left .flipper .front .btn-flip {
  border: 0.25vw #eeeeee solid;
  margin-top: 3vw;
}
.outer .flip-container-left .flipper .front h1 {
  margin: 0;
  font-size: 9vw;
  font-family: arial;
  font-weight: normal;
}
.outer .flip-container-left .flipper .front h2 {
  margin: 0;
  font-size: 1.5vw;
  font-family: arial;
  font-weight: normal;
}
.outer .flip-container-left .flipper .back {
  background-color: #eeeeee;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #eeeeee;
  color: #195499;
}
.outer .flip-container-left .flipper .back * {
  background-color: #eeeeee;
  color: #195499;
}
.outer .flip-container-left .flipper .back .btn-flip {
  border: 0.25vw #195499 solid;
  margin-top: 6vw;
}
.outer .flip-container-right .toggle {
  transform: rotateX(180deg);
}
.outer .flip-container-right .flipper {
  transition: 1s ease-in;
}
.outer .flip-container-right .flipper .front {
  background-color: #eeeeee;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: space-around;
  overflow: hidden;
}
.outer .flip-container-right .flipper .front * {
  background-color: #eeeeee;
  color: #195499;
}
.outer .flip-container-right .flipper .front * {
  overflow: hidden;
}
.outer .flip-container-right .flipper .front .container-date-picker {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-around;
}
.outer .flip-container-right .flipper .front .container-day {
  display: grid;
  text-align: center;
  width: 100%;
  justify-content: center;
  align-items: center;
  grid-template-columns: repeat(7, 3.4vw);
}
.outer .flip-container-right .flipper .front .container-day .weekday,
.outer .flip-container-right .flipper .front .container-day .day-block {
  height: 2vw;
  font-family: arial;
  font-weight: normal;
  font-weight: bold;
  font-size: 1.2vw;
}
.outer .flip-container-right .flipper .front .container-day .day-block {
  cursor: pointer;
  border: 0.7vw solid #eeeeee;
  border-radius: 50%;
  transition: 1s;
}
.outer .flip-container-right .flipper .front .container-day .day-block .inner {
  transition: background-color 1s;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.outer .flip-container-right .flipper .front .container-day .active {
  background-color: #195499;
  border: 0.7vw solid #195499;
  border-radius: 50%;
}
.outer .flip-container-right .flipper .front .container-day .active * {
  background-color: #195499;
  color: #eeeeee;
}
.outer .flip-container-right .flipper .back {
  background-color: #195499;
  overflow: hidden;
}
.outer .flip-container-right .flipper .back * {
  background-color: #195499;
  color: #eeeeee;
  font-family: arial;
  font-weight: normal;
}
.outer .flip-container-right .flipper .back .event {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-around;
  border-bottom: 0.1vw #eeeeee solid;
}
.outer .flip-container-right .flipper .back .event .event-time {
  padding-left: 1vw;
  min-width: 4vw;
  flex-grow: 0;
}
.outer .flip-container-right .flipper .back .event .event-name {
  flex-grow: 2;
}
.outer .flip-container-left,
.outer .front-left,
.outer .back-left {
  width: 19vw;
  height: 28vw;
}
.outer .flip-container-right,
.outer .front-right,
.outer .back-right {
  width: 30vw;
  height: 28vw;
}
</style>
</head>
<body>
  <div class="outer">
  <div id="root"></div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js'></script>
      <script>
function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}const arrMonth = {
  January: 31,
  February: 28,
  March: 31,
  April: 30,
  May: 31,
  June: 30,
  July: 31,
  August: 31,
  September: 30,
  October: 31,
  November: 30,
  December: 31 };

const arrDays = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"];


class LeftBlock extends React.Component {
  constructor(props) {
    super(props);_defineProperty(this, "handleClick",


    () => {
      this.handleToUpdate(!this.state.toggle);
      this.setState(prevState => ({
        toggle: !prevState.toggle }));

    });_defineProperty(this, "handleSubmit",
    () => {
      this.handleToUpdateSubmit(this.state.time, this.state.event);
      event.preventDefault();

    });_defineProperty(this, "handleTimeChange",
    event => {
      this.setState({ time: event.target.value });
    });_defineProperty(this, "handleEventChange",
    event => {
      this.setState({ event: event.target.value });

    });this.state = { toggle: true, time: "", event: "" };}
  render() {
    this.handleToUpdate = this.props.handleToUpdate;
    this.handleToUpdateSubmit = this.props.handleToUpdateSubmit;
    let h =
    (this.props.date.getHours() < 10 ? "0" : "") + this.props.date.getHours();
    let m =
    (this.props.date.getMinutes() < 10 ? "0" : "") +
    this.props.date.getMinutes();
    return /*#__PURE__*/(
      React.createElement("div", { className: "flip-container-left" }, /*#__PURE__*/
      React.createElement("div", { className: `flipper ${this.state.toggle ? "" : "toggle"}` }, /*#__PURE__*/
      React.createElement("div", { className: "front front-left" }, /*#__PURE__*/
      React.createElement("h2", null, "Today"), /*#__PURE__*/
      React.createElement("h1", null, this.props.date.getDate()), /*#__PURE__*/
      React.createElement("h2", null, arrDays[this.props.date.getDay()]), /*#__PURE__*/
      React.createElement("button", { className: "btn btn-flip", onClick: this.handleClick }, "+")), /*#__PURE__*/



      React.createElement("div", { className: "back back-left" }, /*#__PURE__*/
      React.createElement("form", { onSubmit: this.handleSubmit }, /*#__PURE__*/
      React.createElement("div", { className: "container-event" }, /*#__PURE__*/
      React.createElement("input", {
        type: "text",
        className: "input-time",
        maxlength: "5",
        placeholder: "12:00",
        onChange: this.handleTimeChange }), /*#__PURE__*/

      React.createElement("button", { className: "btn btn-submit" }, "β†’")), /*#__PURE__*/

      React.createElement("input", {
        type: "text",
        className: "input-event",
        placeholder: "Event",
        onChange: this.handleEventChange })), /*#__PURE__*/


      React.createElement("button", { className: "btn btn-flip", onClick: this.handleClick }, "-")))));






  }}


class RightBlock extends React.Component {
  constructor(props) {
    super(props);_defineProperty(this, "updateMonth",












    event => {
      let newMonth = Object.keys(arrMonth).indexOf(event.target.value);
      this.handleToUpdateDate(this.state.selectedDay + "/" + newMonth + "/" + this.state.selectedYear);
      this.setState({
        selectedMonth: newMonth,
        firstDay: new Date(
        this.state.selectedYear + "-" + (newMonth + 1) + "-01").
        getDay() });

    });_defineProperty(this, "prevMonth",
    () => {
      if (this.state.selectedMonth - 1 < 0) {
        this.handleToUpdateDate(this.state.selectedDay + "/" + 11 + "/" + this.state.selectedYear - 1);
        this.setState(prevState => ({
          selectedMonth: 11,
          selectedYear: prevState.selectedYear - 1,
          firstDay: new Date(prevState.selectedYear - 1 + "-" + "12-01").getDay() }));

      } else {
        this.handleToUpdateDate(this.state.selectedDay + "/" + this.state.selectedMonth - 1 + "/" + this.state.selectedYear);
        this.setState(prevState => ({
          selectedMonth: prevState.selectedMonth - 1,
          firstDay: new Date(
          this.state.selectedYear + "-" + prevState.selectedMonth + "-01").
          getDay() }));

      }
    });_defineProperty(this, "nextMonth",
    () => {
      if (this.state.selectedMonth + 1 > 11) {
        this.handleToUpdateDate(this.state.selectedDay + "/" + 0 + "/" + this.state.selectedYear + 1);
        this.setState(prevState => ({
          selectedMonth: 0,
          selectedYear: prevState.selectedYear + 1,
          firstDay: new Date(prevState.selectedYear + 1 + "-" + "01-01").getDay() }));

      } else {
        this.handleToUpdateDate(this.state.selectedDay + "/" + this.state.selectedMonth + 1 + "/" + this.state.selectedYear);
        this.setState(prevState => ({
          selectedMonth: prevState.selectedMonth + 1,
          firstDay: new Date(
          this.state.selectedYear + "-" + (prevState.selectedMonth + 2) + "-01").
          getDay() }));

      }
    });_defineProperty(this, "updateYear",
    event => {
      if (event.target.value.length == 4) {
        this.handleToUpdateDate(this.state.selectedDay + "/" + this.state.selectedMonth + "/" + event.target.value);
        this.setState({
          selectedYear: parseInt(event.target.value),
          firstDay: new Date(
          parseInt(event.target.value) + "-" + (this.state.selectedMonth + 1) + "-01").
          getDay() });

      } else if (event.target.value.length > 0) {
        this.setState({
          selectedYear: parseInt(event.target.value) });

      }
    });_defineProperty(this, "handleClick",
    event => {
      this.handleToUpdateDate(event.currentTarget.dataset.id + "/" + this.state.selectedMonth + "/" + this.state.selectedYear);
      this.setState({
        selectedDay: parseInt(event.currentTarget.dataset.id) });

    });this.state = { firstDay: new Date(this.props.date.getFullYear() + "-" + (this.props.date.getMonth() + 1) + "-01").getDay(), selectedYear: this.props.date.getFullYear(), selectedMonth: this.props.date.getMonth(), selectedDay: this.props.date.getDate() };}

  getDayBlocks() {
    let arrNo = [];
    for (let n = 0; n < this.state.firstDay; n++) {
      arrNo.push( /*#__PURE__*/React.createElement("div", { className: "day-block" }));
    }
    for (
    let i = 1;
    i < Object.values(arrMonth)[this.state.selectedMonth] + 1;
    i++)
    {
      arrNo.push( /*#__PURE__*/
      React.createElement("div", {
        "data-id": i,
        onClick: this.handleClick,
        className: `day-block ${i == this.state.selectedDay ? "active" : ""}` }, /*#__PURE__*/

      React.createElement("div", { className: "inner" }, i)));


    }
    return arrNo;
  }
  getEvents() {
    let events = [];
    let eventsToday = this.props.eventList.filter(event => {
      let dateArr = event[0].split('/');
      if (dateArr[0] == this.state.selectedDay && dateArr[1] == this.state.selectedMonth && dateArr[2] == this.state.selectedYear) {
        events.push( /*#__PURE__*/React.createElement("div", { className: "event" }, /*#__PURE__*/React.createElement("p", { className: "event-time" }, event[1]), /*#__PURE__*/React.createElement("p", { className: "event-name" }, event[2])));
      }
    });
    return events;
  }
  render() {
    this.handleToUpdateDate = this.props.handleToUpdateDate;

    const monthOptions = Object.keys(arrMonth).map((month) => /*#__PURE__*/
    React.createElement("option", {
      className: "option-month",
      selected:
      month == Object.keys(arrMonth)[this.state.selectedMonth] ? "selected" : "" },


    month));



    return /*#__PURE__*/(
      React.createElement("div", { className: "flip-container-right" }, /*#__PURE__*/
      React.createElement("div", { className: `flipper ${this.props.toggle ? "" : "toggle"}` }, /*#__PURE__*/
      React.createElement("div", { className: "front front-right" }, /*#__PURE__*/
      React.createElement("div", { className: "container-date-picker" }, /*#__PURE__*/
      React.createElement("button", { className: "btn btn-prev", onClick: this.prevMonth }, "<"), /*#__PURE__*/


      React.createElement("select", { className: "select-month", onChange: this.updateMonth },
      monthOptions), /*#__PURE__*/

      React.createElement("input", {
        type: "text",
        className: "input-year",
        onChange: this.updateYear,
        value: this.state.selectedYear,
        maxlength: "4" }), /*#__PURE__*/

      React.createElement("button", { className: "btn btn-next", onClick: this.nextMonth }, ">")), /*#__PURE__*/



      React.createElement("div", { className: "container-day" },
      arrDays.map((day) => /*#__PURE__*/
      React.createElement("div", { className: "weekday" }, day.substring(0, 3))),

      this.getDayBlocks())), /*#__PURE__*/


      React.createElement("div", { className: "back back-right" }, /*#__PURE__*/
      React.createElement("div", { className: "container-events" }, this.getEvents(), " ")))));




  }}


class Calendar extends React.Component {
  constructor(props) {
    super(props);_defineProperty(this, "handleToUpdate",









    isToggle => {
      this.setState({ toggle: isToggle });
    });_defineProperty(this, "handleToUpdateSubmit",
    (time, event) => {
      this.setState(prevState => {
        const list = [...prevState.eventList, [this.state.selectedDate, time, event]];
        return {
          eventList: list };

      });
    });_defineProperty(this, "handleToUpdateDate",
    date => {
      this.setState({
        selectedDate: date });

    });_defineProperty(this, "tick",








    () => {
      this.setState({
        date: new Date() });

    });let _date = new Date();this.state = { date: _date, toggle: true, eventList: [], selectedDate: _date.getDate() + "/" + _date.getMonth() + "/" + _date.getFullYear() };}componentDidMount() {this.timerID = setInterval(this.tick, 1000); //refresh each second
  }componentWillUnmount() {clearInterval(this.timerID);}
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "wrapper" }, /*#__PURE__*/
      React.createElement(LeftBlock, { date: this.state.date, handleToUpdate: this.handleToUpdate, handleToUpdateSubmit: this.handleToUpdateSubmit }), /*#__PURE__*/
      React.createElement(RightBlock, { date: this.state.date, toggle: this.state.toggle, handleToUpdateDate: this.handleToUpdateDate, eventList: this.state.eventList })));


  }}

ReactDOM.render( /*#__PURE__*/React.createElement(Calendar, null), document.getElementById("root"));
//# sourceURL=pen.js
    </script>
</body>
</html>

2. React Calendar with Events

Made by Costas Yiannatsos. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
  
<style>
@import url("https://fonts.googleapis.com/css?family=Dosis");
body {
  font-size: 16px;
}

.calendar-rectangle {
  width: 100%;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  color: #616161;
  font-size: 1em;
  font-family: "Dosis", sans-serif;
  overflow: hidden;
  box-shadow: 0px 0px 50px #888888;
}
@media (min-width: 576px) {
  .calendar-rectangle {
    width: 70%;
  }
}
@media (min-width: 768px) {
  .calendar-rectangle {
    width: 50%;
    font-size: 1em;
  }
}
@media (min-width: 992px) {
  .calendar-rectangle {
    width: 40%;
    font-size: 1em;
  }
}
@media (min-width: 1200px) {
  .calendar-rectangle {
    width: 30%;
    font-size: 1em;
  }
}
@media (min-width: 1300px) {
  .calendar-rectangle {
    width: 20%;
  }
}
.calendar-rectangle:before {
  content: "";
  display: block;
  padding-top: 120%;
}

.calendar-content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.main-calendar {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}
.main-calendar .calendar-header {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 30%;
  color: #ffffff;
}
.main-calendar .calendar-header .title-header {
  width: 100%;
  height: 70%;
  white-space: nowrap;
  font-size: 1.2em;
  background-color: #1e88e5;
}
@media (min-width: 992px) {
  .main-calendar .calendar-header .title-header {
    font-size: 1.4em;
  }
}
@media (min-width: 1200px) {
  .main-calendar .calendar-header .title-header {
    font-size: 1.2em;
  }
}
.main-calendar .calendar-header .title-header .header-text {
  flex: 5;
  display: flex;
  height: 100%;
}
.main-calendar .calendar-header .title-header .header-text .today-label {
  flex: 1;
  font-size: 0.8em;
}
.main-calendar .calendar-header .title-header .header-text .today-label:hover {
  cursor: pointer;
  color: #1e88e5;
  background-color: #ffffff;
}
.main-calendar .calendar-header .title-header .header-text .month-label {
  flex: 3;
}
.main-calendar .calendar-header .days-header {
  width: 100%;
  height: 30%;
  background-color: #2196f3;
}
.main-calendar .calendar-header .button-container {
  width: 100%;
  height: 30%;
  background-color: #2196f3;
}
.main-calendar .calendar-header .button-container .event-button {
  flex-grow: 1;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.main-calendar .calendar-header .button-container .event-button:hover {
  background-color: #fff;
  color: #2196f3;
}
.main-calendar .days-container {
  width: 100%;
  height: 70%;
  background: #ffffff;
}
.main-calendar .days-container .week {
  height: 15%;
}
.main-calendar .day-events {
  position: relative;
  width: 100%;
  height: 70%;
  background-color: #ffffff;
  font-size: 1.2em;
}
.main-calendar .day-events .event-container {
  width: 100%;
  text-align: center;
  display: flex;
}
.main-calendar .day-events .event-container:hover {
  cursor: pointer;
}
.main-calendar .day-events .event-container .animated-time {
  width: 30%;
}
.main-calendar .day-events .event-container .animated-title {
  width: 70%;
}
.main-calendar .day-events .event-container .event-attribute {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box;
  padding: 5px;
}

.row {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  height: 100%;
  transition: all 0.4s ease-in-out 0s;
}
.box.arrow:hover {
  background-color: white;
  cursor: pointer;
  color: #1e88e5;
  transition: all 0.2s ease-in-out 0s;
}

.day {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  height: 100%;
}
.day .day-number {
  width: 80%;
  height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ffffff;
  box-sizing: border-box;
  border-radius: 50%;
}
.day:hover .day-number {
  cursor: default;
  background-color: #90caf9;
  color: #ffffff;
  transition: background-color 0.2s ease-in-out 0s;
}
.day.today .day-number {
  border: 1px solid #90caf9;
}
.day.has-events .day-number {
  color: #1e88e5;
  font-weight: bold;
}
.day.different-month {
  opacity: 0.5;
}

/* time animation */
.time-appear {
  transform: translateX(-100%);
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}

.time-appear.time-appear-active {
  transform: translateX(0);
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}

.time-enter {
  transform: translateX(-100%);
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}

.time-enter.time-enter-active {
  transform: translateX(0);
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}

.time-leave {
  transform: translateX(-100%);
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}

.time-leave.time-leave-active {
  transform: translateX(0);
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}

/* title animation */
.title-appear {
  transform: translateX(100%);
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}

.title-appear.title-appear-active {
  transform: translateX(0);
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}

.title-enter {
  transform: translateX(100%);
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}

.title-enter.title-enter-active {
  transform: translateX(0);
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}

.title-leave {
  transform: translateX(100%);
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}

.title-leave.title-leave-active {
  transform: translateX(0);
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}
</style>
</head>
<body>
  <div class="calendar-rectangle">
  <div id="calendar-content" class="calendar-content"></div>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-with-addons.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script>
<script src='https://momentjs.com/downloads/moment.min.js'></script>
      <script>
const ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

class Calendar extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedMonth: moment(),
      selectedDay: moment().startOf("day"),
      selectedMonthEvents: [],
      showEvents: false };


    this.previous = this.previous.bind(this);
    this.next = this.next.bind(this);
    this.addEvent = this.addEvent.bind(this);
    this.showCalendar = this.showCalendar.bind(this);
    this.goToCurrentMonthView = this.goToCurrentMonthView.bind(this);

    this.initialiseEvents();
  }

  previous() {
    const currentMonthView = this.state.selectedMonth;

    this.setState({
      selectedMonth: currentMonthView.subtract(1, "month") });

  }

  next() {
    const currentMonthView = this.state.selectedMonth;
    this.setState({
      selectedMonth: currentMonthView.add(1, "month") });

  }

  select(day) {
    this.setState({
      selectedMonth: day.date,
      selectedDay: day.date.clone(),
      showEvents: true });

  }

  goToCurrentMonthView() {
    const currentMonthView = this.state.selectedMonth;
    this.setState({
      selectedMonth: moment() });

  }

  showCalendar() {
    this.setState({
      selectedMonth: this.state.selectedMonth,
      selectedDay: this.state.selectedDay,
      showEvents: false });

  }

  renderMonthLabel() {
    const currentMonthView = this.state.selectedMonth;
    return /*#__PURE__*/(
      React.createElement("span", { className: "box month-label" },
      currentMonthView.format("MMMM YYYY")));


  }

  renderDayLabel() {
    const currentSelectedDay = this.state.selectedDay;
    return /*#__PURE__*/(
      React.createElement("span", { className: "box month-label" },
      currentSelectedDay.format("DD MMMM YYYY")));


  }

  renderTodayLabel() {
    const currentSelectedDay = this.state.selectedDay;
    return /*#__PURE__*/(
      React.createElement("span", { className: "box today-label", onClick: this.goToCurrentMonthView }, "Today"));



  }

  renderWeeks() {
    const currentMonthView = this.state.selectedMonth;
    const currentSelectedDay = this.state.selectedDay;
    const monthEvents = this.state.selectedMonthEvents;

    let weeks = [];
    let done = false;
    let previousCurrentNextView = currentMonthView.
    clone().
    startOf("month").
    subtract(1, "d").
    day("Monday");
    let count = 0;
    let monthIndex = previousCurrentNextView.month();

    while (!done) {if (window.CP.shouldStopExecution(0)) break;
      weeks.push( /*#__PURE__*/
      React.createElement(Week, {
        previousCurrentNextView: previousCurrentNextView.clone(),
        currentMonthView: currentMonthView,
        monthEvents: monthEvents,
        selected: currentSelectedDay,
        select: day => this.select(day) }));


      previousCurrentNextView.add(1, "w");
      done = count++ > 2 && monthIndex !== previousCurrentNextView.month();
      monthIndex = previousCurrentNextView.month();
    }window.CP.exitedLoop(0);
    return weeks;
  }

  handleAdd() {
    const monthEvents = this.state.selectedMonthEvents;
    const currentSelectedDate = this.state.selectedDay;

    let newEvents = [];

    var eventTitle = prompt("Please enter a name for your event: ");

    switch (eventTitle) {
      case "":
        alert("Event name cannot be empty.");
        break;
      case null:
        alert("Changed your mind? You can add one later!");
        break;
      default:
        var newEvent = {
          title: eventTitle,
          date: currentSelectedDate,
          dynamic: true };


        newEvents.push(newEvent);

        for (var i = 0; i < newEvents.length; i++) {if (window.CP.shouldStopExecution(1)) break;
          monthEvents.push(newEvents[i]);
        }window.CP.exitedLoop(1);

        this.setState({
          selectedMonthEvents: monthEvents });

        break;}

  }

  addEvent() {
    const currentSelectedDate = this.state.selectedDay;
    let isAfterDay = moment().startOf("day").subtract(1, "d");

    if (currentSelectedDate.isAfter(isAfterDay)) {
      this.handleAdd();
    } else {
      if (confirm("Are you sure you want to add an event in the past?")) {
        this.handleAdd();
      } else {
      } // end confirm past
    } //end is in the past
  }

  removeEvent(i) {
    const monthEvents = this.state.selectedMonthEvents.slice();
    const currentSelectedDate = this.state.selectedDay;

    if (confirm("Are you sure you want to remove this event?")) {
      let index = i;

      if (index != -1) {
        monthEvents.splice(index, 1);
      } else {
        alert("No events to remove on this day!");
      }

      this.setState({
        selectedMonthEvents: monthEvents });

    }
  }

  initialiseEvents() {
    const monthEvents = this.state.selectedMonthEvents;

    let allEvents = [];

    var event1 = {
      title:
      "Press the Add button and enter a name for your event. P.S you can delete me by pressing me!",
      date: moment(),
      dynamic: false };


    var event2 = {
      title: "Event 2 - Meeting",
      date: moment().startOf("day").subtract(2, "d").add(2, "h"),
      dynamic: false };


    var event3 = {
      title: "Event 3 - Cinema",
      date: moment().startOf("day").subtract(7, "d").add(18, "h"),
      dynamic: false };


    var event4 = {
      title: "Event 4 - Theater",
      date: moment().startOf("day").subtract(16, "d").add(20, "h"),
      dynamic: false };


    var event5 = {
      title: "Event 5 - Drinks",
      date: moment().startOf("day").subtract(2, "d").add(12, "h"),
      dynamic: false };


    var event6 = {
      title: "Event 6 - Diving",
      date: moment().startOf("day").subtract(2, "d").add(13, "h"),
      dynamic: false };


    var event7 = {
      title: "Event 7 - Tennis",
      date: moment().startOf("day").subtract(2, "d").add(14, "h"),
      dynamic: false };


    var event8 = {
      title: "Event 8 - Swimmming",
      date: moment().startOf("day").subtract(2, "d").add(17, "h"),
      dynamic: false };


    var event9 = {
      title: "Event 9 - Chilling",
      date: moment().startOf("day").subtract(2, "d").add(16, "h"),
      dynamic: false };


    var event10 = {
      title:
      "Hello World",
      date: moment().startOf("day").add(5, "h"),
      dynamic: false };


    allEvents.push(event1);
    allEvents.push(event2);
    allEvents.push(event3);
    allEvents.push(event4);
    allEvents.push(event5);
    allEvents.push(event6);
    allEvents.push(event7);
    allEvents.push(event8);
    allEvents.push(event9);
    allEvents.push(event10);

    for (var i = 0; i < allEvents.length; i++) {if (window.CP.shouldStopExecution(2)) break;
      monthEvents.push(allEvents[i]);
    }window.CP.exitedLoop(2);

    this.setState({
      selectedMonthEvents: monthEvents });

  }

  render() {
    const currentMonthView = this.state.selectedMonth;
    const currentSelectedDay = this.state.selectedDay;
    const showEvents = this.state.showEvents;

    if (showEvents) {
      return /*#__PURE__*/(
        React.createElement("section", { className: "main-calendar" }, /*#__PURE__*/
        React.createElement("header", { className: "calendar-header" }, /*#__PURE__*/
        React.createElement("div", { className: "row title-header" },
        this.renderDayLabel()), /*#__PURE__*/

        React.createElement("div", { className: "row button-container" }, /*#__PURE__*/
        React.createElement("i", {
          className: "box arrow fa fa-angle-left",
          onClick: this.showCalendar }), /*#__PURE__*/

        React.createElement("i", {
          className: "box event-button fa fa-plus-square",
          onClick: this.addEvent }))), /*#__PURE__*/



        React.createElement(Events, {
          selectedMonth: this.state.selectedMonth,
          selectedDay: this.state.selectedDay,
          selectedMonthEvents: this.state.selectedMonthEvents,
          removeEvent: i => this.removeEvent(i) })));



    } else {
      return /*#__PURE__*/(
        React.createElement("section", { className: "main-calendar" }, /*#__PURE__*/
        React.createElement("header", { className: "calendar-header" }, /*#__PURE__*/
        React.createElement("div", { className: "row title-header" }, /*#__PURE__*/
        React.createElement("i", {
          className: "box arrow fa fa-angle-left",
          onClick: this.previous }), /*#__PURE__*/

        React.createElement("div", { className: "box header-text" },
        this.renderTodayLabel(),
        this.renderMonthLabel()), /*#__PURE__*/

        React.createElement("i", { className: "box arrow fa fa-angle-right", onClick: this.next })), /*#__PURE__*/

        React.createElement(DayNames, null)), /*#__PURE__*/

        React.createElement("div", { className: "days-container" },
        this.renderWeeks())));



    }
  }}


class Events extends React.Component {
  render() {
    const currentMonthView = this.props.selectedMonth;
    const currentSelectedDay = this.props.selectedDay;
    const monthEvents = this.props.selectedMonthEvents;
    const removeEvent = this.props.removeEvent;

    const monthEventsRendered = monthEvents.map((event, i) => {
      return /*#__PURE__*/(
        React.createElement("div", {
          key: event.title,
          className: "event-container",
          onClick: () => removeEvent(i) }, /*#__PURE__*/

        React.createElement(ReactCSSTransitionGroup, {
          component: "div",
          className: "animated-time",
          transitionName: "time",
          transitionAppear: true,
          transitionAppearTimeout: 500,
          transitionEnterTimeout: 500,
          transitionLeaveTimeout: 500 }, /*#__PURE__*/

        React.createElement("div", { className: "event-time event-attribute" },
        event.date.format("HH:mm"))), /*#__PURE__*/


        React.createElement(ReactCSSTransitionGroup, {
          component: "div",
          className: "animated-title",
          transitionName: "title",
          transitionAppear: true,
          transitionAppearTimeout: 500,
          transitionEnterTimeout: 500,
          transitionLeaveTimeout: 500 }, /*#__PURE__*/

        React.createElement("div", { className: "event-title event-attribute" }, event.title))));



    });

    const dayEventsRendered = [];

    for (var i = 0; i < monthEventsRendered.length; i++) {if (window.CP.shouldStopExecution(3)) break;
      if (monthEvents[i].date.isSame(currentSelectedDay, "day")) {
        dayEventsRendered.push(monthEventsRendered[i]);
      }
    }window.CP.exitedLoop(3);

    return /*#__PURE__*/(
      React.createElement("div", { className: "day-events" },
      dayEventsRendered));


  }}


class DayNames extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "row days-header" }, /*#__PURE__*/
      React.createElement("span", { className: "box day-name" }, "Mon"), /*#__PURE__*/
      React.createElement("span", { className: "box day-name" }, "Tue"), /*#__PURE__*/
      React.createElement("span", { className: "box day-name" }, "Wed"), /*#__PURE__*/
      React.createElement("span", { className: "box day-name" }, "Thu"), /*#__PURE__*/
      React.createElement("span", { className: "box day-name" }, "Fri"), /*#__PURE__*/
      React.createElement("span", { className: "box day-name" }, "Sat"), /*#__PURE__*/
      React.createElement("span", { className: "box day-name" }, "Sun")));


  }}


class Week extends React.Component {
  render() {
    let days = [];
    let date = this.props.previousCurrentNextView;
    let currentMonthView = this.props.currentMonthView;
    let selected = this.props.selected;
    let select = this.props.select;
    let monthEvents = this.props.monthEvents;

    for (var i = 0; i < 7; i++) {if (window.CP.shouldStopExecution(4)) break;
      var dayHasEvents = false;

      for (var j = 0; j < monthEvents.length; j++) {if (window.CP.shouldStopExecution(5)) break;
        if (monthEvents[j].date.isSame(date, "day")) {
          dayHasEvents = true;
        }
      }window.CP.exitedLoop(5);

      let day = {
        name: date.format("dd").substring(0, 1),
        number: date.date(),
        isCurrentMonth: date.month() === currentMonthView.month(),
        isToday: date.isSame(new Date(), "day"),
        date: date,
        hasEvents: dayHasEvents };


      days.push( /*#__PURE__*/React.createElement(Day, { day: day, selected: selected, select: select }));
      date = date.clone();
      date.add(1, "d");
    }window.CP.exitedLoop(4);
    return /*#__PURE__*/(
      React.createElement("div", { className: "row week" },
      days));


  }}


class Day extends React.Component {
  render() {
    let day = this.props.day;
    let selected = this.props.selected;
    let select = this.props.select;

    return /*#__PURE__*/(
      React.createElement("div", {
        className:
        "day" + (
        day.isToday ? " today" : "") + (
        day.isCurrentMonth ? "" : " different-month") + (
        day.date.isSame(selected) ? " selected" : "") + (
        day.hasEvents ? " has-events" : ""),

        onClick: () => select(day) }, /*#__PURE__*/

      React.createElement("div", { className: "day-number" }, day.number)));


  }}


ReactDOM.render( /*#__PURE__*/React.createElement(Calendar, null), document.getElementById("calendar-content"));
//# sourceURL=pen.js
    </script>
</body>
</html>

3. Simple React Calendar

Made by Nick VanMeter. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'> 
<style>
.vertical-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
html {
  font-size: 62.5%;
}
body {
  background: #EFEFEF;
}
.row {
  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: flex;
  justify-content: 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 {
  align-items: center;
  height: 40px;
  background: #2875C7;
}
.calendar header .month-label {
  flex: 1;
}
.calendar header .arrow {
  text-align: center;
  flex-basis: 15%;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
  height: 100%;
  display: flex;
  justify-content: 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: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  height: 35px;
  border-left: solid 1px #CCCCCC;
  cursor: pointer;
  transition: all 0.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="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.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 id="rendered-js" >
//based on https://www.codementor.io/reactjs/tutorial/building-a-calendar-using-react-js--less-css-and-font-awesome


class Calendar extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      month: moment(),
      selected: moment().startOf('day') };


    this.previous = this.previous.bind(this);
    this.next = this.next.bind(this);
  }

  previous() {
    const {
      month } =
    this.state;

    this.setState({
      month: month.subtract(1, 'month') });

  }

  next() {
    const {
      month } =
    this.state;

    this.setState({
      month: month.add(1, 'month') });

  }

  select(day) {
    this.setState({
      selected: day.date,
      month: day.date.clone() });

  }

  renderWeeks() {
    let weeks = [];
    let done = false;
    let date = this.state.month.clone().startOf("month").add("w" - 1).day("Sunday");
    let count = 0;
    let monthIndex = date.month();

    const {
      selected,
      month } =
    this.state;

    while (!done) {if (window.CP.shouldStopExecution(0)) break;
      weeks.push( /*#__PURE__*/
      React.createElement(Week, { key: date,
        date: date.clone(),
        month: month,
        select: day => this.select(day),
        selected: selected }));


      date.add(1, "w");

      done = count++ > 2 && monthIndex !== date.month();
      monthIndex = date.month();
    }window.CP.exitedLoop(0);

    return weeks;
  }

  renderMonthLabel() {
    const {
      month } =
    this.state;

    return /*#__PURE__*/React.createElement("span", { className: "month-label" }, month.format("MMMM YYYY"));
  }

  render() {
    return /*#__PURE__*/(
      React.createElement("section", { className: "calendar" }, /*#__PURE__*/
      React.createElement("header", { className: "header" }, /*#__PURE__*/
      React.createElement("div", { className: "month-display row" }, /*#__PURE__*/
      React.createElement("i", { className: "arrow fa fa-angle-left", onClick: this.previous }),
      this.renderMonthLabel(), /*#__PURE__*/
      React.createElement("i", { className: "arrow fa fa-angle-right", onClick: this.next })), /*#__PURE__*/

      React.createElement(DayNames, null)),

      this.renderWeeks()));


  }}


class DayNames extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "row day-names" }, /*#__PURE__*/
      React.createElement("span", { className: "day" }, "Sun"), /*#__PURE__*/
      React.createElement("span", { className: "day" }, "Mon"), /*#__PURE__*/
      React.createElement("span", { className: "day" }, "Tue"), /*#__PURE__*/
      React.createElement("span", { className: "day" }, "Wed"), /*#__PURE__*/
      React.createElement("span", { className: "day" }, "Thu"), /*#__PURE__*/
      React.createElement("span", { className: "day" }, "Fri"), /*#__PURE__*/
      React.createElement("span", { className: "day" }, "Sat")));


  }}


class Week extends React.Component {
  render() {
    let days = [];
    let {
      date } =
    this.props;

    const {
      month,
      selected,
      select } =
    this.props;

    for (var i = 0; i < 7; i++) {if (window.CP.shouldStopExecution(1)) break;
      let 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( /*#__PURE__*/
      React.createElement(Day, { day: day,
        selected: selected,
        select: select }));


      date = date.clone();
      date.add(1, "day");
    }window.CP.exitedLoop(1);

    return /*#__PURE__*/(
      React.createElement("div", { className: "row week", key: days[0] },
      days));


  }}



class Day extends React.Component {
  render() {
    const {
      day,
      day: {
        date,
        isCurrentMonth,
        isToday,
        number },

      select,
      selected } =
    this.props;

    return /*#__PURE__*/(
      React.createElement("span", {
        key: date.toString(),
        className: "day" + (isToday ? " today" : "") + (isCurrentMonth ? "" : " different-month") + (date.isSame(selected) ? " selected" : ""),
        onClick: () => select(day) }, number));

  }}


ReactDOM.render( /*#__PURE__*/React.createElement(Calendar, null), document.getElementById('app'));
//# sourceURL=pen.js
    </script>
</body>
</html>

4. React calendar using Moment and Moment-Range

Made by David. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
  font-family: sans-serif;
  font-size: 16px;
}
.calendar {
  max-width: 800px;
}
.calendar--table {
  table-layout: fixed;
  width: 100%;
}
.calendar--week-days th {
  padding: 8px 12px;
  font-weight: normal;
}
.calendar--month-label {
  text-align: center;
  padding: 12px;
  font-size: 14px;
  text-transform: uppercase;
}
.calendar--day {
  padding: 12px;
  font-weight: bold;
  text-align: center;
}
.calendar--week-days th,
.calendar--day__inside {
  background: #f2f2f2;
}
.calendar--day__outside-calendar {
  color: #f2f2f2;
}
.calendar--day__outside-month {
  background: #fff;
  color: #fff;
}
</style>
</head>
<body>
  <!--
  Build a dynamic calendar of months 
  based on a start and end date. 
-->
<div data-calendar id="calendar"></div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment-range/3.0.3/moment-range.js'></script>
      <script id="rendered-js" >
// Setup moment range
window['moment-range'].extendMoment(moment);

// Our date range
const startDate = "2017-02-16";
const endDate = "2018-02-15";
const showYears = startDate.split("-")[0] !== endDate.split("-")[0];

class Calendar extends React.Component {
  render() {
    const startMoment = moment(startDate).hour(0).minutes(0).seconds(0);
    const endMoment = moment(endDate).hour(0).minutes(0).seconds(0);

    // Set up ranges
    const calendarRange = moment.range(startMoment, endMoment);
    const allDays = Array.from(calendarRange.by('day'));

    const months = [];
    for (let month = startMoment.clone().date(15); !month.isAfter(endMoment.clone().day(16)); month.add(1, "month")) {if (window.CP.shouldStopExecution(0)) break;
      months.push(month.clone());
    }window.CP.exitedLoop(0);

    if (months.length) {
      return /*#__PURE__*/(
        React.createElement("div", null,
        months.map((month, monthCounter) => {

          let firstMonthDay = month.clone().startOf("month").hour(0).minutes(0).seconds(0).milliseconds(0);
          let lastMonthDay = month.clone().endOf("month").hour(0).minutes(0).seconds(0).milliseconds(0);
          let firstOverflowDay = firstMonthDay.clone().startOf("week");
          let lastOverflowDay = lastMonthDay.clone().endOf("week");

          let monthRange = moment.range(firstMonthDay, lastMonthDay);

          let weeks = [];
          var week = [];
          for (var currentDay = firstOverflowDay.clone(); !currentDay.isAfter(lastOverflowDay); currentDay.add(1, "day")) {if (window.CP.shouldStopExecution(2)) break;if (window.CP.shouldStopExecution(1)) break;
            week.push(currentDay.clone());
            if (week.length && currentDay.day() === 6) {
              weeks.push(week);
              week = [];
            }
          }window.CP.exitedLoop(2);window.CP.exitedLoop(1);

          return /*#__PURE__*/(
            React.createElement(CalendarMonth, { month: month,
              weeks: weeks,
              monthCounter: monthCounter,
              monthRange: monthRange,
              calendarRange: calendarRange }));


        })));


    } else {
      return /*#__PURE__*/(
        React.createElement("div", null, "No dates available"));

    }
  }}


class CalendarMonth extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "calendar" }, /*#__PURE__*/
      React.createElement("table", { className: "calendar--table" },
      this.props.monthCounter === 0 ? /*#__PURE__*/
      React.createElement("tr", { className: "calendar--week-days" },
      ["S", "M", "T", "W", "T", "F", "S"].map((date, i) => /*#__PURE__*/
      React.createElement("th", { key: "datepicker_cell_" + date + i, className: "day datepicker--cell" }, date))) :


      false, /*#__PURE__*/

      React.createElement("tr", null, /*#__PURE__*/
      React.createElement("td", { colSpan: "7", className: "calendar--month-label" },
      this.props.month.format(showYears ? "MMMM YYYY" : "MMMM"))),


      this.props.weeks.map(week => {

        let firstDay = week[0];
        let lastDay = week[6];
        let weekRange = moment.range(firstDay, lastDay);
        // Ignore weeks that shouldn't appear in the calendar range 
        if (!this.props.calendarRange.contains(firstDay) && !this.props.calendarRange.contains(lastDay)) {
          return false;
        }

        return /*#__PURE__*/(
          React.createElement(CalendarWeek, { week: week,
            monthRange: this.props.monthRange,
            calendarRange: this.props.calendarRange,
            weekRange: weekRange }));


      }))));



  }}


class CalendarWeek extends React.Component {
  render() {
    let week = this.props.week;
    let weekArray = Array.from(this.props.weekRange.by("day"));
    return /*#__PURE__*/(
      React.createElement("tr", null,
      weekArray.map(day => {
        let date = day.format("DD-MM-YYYY");
        let isAvailable = this.props.monthRange.contains(day) && this.props.calendarRange.contains(day);
        let dayProps = {
          key: day.format("DD-MMMM-YYYY"),
          className: "calendar--day" };

        if (this.props.calendarRange.contains(day)) {
          dayProps["className"] += " calendar--day__inside";
        } else {
          dayProps["className"] += " calendar--day__outside-calendar";
        }
        if (!this.props.monthRange.contains(day)) {
          dayProps["className"] += " calendar--day__outside-month";
        }
        return /*#__PURE__*/(
          React.createElement("td", dayProps,
          this.props.monthRange.contains(day) ? /*#__PURE__*/
          React.createElement("span", null, day.format("DD")) :
          false));



      })));


  }}


ReactDOM.render( /*#__PURE__*/
React.createElement(Calendar, null),
document.getElementById('calendar'));
//# sourceURL=pen.js
    </script>
</body>
</html>

5. Modern Style React Calendar

Made by Ya-Yun Tsai. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Roboto+Condensed" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton|Fjalla+One|Roboto+Condensed" rel="stylesheet">
<style>
html {
  background-color: #4472C4;
}

#root {
  font-family: "Fjalla One", sans-serif;
}

#calendar {
  background-color: #ed7057;
  width: 200px;
  height: 300px;
  padding: 20px;
  margin: 0 auto;
  margin-top: 50px;
  box-shadow: 8px 8px 0.01px #444444;
  border-radius: 3px;
  border-top: 25px solid #355999;
  color: white;
}

#day {
  width: 100px;
  padding: 10px 25%;
  color: #525151;
  text-align: center;
  color: white;
}

#weekday {
  margin: -25px 25% 30px 25%;
  color: white;
  text-align: center;
}

#date {
  width: 150px;
  height: 120px;
  font-size: 80px;
  background-color: #F4F6F5;
  box-shadow: 2px 2px 5px #444444;
  color: #525151;
  border-radius: 5px;
  margin: 0 auto;
  text-align: center;
  padding-top: 30px;
}

#time_now {
  color: #525151;
  border-radius: 5px;
  font-size: 20px;
  padding: 10px;
  margin-top: -30px;
  text-align: center;
}

h1 {
  font-size: 50px;
  font-weight: 700;
  color: white;
  text-align: center;
}
</style>
</head>
<body>
  <div id="root"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script>
      <script>
function tick() {
  var week = new Array("Sunday", "Monday", "Tuesday", "Wednesday",
  "Thursday", "Friday", "Saturday");
  const element = /*#__PURE__*/
  React.createElement("div", null, /*#__PURE__*/
  React.createElement("h1", null, "Cherish EVERY MOMENT!"), /*#__PURE__*/
  React.createElement("div", { id: "calendar" }, /*#__PURE__*/
  React.createElement("h3", { id: "date" }, new Date().getDate()), /*#__PURE__*/
  React.createElement("h2", { id: "day" }, new Date().getFullYear(), " / ", new Date().getMonth() + 1), /*#__PURE__*/
  React.createElement("h2", { id: "weekday" }, week[new Date().getDay()]), /*#__PURE__*/
  React.createElement("h2", { id: "time_now" }, new Date().toLocaleTimeString().split("上午"))));






  ReactDOM.render(
  element,
  document.getElementById('root'));

}
setInterval(tick, 1000);
    </script>
</body>
</html>

6. Example React Calendar App

Made by Ruben Martinez. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://unpkg.com/recal/lib/index.css'>
<style>
html, body, #root, #App {
  width: 100vw;
  height: 100vh;
}

#App {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
</head>
<body>
  <div id="root"></div>
  <script src='https://unpkg.com/[email protected]/umd/react.development.js'></script>
<script src='https://unpkg.com/[email protected]/umd/react-dom.development.js'></script>
<script src='https://unpkg.com/recal'></script>
      <script>
function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}const { DatePicker } = recal;

const today = new Date();
today.setHours(0);
today.setMinutes(0);
today.setSeconds(0);
today.setMilliseconds(0);

class App extends React.Component {constructor(...args) {super(...args);_defineProperty(this, "state",




    {
      date: null });_defineProperty(this, "onDateSelected",


    date => {
      this.setState({ date });
    });_defineProperty(this, "onDateHovered",
    hovered => {
      this.setState({ hovered });
    });_defineProperty(this, "isDateEnabled",

    date => {
      // Enable all days >= today.
      return date >= today;
    });_defineProperty(this, "isDateHighlighted",
    date => {
      // Highlight Sundays.
      return date.getDay() == 0;
    });}

  render() {
    return /*#__PURE__*/(
      React.createElement("div", { id: "App" }, /*#__PURE__*/
      React.createElement("h2", null, "✈️\xA0\xA0Find a Flight\xA0\xA0✈️"), /*#__PURE__*/
      React.createElement(DatePicker, {
        date: this.state.date,
        onDateSelected: this.onDateSelected,
        onDateHovered: this.onDateHovered,
        isDateEnabled: this.isDateEnabled,
        isDateHighlighted: this.isDateHighlighted,
        locale: this.props.locale }),
      this.state.hovered ? /*#__PURE__*/
      React.createElement("p", null, "⚑Flights as low as $200 on\xA0",

      this.state.hovered.toDateString().slice(4)) :

      null,
      this.state.date ? /*#__PURE__*/
      React.createElement("p", null, /*#__PURE__*/
      React.createElement("b", null, "😈 Just kidding, there are no flights on\xA0",

      this.state.date.toDateString().slice(4), "!")) :


      null));


  }}_defineProperty(App, "defaultProps", { // locale: 'es-MX'
  locale: 'en-US' });

ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById('root'));
//# sourceURL=pen.js
    </script>
</body>
</html>

7. React Google calendar

Made by charlie hield. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto);
body {
  font-family: "Roboto", sans-serif;
}

.calendar {
  color: #fff;
  width: 140px;
  height: 150px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -60%, 0);
  text-rendering: optimizeLegibility;
}
.calendar:before {
  content: "";
  width: 96%;
  left: 2%;
  height: 40px;
  background: #D7D7D7;
  display: block;
  position: absolute;
  top: -10px;
  border-radius: 12px;
}

.top,
.bottom {
  height: 50%;
  text-align: center;
  font-size: 100px;
  line-height: 155px;
  overflow: hidden;
}

.top {
  background: linear-gradient(#5179D1, #5680D8);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  transform: perspective(200px) rotateX(-30deg);
  position: relative;
  top: 14px;
  color: #CECED9;
}

.bottom {
  background: linear-gradient(#6996EC, #6695F0);
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  transform: perspective(150px) rotateX(20deg);
  line-height: 5px;
  color: #F0EEEF;
  border-bottom: 1px solid #5379BB;
}

.dots:before, .dots:after {
  content: "";
  width: 12px;
  height: 12px;
  background: #F3F3F3;
  border-radius: 50%;
  position: absolute;
  display: block;
  top: -3px;
}
.dots:before {
  left: 25%;
}
.dots:after {
  right: 25%;
}

button {
  width: 38%;
  margin-top: 15px;
  padding: 8px 0 10px 0;
  font-size: 18px;
  cursor: pointer;
  margin-left: 8%;
  outline: none;
  border: none;
  background: #D7D7D7;
  border-radius: 5px;
  color: #5179D1;
  font-weight: bold;
}
</style>
</head>
<body>
  <div id="app"></div>
  <script src='https://fb.me/react-0.14.2.js'></script>
<script src='https://fb.me/react-dom-0.14.2.js'></script>
      <script>
var Calendar = React.createClass({ displayName: "Calendar",
  getInitialState: function () {
    return {
      day: new Date().getDate() };

  },
  handleAdd: function (event) {
    this.setState({ day: this.state.day + 1 });
  },
  handleSubtract: function (event) {
    this.setState({ day: this.state.day - 1 });
  },
  render: function () {
    return /*#__PURE__*/(
      React.createElement("div", { className: "calendar" }, /*#__PURE__*/
      React.createElement("span", { className: "dots" }), /*#__PURE__*/
      React.createElement("div", { className: "top" },
      this.state.day), /*#__PURE__*/

      React.createElement("span", { className: "divider" }), /*#__PURE__*/
      React.createElement("div", { className: "bottom" },
      this.state.day), /*#__PURE__*/

      React.createElement("button", { onClick: this.handleSubtract }, "-"), /*#__PURE__*/
      React.createElement("button", { onClick: this.handleAdd }, "+")));


  } });


ReactDOM.render( /*#__PURE__*/React.createElement(Calendar, null), document.getElementById('app'));
//# sourceURL=pen.js
    </script>
</body>
</html>

8. Basic react Calendar

Made by Chandan kumar Shanbhag. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat|Roboto&display=swap'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css'>
  
<style>
body {
  margin: 5vh;
}

.calendar-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.calendar-table tr,
.calendar-table td {
  border: 1px solid rgba(200, 200, 200, 0.5);
  padding: 10px;
  font-weight: 600;
  padding: 0px;
}

.calendar-month-prev {
  background-color: rgba(200, 200, 200, 0.3);
}

.calendar-month-next {
  background-color: rgba(200, 200, 200, 0.3);
}

.calendar-days-tr {
  background: #7474BF;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #348AC7, #7474BF);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #348AC7, #7474BF);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: #fff;
  height: 7vh;
}

.calendar-day {
  height: 10vh;
}
.calendar-day div {
  display: block;
}
.calendar-day .day {
  padding-top: 0.5em;
}
.calendar-day .event-round {
  border-radius: 50%;
  background: #4285f4;
  width: 50px;
  height: 50px;
  line-height: 50px;
  color: #fff;
}

.calendar-toolbar table {
  width: 100%;
}
.calendar-toolbar .btn {
  background-color: #212121;
  color: #fff;
  border-radius: 1%;
  margin: 0px;
  height: 5vh;
}
.calendar-toolbar input {
  height: 4.9vh;
  width: 38%;
  border-top-left-radius: 10px;
  box-shadow: none;
  padding: 7px 12px;
  font-size: 13px;
  line-height: 1.5384616;
  color: #333;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ddd;
  border-radius: 3px;
  transition: border-color ease-in-out 0.3s, box-shadow ease-in-out 0.3s;
}
.calendar-toolbar input[type=date]::-webkit-clear-button {
  display: none;
}
.calendar-toolbar .today {
  font-size: 12px;
}

.calendar-selected-date {
  background: #56CCF2 !important;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #508fe2, #6ccdee) !important;
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #4d92ec, #66c6e6) !important;
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: #fff;
}

.calendar-holiday-prev, .calendar-holiday-next {
  background-color: rgba(200, 200, 200, 0.3);
}

.calendar-holiday-current {
  background: #fc8b52;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #fc4d50, #ff9966);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #fd5053, #ff9966);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: #fff;
}
</style>
</head>
<body>
  <div id="app"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>
      <script id="rendered-js" >
const Days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
const Months = [
{
  name: "January",
  short: "Jan",
  number: "01",
  days: 31 },

{
  name: "February",
  short: "Feb",
  number: "02",
  days: 28 },

{
  name: "March",
  short: "Mar",
  number: "03",
  days: 31 },

{
  name: "April",
  short: "Apr",
  number: "04",
  days: 30 },

{
  name: "May",
  short: "May",
  number: "05",
  days: 31 },

{
  name: "June",
  short: "Jun",
  number: "06",
  days: 30 },

{
  name: "July",
  short: "Jul",
  number: "07",
  days: 31 },

{
  name: "August",
  short: "Aug",
  number: "08",
  days: 31 },

{
  name: "September",
  short: "Sep",
  number: "9",
  days: 30 },

{
  name: "October",
  short: "Oct",
  number: "10",
  days: 31 },

{
  name: "November",
  short: "Nov",
  number: "11",
  days: 30 },

{
  name: "December",
  short: "Dec",
  number: "12",
  days: 31 }];



class Calendar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedDate: this.props.defaultDate ? new Date(this.props.defaultDate) : new Date(),
      currentView: new Date(),
      events: this.props.events ? this.props.events : [] };


    this.eventIndex = {};
    this.updateEventIndex = this.updateEventIndex.bind(this);
    this.renderDays = this.renderDays.bind(this);
  }
  updateEventIndex() {
    this.eventIndex = {};
    this.eventDateIndex = {};
    this.state.events.forEach(x => {
      let splits = x.date.split("-").map(x => parseInt(x));
      console.log(splits);
      this.eventIndex["E" + splits[0]] = this.eventIndex["E" + splits[0]] ? this.eventIndex["E" + splits[0]] : {};
      this.eventIndex["E" + splits[0]]["E" + splits[1]] = this.eventIndex["E" + splits[0]]["E" + splits[1]] ? this.eventIndex["E" + splits[0]]["E" + splits[1]] : [];
      this.eventIndex["E" + splits[0]]["E" + splits[1]].push(x);

      this.eventDateIndex["E" + splits[0]] = this.eventDateIndex["E" + splits[0]] ? this.eventDateIndex["E" + splits[0]] : {};
      this.eventDateIndex["E" + splits[0]]["E" + splits[1]] = this.eventDateIndex["E" + splits[0]]["E" + splits[1]] ? this.eventDateIndex["E" + splits[0]]["E" + splits[1]] : [];
      this.eventDateIndex["E" + splits[0]]["E" + splits[1]].push(x.date);
    });
    console.log("eventIndex", this.eventIndex);
  }
  componentWillMount() {
    this.updateEventIndex();
  }
  renderDays() {
    let currentMonth = parseInt(this.state.currentView.getMonth());
    let currentMonthInfo = Months[currentMonth];
    let prevMonthInfo = Months[currentMonth - 1 < 0 ? Months.length - 1 : currentMonth - 1];
    let nextMonthInfo = Months[currentMonth + 1 > Months.length - 1 ? 0 : currentMonth + 1];
    let currentYear = this.state.currentView.getFullYear();
    let prevMonthYear = currentYear;
    let nextMonthYear = currentYear;
    const total = 42;

    if (currentMonthInfo.name == "February") {
      currentMonthInfo.days = (new Date(currentYear + "-" + "Feb-29").getMonth() == 2 ? false : true) | currentMonthInfo.days;
    } else
    if (prevMonthInfo.name == "February") {
      prevMonthInfo.days = (new Date(currentYear + "-" + "Feb-29").getMonth() == 2 ? false : true) | prevMonthInfo.days;
    } else
    if (nextMonthInfo.name == "February") {
      nextMonthInfo.days = (new Date(currentYear + "-" + "Feb-29").getMonth() == 2 ? false : true) | nextMonthInfo.days;
    }

    if (currentMonthInfo.name == "January") {
      prevMonthYear = currentYear - 1;
    }
    if (currentMonthInfo.name == "December") {
      nextMonthYear = currentYear + 1;
    }

    let tempday = new Date(currentYear + "-" + currentMonthInfo.name + "-01").getDay();
    console.log("days", tempday);
    let requiredprev = 7 - (7 - tempday);
    let requirednext = 42 - (requiredprev + currentMonthInfo.days);
    console.log(requiredprev, requirednext);

    let prevdays = requiredprev > 0 ? Array(requiredprev).fill({}).map((x, key) => {
      x = {};
      let day = prevMonthInfo.days - key;
      x.day = day;
      x.monthType = "prev";
      x.year = prevMonthYear;
      let dateString = (day < 10 ? "0" + day : day) + "-" + prevMonthInfo.name + "-" + prevMonthYear;
      x.dateString = dateString;
      let date = new Date(dateString);
      x.date = date;
      x.dayName = Days[date.getDay()];
      return x;
    }) : [];
    prevdays.reverse();
    let nextdays = requirednext > 0 ? Array(requirednext).fill({}).map((x, key) => {
      x = {};
      let day = 1 + key;
      x.day = day;
      x.monthType = "next";
      x.year = nextMonthYear;
      let dateString = (day < 10 ? "0" + day : day) + "-" + nextMonthInfo.name + "-" + nextMonthYear;
      x.dateString = dateString;
      let date = new Date(dateString);
      x.date = date;
      x.dayName = Days[date.getDay()];
      return x;
    }) : [];

    let calendar = [];
    calendar.push(...prevdays);
    let days = Array(currentMonthInfo.days).fill({}).map((x, key) => {
      x = {};
      let day = 1 + key;
      x.day = day;
      x.monthType = "current";
      x.year = currentYear;
      let dateString = (day < 10 ? "0" + day : day) + "-" + currentMonthInfo.name + "-" + currentYear;
      x.dateString = dateString;
      let date = new Date(dateString);
      x.date = date;
      x.dayName = Days[date.getDay()];
      return x;
    });
    console.log(currentMonthInfo.days, days);
    calendar.push(...days);
    calendar.push(...nextdays);
    let result = _.chunk(calendar, 7);
    result = result.filter(x => {
      return x.length == 7;
    });
    let selectedDate = this.state.selectedDate.toLocaleDateString();

    console.log(this.eventIndex);

    return result.map((x, key) => {
      return /*#__PURE__*/React.createElement("tr", { key: key }, x.map((y, key) => {
        let event = false;
        let classList = "calendar-day calendar-month-" + y.monthType;

        if (y.dayName == "Sun") {
          classList += " calendar-holiday-" + y.monthType;
        }
        if (selectedDate == y.date.toLocaleDateString()) {
          classList += " calendar-selected-date";
        }
        if (this.eventDateIndex) {
          let year = y.date.getFullYear();
          if (this.eventDateIndex["E" + year]) {
            let month = y.date.getMonth() + 1;
            if (this.eventDateIndex["E" + year]["E" + month]) {
              if (this.eventDateIndex["E" + year]["E" + month] && this.eventDateIndex["E" + year]["E" + month].includes(y.dateString)) {
                event = true;
              }
            }
          }
        }
        return /*#__PURE__*/React.createElement("td", { key: key, align: "center", className: classList, onClick: () => {
            let sd = new Date(y.dateString);
            console.log(y);
            this.setState({ selectedDate: y.date }, () => {
              if (this.props.onSelectionChange) {
                this.props.onSelectionChange(y.date);
              }
            });
          } }, /*#__PURE__*/
        React.createElement("div", null,
        event ? /*#__PURE__*/React.createElement("div", { className: "day" }, /*#__PURE__*/React.createElement("div", { className: "event-round" }, y.day)) : /*#__PURE__*/React.createElement("div", { className: "day" }, y.day)));


      }));
    });
  }

  render() {
    let date = "";
    let month = "";
    let year = "";
    let selectedDate = "";
    try {
      date = this.state.selectedDate.
      toISOString().
      substr(0, 10).
      split("-").
      reverse().
      join("-");
      month = Months[this.state.currentView.getMonth()].name;
      year = this.state.currentView.getFullYear();
      selectedDate = this.state.selectedDate.toLocaleDateString("en-gb");
      selectedDate = selectedDate.split("/").join("-");
      console.log("selectedDate", selectedDate);
    } catch (e) {console.log(e);}
    return /*#__PURE__*/(
      React.createElement("div", { className: "cks-calendar" }, /*#__PURE__*/
      React.createElement("div", { className: "calendar-toolbar" }, /*#__PURE__*/
      React.createElement("table", null, /*#__PURE__*/
      React.createElement("tr", null, /*#__PURE__*/
      React.createElement("td", { width: "150", align: "left" }, /*#__PURE__*/
      React.createElement("h5", null, month, " ", /*#__PURE__*/React.createElement("small", { style: { fontSize: "5px", verticalAlign: "middle" } }, "⚫"), " ", year)), /*#__PURE__*/

      React.createElement("td", { width: "200", align: "right" }, /*#__PURE__*/
      React.createElement("div", { className: "button-group" }, /*#__PURE__*/
      React.createElement("input", { type: "text", disabled: true, value: selectedDate, style: { width: "25%" } }), /*#__PURE__*/
      React.createElement("button", { className: "btn px-2", onClick: () => {
          this.setState(prev => {
            prev.currentView.setMonth(prev.currentView.getMonth() - 1);
            return prev;
          });
        } }, /*#__PURE__*/React.createElement("i", { className: "fas fa-chevron-left" })), /*#__PURE__*/
      React.createElement("button", { className: "btn today", onClick: () => {
          this.setState({ currentView: new Date(), selectedDate: new Date() });
        } }, "Today"), /*#__PURE__*/
      React.createElement("button", { className: "btn px-2", onClick: () => {
          this.setState(prev => {
            prev.currentView.setMonth(prev.currentView.getMonth() + 1);
            return prev;
          });
        } }, /*#__PURE__*/React.createElement("i", { className: "fas fa-chevron-right" }))))))), /*#__PURE__*/






      React.createElement("table", { className: "calendar-table" }, /*#__PURE__*/
      React.createElement("tr", { className: "calendar-days-tr" },
      Days.map((x, key) => /*#__PURE__*/
      React.createElement("td", { className: "calendar-days-td", key: key, align: "center" }, /*#__PURE__*/
      React.createElement("div", { width: "500" }, x)))),


      this.renderDays()), /*#__PURE__*/

      React.createElement("div", { className: "row mt-3" }, /*#__PURE__*/
      React.createElement("div", { className: "col-sm-3" }, /*#__PURE__*/
      React.createElement("div", { style: { height: "30px", width: "30px", borderRadius: "5px" }, className: "calendar-selected-date" }), /*#__PURE__*/

      React.createElement("h5", { style: { fontSize: "14px", color: "#212121" } }, "Selected Date")), /*#__PURE__*/

      React.createElement("div", { className: "col-sm-3" }, /*#__PURE__*/
      React.createElement("div", { style: { height: "30px", width: "30px", borderRadius: "5px" }, className: "calendar-holiday-current" }), /*#__PURE__*/

      React.createElement("h5", { style: { fontSize: "14px", color: "#212121" } }, "Holiday")), /*#__PURE__*/

      React.createElement("div", { className: "col-sm-3 day" }, /*#__PURE__*/
      React.createElement("div", { style: { height: "35px", width: "35px", borderRadius: "17px", backgroundColor: "#4285f4", lineHeight: "35px", color: "#fff" } }, /*#__PURE__*/React.createElement("center", null, "#")), /*#__PURE__*/
      React.createElement("h5", { style: { fontSize: "14px", color: "#212121" } }, "Event Dot")))));




  }}


/* demo code */

Date.prototype.addDays = function (days) {
  this.setDate(this.getDate() + parseInt(days));
  return this;
};
let eventDate = new Date();
eventDate.addDays(5);
eventDate = eventDate.toISOString().substr(0, 10);
console.log(eventDate);
/*  */

ReactDOM.render( /*#__PURE__*/
React.createElement(Calendar, { events: [{
    date: eventDate,
    eventName: "Test Event",
    eventDesc: "This is event desc." }],

  onSelectionChange: date => {
    console.log(date);
    alert(`Selection Change Event: ${date.toLocaleDateString()}`);
  } }),
document.querySelector("#app"));
//# sourceURL=pen.js
    </script>
</body>
</html>

9. Simple React Calendar

Made by Alessander. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url("https://fonts.googleapis.com/css?family=Lato");
body {
  margin: 0;
  background-color: #777;
}

.calendar {
  color: #ccc;
  float: left;
  font-family: "Lato", sans-serif;
  height: 430px;
  margin-left: 50%;
  margin-top: 25px;
  position: relative;
  transform: translateX(-50%);
  width: 400px;
}

.calendar-header {
  background-color: #555;
  float: left;
  font-size: 18px;
  height: 50px;
  line-height: 2.78;
  position: relative;
  text-align: center;
  width: 100%;
}

.button-container {
  height: 100%;
  position: relative;
}
.button-container--left {
  float: left;
}
.button-container--right {
  float: right;
}

.button-content {
  background-color: transparent;
  border: 0;
  cursor: pointer;
  float: left;
  height: 100%;
  padding-left: 15px;
  position: relative;
  transition: background 0.3s ease;
}
.button-content:hover {
  background-color: #666;
}
.button-content:focus {
  outline: 0;
}
.button-content--left::before {
  border-bottom: 8px solid transparent;
  border-right: 8px solid #888;
  border-top: 8px solid transparent;
  content: "";
  display: inline-block;
  height: 0;
  margin-right: 10px;
  vertical-align: middle;
  width: 0;
}
.button-content--right::before {
  border-bottom: 8px solid transparent;
  border-left: 8px solid #888;
  border-top: 8px solid transparent;
  content: "";
  display: inline-block;
  height: 0;
  margin-right: 10px;
  vertical-align: middle;
  width: 0;
}

.week {
  float: left;
  width: 100%;
}

.weekday {
  background-color: #444;
  float: left;
  height: 40px;
  line-height: 2.5;
  text-align: center;
  width: 14.28%;
}

.day {
  background-color: #444;
  box-sizing: border-box;
  float: left;
  font-weight: 300;
  height: 50px;
  padding: 10px 0;
  position: relative;
  text-align: center;
  transition: background 0.2s ease;
  width: 14.28%;
  z-index: 999;
}
.day--soft {
  color: #565656;
}
</style>
</head>
<body>
  <div id="app"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script>
      <script>
class Calendar extends React.Component {
  constructor() {
    super();
    this.state = {
      days: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
      months: [
      'January', 'February', 'March', 'April', 'May', 'June',
      'July', 'August', 'September', 'October', 'November', 'December'],

      weekDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
      lastMonth: 11,
      month: 0,
      nextMonth: 1,
      year: 0,
      currentMonth: 0,
      currentYear: 0,
      calendar: [
      { id: 'week-1', data: [0, 0, 0, 0, 0, 0, 0] },
      { id: 'week-2', data: [0, 0, 0, 0, 0, 0, 0] },
      { id: 'week-3', data: [0, 0, 0, 0, 0, 0, 0] },
      { id: 'week-4', data: [0, 0, 0, 0, 0, 0, 0] },
      { id: 'week-5', data: [0, 0, 0, 0, 0, 0, 0] },
      { id: 'week-6', data: [0, 0, 0, 0, 0, 0, 0] }],

      holidays: [],
      holiday: '' };


    this.previousCalendar = this.previousCalendar.bind(this);
    this.nextCalendar = this.nextCalendar.bind(this);
  }

  componentWillMount() {
    const now = new Date();
    const currentMonth = now.getMonth();
    const currentYear = now.getFullYear();

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


    this.setCalendar(new Date(currentYear, currentMonth, 1));
  }

  setMonth(date) {
    const month = date.getMonth();
    const lastMonth = month === 0 ? 11 : month - 1;
    const nextMonth = month === 11 ? 0 : month + 1;

    this.setState({
      lastMonth,
      month,
      nextMonth });


    return { lastMonth, month, nextMonth };
  }

  setCalendar(date) {
    const { lastMonth, month, nextMonth } = this.setMonth(date);
    const year = date.getFullYear();
    const weekday = date.getDay();
    const days = this.checkLeapYear(year);
    let nextMonthDay = 0;

    const firstWeek = this.state.calendar[0].data.map((day, index) => {
      let holiday = '';
      if (index < weekday) {
        const value = days[lastMonth] - (weekday - index) + 1;
        return {
          value,
          class: 'day--soft',
          month: lastMonth };

      }
      const value = index - weekday + 1;
      return {
        value: index - weekday + 1,
        class: '',
        month };

    });
    const secondWeek = this.state.calendar[0].data.map((day, index) => {
      const value = firstWeek[6].value + index + 1;
      return {
        value,
        class: '',
        month };

    });
    const thirdWeek = this.state.calendar[0].data.map((day, index) => {
      const value = secondWeek[6].value + index + 1;
      return {
        value,
        class: '',
        month };

    });
    const forthWeek = this.state.calendar[0].data.map((day, index) => {
      const value = thirdWeek[6].value + index + 1;
      return {
        value,
        class: '',
        month };

    });
    const fifthWeek = this.state.calendar[0].data.map((day, index) => {
      if (forthWeek[6].value + index + 1 > days[month]) {
        nextMonthDay += 1;
        return {
          value: nextMonthDay,
          class: 'day--soft',
          month: nextMonth };

      }
      const value = forthWeek[6].value + index + 1;
      return {
        value,
        class: '',
        month };

    });
    const sixthWeek = this.state.calendar[0].data.map((day, index) => {
      if (fifthWeek[6].value + index + 1 > days[month] || fifthWeek[6].value < 10) {
        nextMonthDay += 1;
        return {
          value: nextMonthDay,
          class: 'day--soft',
          month: nextMonth };

      }

      const value = fifthWeek[6].value + index + 1;
      return {
        value,
        class: '',
        month };

    });

    this.setState({
      month,
      year,
      calendar: [
      { id: 'week-1', data: firstWeek },
      { id: 'week-2', data: secondWeek },
      { id: 'week-3', data: thirdWeek },
      { id: 'week-4', data: forthWeek },
      { id: 'week-5', data: fifthWeek },
      { id: 'week-6', data: sixthWeek }] });


  }

  checkLeapYear(year) {
    let days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
      days = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    }
    this.setState({
      days });

    return days;
  }

  previousCalendar() {
    const month = this.state.month !== 0 ? this.state.month - 1 : 11;
    const year = this.state.month !== 0 ? this.state.year : this.state.year - 1;
    this.setCalendar(new Date(year, month, 1));
  }

  nextCalendar() {
    const month = this.state.month !== 11 ? this.state.month + 1 : 0;
    const year = this.state.month !== 11 ? this.state.year : this.state.year + 1;
    this.setCalendar(new Date(year, month, 1));
  }

  render() {
    console.log(this.state.calendar);
    return /*#__PURE__*/(
      React.createElement("div", { className: "calendar" }, /*#__PURE__*/
      React.createElement("div", { className: "calendar-header" }, /*#__PURE__*/
      React.createElement("span", { className: "button-container button-container--left" }, /*#__PURE__*/
      React.createElement("button", { onClick: this.previousCalendar, className: "button-content button-content--left" })), /*#__PURE__*/

      React.createElement("span", { className: "calendar-header-date" }, `${this.state.year} ${this.state.months[this.state.month]}`), /*#__PURE__*/
      React.createElement("span", { className: "button-container button-container--right" }, /*#__PURE__*/
      React.createElement("button", { onClick: this.nextCalendar, className: "button-content button-content--right" }))), /*#__PURE__*/


      React.createElement("div", { className: "week" },
      this.state.weekDays.map(weekDay => /*#__PURE__*/React.createElement("div", { key: weekDay, className: "weekday" }, weekDay))),

      this.state.calendar.map((week) => /*#__PURE__*/
      React.createElement("div", { key: week.id, className: "week" },
      week.data.map((day) => /*#__PURE__*/
      React.createElement("div", {
        key: `${day.month}${day.value}`,
        className: `day ${day.class}` },

      day.value < 10 && day.value !== ' ' ? `0${day.value}` : day.value))))));






  }}



/*
 * Render the above component into the div#app
 */
ReactDOM.render( /*#__PURE__*/React.createElement(Calendar, null), document.getElementById('app'));
//# sourceURL=pen.js
    </script>
</body>
</html>

10. React Calendar Test

Made by Christian H. Bohlbro. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700,800'> 
<style>
/* --- Variables --- */
/* --- Global Styles --- */
html, body {
  font-family: "Open Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #d1f5e0;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.wrapper {
  max-width: 1200px;
  width: 100%;
}

.site {
  display: flex;
  box-shadow: 1px 2px 15px 0 rgba(0, 0, 0, 0.1);
}

.sidebar {
  flex: 0 0 auto;
  width: calc( 100% / 3 );
  background: linear-gradient(to bottom, #41DE89 0%, #3AD681 100%);
}

.content {
  flex: 0 0 auto;
  width: calc( 100% / 3 * 2 );
  padding: 60px 40px;
  background-color: #FFFFFF;
}
.content h1 {
  margin-bottom: 60px;
  font-weight: 400;
  text-align: center;
  color: #2ecc71;
}

.calendar ul {
  display: flex;
  flex-flow: row wrap;
  margin: 0;
  padding: 0;
  font-size: 20px;
  color: #686868;
  list-style: none;
}
.calendar .weekdays {
  font-weight: 700;
}
.calendar li {
  flex: 0 0 auto;
  width: calc( 100% / 7 );
  padding: 20px 20px;
  text-align: center;
}
.calendar a {
  margin: 0 auto;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  color: #686868;
  border-radius: 5px;
  transition: 0.3s ease;
}
.calendar a:hover {
  background-color: #f4f4f4;
}
.calendar .date--fade a {
  color: rgba(104, 104, 104, 0.25);
}
.calendar .date--current a {
  color: #FFFFFF;
  background-color: #2ecc71;
}
.calendar .weekday__inner {
  display: inline-flex;
  flex-direction: column;
  margin: 0 auto;
}
.calendar .weekday--current .weekday__inner:after {
  content: "";
  display: block;
  height: 2px;
  width: 100%;
  margin-top: 20px;
  background-color: #2ecc71;
}
</style>
</head>
<body>
  <div class="wrapper" id="main"></div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script>
<script src='https://momentjs.com/downloads/moment.js'></script>
      <script>
var Main = React.createClass({ displayName: "Main",
  render: function () {
    return /*#__PURE__*/(
      React.createElement("div", { className: "site" }, /*#__PURE__*/
      React.createElement(Sidebar, null), /*#__PURE__*/
      React.createElement(Content, null)));


  } });


var Sidebar = React.createClass({ displayName: "Sidebar",
  render: function () {
    return /*#__PURE__*/(
      React.createElement("div", { className: "sidebar" }));



  } });


var Content = React.createClass({ displayName: "Content",
  render: function () {
    var monthNames = ["January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December"];

    var now = new Date();
    return /*#__PURE__*/(
      React.createElement("div", { className: "content" }, /*#__PURE__*/
      React.createElement("h1", null, monthNames[now.getMonth()], " ", now.getFullYear()), /*#__PURE__*/
      React.createElement(Calendar, null)));


  } });



var Day = React.createClass({ displayName: "Day",
  getInitialState: function () {
    return {
      classes: "date" };

  },
  linkClickEvent: function () {
    if (this.state.classes.indexOf("date--active") == -1) {
      this.setState({ classes: this.state.classes + " date--active" });
    }
  },
  render: function () {
    if (this.props.fade && this.state.classes.indexOf("date--fade") == -1) {
      this.state.classes += " date--fade";
    }
    if (this.props.current && this.state.classes.indexOf("date--current") == -1) {
      this.state.classes += " date--current";
    }
    return /*#__PURE__*/(
      React.createElement("li", { className: this.state.classes }, /*#__PURE__*/
      React.createElement("a", { href: "#", onClick: this.linkClickEvent }, this.props.date)));


  } });


var Calendar = React.createClass({ displayName: "Calendar",
  render: function () {
    var now = new Date();

    var MonthFirstDay = new Date(now.getFullYear(), now.getMonth() + 1, 1);

    var DaysInMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();

    var FirstWeekday = MonthFirstDay.getDay();

    var dates = [];

    var DatePrev = new Date(now.getDate() - FirstWeekday);
    var DaysInMonthPrev = new Date(DatePrev.getFullYear(), DatePrev.getMonth() + 1, 0).getDate();

    var totalDays = FirstWeekday + DaysInMonth;

    for (var i = DaysInMonthPrev - FirstWeekday + 1; i <= DaysInMonthPrev; i++) {if (window.CP.shouldStopExecution(0)) break;
      dates.push( /*#__PURE__*/React.createElement(Day, { date: i, fade: true }));
    }window.CP.exitedLoop(0);

    for (var i = 1; i <= DaysInMonth; i++) {if (window.CP.shouldStopExecution(1)) break;
      dates.push( /*#__PURE__*/React.createElement(Day, { date: i, current: i == now.getDate() }));
    }window.CP.exitedLoop(1);

    for (var i = 1; i <= totalDays % 7 + 1; i++) {if (window.CP.shouldStopExecution(2)) break;
      dates.push( /*#__PURE__*/React.createElement(Day, { date: i, fade: true }));
    }window.CP.exitedLoop(2);

    var weekdays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];

    var week = [];

    for (var i = 0; i < weekdays.length; i++) {if (window.CP.shouldStopExecution(3)) break;
      var classes = "weekday";
      if (now.getDay() == i) {
        classes += " weekday--current";
      }
      week.push( /*#__PURE__*/
      React.createElement("li", { className: classes }, /*#__PURE__*/
      React.createElement("div", { className: "weekday__inner" }, weekdays[i])));


    }window.CP.exitedLoop(3);

    return /*#__PURE__*/(
      React.createElement("div", { className: "calendar" }, /*#__PURE__*/
      React.createElement("ul", { className: "weekdays" }, week), /*#__PURE__*/
      React.createElement("ul", { className: "dates" }, dates)));


  } });


function Calender() {
}


ReactDOM.render( /*#__PURE__*/
React.createElement(Main, null),
document.querySelector('#main'));
//# sourceURL=pen.js
    </script>
</body>
</html>

11. Simple Calendar

Made by David Ferguson. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'> 
<style>
#app {
  position: fixed;
  top:0;
  left: 0;
  height: 100%;
  width: 100%;
}

.Calendar_Header {
  display:grid;
  grid-template-columns: 1fr 1fr;
  box-sizing: border-box;
  padding: 10px;
  color: #888;
}

.Calendar_Navigation {
  text-align: right;
}

.Calendar_Day_Headers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.Calendar_Day_Headers > div {
  box-sizing: border-box;
  padding: 10px;
  color: #666;
  font-weight: bold;
  text-align: right;
}

.Calendar {
  height: calc(100% - 105px);
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 1fr);
}

.Calendar_Day {
  text-align: right;
}

.Calendar_Day {
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc;
  box-sizing: border-box;
  padding: 10px;
  color: #666;
}

.Calendar_Day_Weekend {
  background: #f7f7f7;
  color: #808080;
}

.Calendar_Day_Out_Of_Scope {
  color: #ccc;
}



@media (max-height: 460px) {
  .Calendar_Day {
    border: none;
    box-sizing: border-box;
    padding: 3px;
    color: #666;
    font-size: .7rem;
  }
}
</style>
</head>
<body>
  <div id="app"></div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.29.0/date_fns.min.js'></script>
      <script>
const Day = props => {
  const classes = ['Calendar_Day'];

  if (dateFns.isWeekend(props.date)) {
    classes.push('Calendar_Day_Weekend');
  }

  if (dateFns.getMonth(props.currentDate) !== dateFns.getMonth(props.date)) {
    classes.push('Calendar_Day_Out_Of_Scope');
  }

  return /*#__PURE__*/(
    React.createElement("div", { className: classes.join(' ') },
    props.showMonth ? dateFns.format(props.date, 'MMM DD') : dateFns.format(props.date, 'D')));


};

const CalendarHeader = props => {
  return /*#__PURE__*/(
    React.createElement("div", { className: "Calendar_Header" }, /*#__PURE__*/
    React.createElement("h3", null, dateFns.format(props.currentDate, 'MMMM YYYY')), /*#__PURE__*/
    React.createElement("span", { className: "Calendar_Navigation" }, /*#__PURE__*/
    React.createElement("div", { className: "btn-group" }, /*#__PURE__*/
    React.createElement("button", { type: "button", className: "btn btn-primary", onClick: props.prev }, "<"), /*#__PURE__*/
    React.createElement("button", { type: "button", className: "btn btn-primary", onClick: props.today }, "Today"), /*#__PURE__*/
    React.createElement("button", { type: "button", className: "btn btn-primary", onClick: props.next }, ">")))));




};

const DayHeaders = () => {
  return /*#__PURE__*/(
    React.createElement("div", { className: "Calendar_Day_Headers" }, /*#__PURE__*/
    React.createElement("div", null, "Sun"), /*#__PURE__*/
    React.createElement("div", null, "Mon"), /*#__PURE__*/
    React.createElement("div", null, "Tue"), /*#__PURE__*/
    React.createElement("div", null, "Wed"), /*#__PURE__*/
    React.createElement("div", null, "Thu"), /*#__PURE__*/
    React.createElement("div", null, "Fri"), /*#__PURE__*/
    React.createElement("div", null, "Sat")));


};

class Calendar extends React.Component {

  constructor() {
    super();

    let initialDate = new Date();
    initialDate = dateFns.setDate(initialDate, 1);

    this.state = {
      currentDate: initialDate };


    this.prev = () => {
      const prev = dateFns.subMonths(this.state.currentDate, 1);
      this.setState({ currentDate: prev });
    };

    this.next = () => {
      const next = dateFns.addMonths(this.state.currentDate, 1);
      this.setState({ currentDate: next });
    };

    this.today = () => {
      let today = new Date();
      today = dateFns.setDate(today, 1);
      this.setState({ currentDate: today });
    };
  }

  render() {
    const firstOfTheWeek = dateFns.startOfWeek(this.state.currentDate);
    const currentDate = new Date(this.state.currentDate.getTime());
    const calendarDays = [];
    let dateIncrement = new Date(firstOfTheWeek.getTime());

    let inc = 0;
    while (inc < 42) {if (window.CP.shouldStopExecution(0)) break;
      if (dateFns.getDate(dateIncrement) === 1) {
        calendarDays.push( /*#__PURE__*/React.createElement(Day, { date: dateIncrement, currentDate: currentDate, showMonth: true }));
      } else
      {
        calendarDays.push( /*#__PURE__*/React.createElement(Day, { date: dateIncrement, currentDate: currentDate }));
      }
      inc += 1;
      dateIncrement = dateFns.addDays(dateIncrement, 1);
    }window.CP.exitedLoop(0);

    const wrapperStyle = {
      height: '100%',
      width: '100%' };


    return /*#__PURE__*/(
      React.createElement("div", { style: wrapperStyle }, /*#__PURE__*/
      React.createElement(CalendarHeader, {
        currentDate: currentDate,
        next: this.next,
        prev: this.prev,
        today: this.today }), /*#__PURE__*/
      React.createElement(DayHeaders, null), /*#__PURE__*/
      React.createElement("div", { className: "Calendar" },
      calendarDays)));



  }}


ReactDOM.render( /*#__PURE__*/React.createElement(Calendar, null), document.getElementById('app'));
//# sourceURL=pen.js
    </script>
</body>
</html>

12. React Calendar component – Proof of concept w/ useMemo

Made by Daniel. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected],400&display=swap" rel="stylesheet"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
:root {
	--text: #39393a;
	--white: #e6e6e6;
	--red: #c44536;

	background-color: var(--white);
	color: var(--text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
		Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

body {
	align-items: center;
	display: flex;
	font-family: "Roboto", sans-serif;
	height: 100vh;
	justify-content: center;
	margin: 0;
	padding: 0;
	width: 100vw;
}

.calendar {
	background: linear-gradient(145deg, #f6f6f6, #cfcfcf);
	border-radius: 42px;
	box-shadow: 35px 35px 70px #c4c4c4, -35px -35px 70px #ffffff;
	padding: 2.5rem;
}

.calendar__title {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.calendar__next,
.calendar__prev {
	background-color: transparent;
	border: none;
}

.days {
	display: grid;
	grid-template-columns: repeat(7, 4rem);
	grid-template-rows: repeat(6, 4rem);
}

.day {
	align-items: center;
	border-radius: 12px;
	display: flex;
	height: 100%;
	justify-content: center;
	width: 100%;
}

.day--no-visible {
	opacity: 0;
}

.today {
	background-color: var(--red);
	color: var(--white);
}

@media screen and (max-width: 678px) {
	.days {
		grid-template-columns: repeat(7, 2.5rem);
		grid-template-rows: repeat(7, 2.5rem);
	}
}
</style>
</head>
<body>
  <div id="app"></div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js'></script>
      <script id="rendered-js" >
const { useState, useMemo, useEffect } = React;
const { render } = ReactDOM;

const firstDayOfMonth = date => {
  return moment(date).startOf('month').format('d');
};

const Calendar = () => {
  const [date, setDate] = useState(moment());
  const [monthOffset, setMonthOffset] = useState(0);
  const [numberOfDays, setNumberOfDays] = useState(date.daysInMonth());

  const weekDayShort = useMemo(() => moment.weekdaysShort(), []);
  const today = useMemo(() => date.format('D'), []);
  const days = useMemo(() => {
    let days = [];
    for (let i = 1; i < firstDayOfMonth(date); i++) {if (window.CP.shouldStopExecution(0)) break;
      days = [...days, 0];
    }window.CP.exitedLoop(0);

    for (let i = 0; i <= numberOfDays; i++) {if (window.CP.shouldStopExecution(1)) break;
      days = [...days, i];
    }window.CP.exitedLoop(1);

    return [...days];
  });

  useEffect(() => {
    if (!monthOffset) {
      setDate(moment());
    } else {
      setDate(date.add(monthOffset, 'M'));
    }
    setNumberOfDays(date.daysInMonth());
  }, [monthOffset]);

  return /*#__PURE__*/(
    React.createElement("div", { className: "calendar" }, /*#__PURE__*/
    React.createElement("div", { className: "calendar__title" }, /*#__PURE__*/
    React.createElement("button", {
      className: "calendar__next",
      onClick: () => setMonthOffset(monthOffset - 1) },

    '<'), /*#__PURE__*/

    React.createElement("div", { className: "month" }, date.format('MMMM, YYYY')), /*#__PURE__*/
    React.createElement("button", {
      className: "calendar__prev",
      onClick: () => setMonthOffset(monthOffset + 1) },

    '>')), /*#__PURE__*/


    React.createElement("div", { className: "days" },
    weekDayShort.map(day => {
      return /*#__PURE__*/(
        React.createElement("p", { key: day, className: "day day--name" },
        day));


    }),
    days.map((day, i) => {
      return /*#__PURE__*/(
        React.createElement("p", {
          key: i,
          className: `day ${!day && 'day--no-visible'} ${
          today == day && 'today'
          }` },

        day));


    }))));



};

const app = document.getElementById('app');
render( /*#__PURE__*/React.createElement(Calendar, null), app);
//# sourceURL=pen.js
    </script>
</body>
</html>

13. React Calendar with Event Adder

Made by Mugemana Ghislain. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'>
<style>
.box {
  height: 100px;
  min-width: 100px;
  padding: 0 !important;
}

.box:hover {
  font-size: 20px;
  font-weight: bold;
  transition-duration: 0.1s;
}

.eventBtn {
  max-width: 200px;
  border-radius: 0;
  margin-bottom: 1px;
}
</style>
</head>
<body>
  <div id='root'></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js'></script>
      <script id="rendered-js" >
// START: Show grouped events in a popup
const ShowGroupEvents = ({ show, events, toggle, visible }) => {
  return /*#__PURE__*/(
    React.createElement(React.Fragment, null,
    visible && /*#__PURE__*/React.createElement("div", { className: "modal-backdrop fade show" }), /*#__PURE__*/
    React.createElement("div", { className: "modal fade " + (visible ? "show d-block" : "") }, /*#__PURE__*/
    React.createElement("div", { className: "modal-dialog modal-dialog-centered modal-dialog-scrollable modal-sm" }, /*#__PURE__*/
    React.createElement("div", { className: "modal-content" }, /*#__PURE__*/
    React.createElement("div", { className: "modal-header" }, /*#__PURE__*/
    React.createElement("h5", { className: "modal-title" }, events.length, " Events"), /*#__PURE__*/
    React.createElement("button", {
      type: "button",
      onClick: toggle,
      className: "btn-close" })), /*#__PURE__*/


    React.createElement("div", {
      className: "modal-body bg-light",
      style: { maxHeight: 400, overflowY: "auto" } },

    events.map((event) => /*#__PURE__*/
    React.createElement("button", {
      key: event.id,
      onClick: () => {
        toggle();
        show(event.id);
      },
      className:
      "btn btn-md d-block w-100 p-0 mb-1 text-truncate mx-auto btn-" +
      event.color },


    event.name))))))));








};
// END: Show grouped events in a popup

// START: Group many events into 1 button
const GroupEvents = ({
  show,
  events,
  maxSize = 4,
  buttonColor = "btn-dark" }) =>
{
  const [showModal, setShowModal] = React.useState(false);

  return /*#__PURE__*/(
    React.createElement(React.Fragment, null, /*#__PURE__*/
    React.createElement(ShowGroupEvents, {
      show: show,
      events: events,
      visible: showModal,
      toggle: () => setShowModal(!showModal) }),

    events.length != 0 && (
    events.length < maxSize ?
    events.map((event) => /*#__PURE__*/
    React.createElement("button", {
      key: event.id,
      onClick: () => show(event.id),
      className:
      "btn btn-sm d-block w-100 p-0 text-truncate mx-auto eventBtn btn-" +
      event.color },


    event.name)) : /*#__PURE__*/



    React.createElement("button", {
      onClick: () => setShowModal(!showModal),
      className:
      buttonColor +
      " btn btn-sm d-block w-100 p-0 text-truncate mx-auto eventBtn" },


    events.length, " events"))));




};
// END: Group many events into 1 button

// START: Show Event Modal
const ShowEventModal = ({ visible, event, update, toggle, erase }) => {
  let a = new Date(event === null || event === void 0 ? void 0 : event.endDate);
  let b = new Date(event === null || event === void 0 ? void 0 : event.startDate);

  return /*#__PURE__*/(
    React.createElement(React.Fragment, null,
    visible && /*#__PURE__*/React.createElement("div", { className: "modal-backdrop fade show" }), /*#__PURE__*/
    React.createElement("div", { className: "modal fade " + (visible ? "show d-block" : "") }, /*#__PURE__*/
    React.createElement("div", { className: "modal-dialog modal-dialog-scrollable" }, /*#__PURE__*/
    React.createElement("div", { className: "modal-content" }, /*#__PURE__*/
    React.createElement("div", { className: "modal-header" }, /*#__PURE__*/
    React.createElement("h5", { className: "modal-title" }, event === null || event === void 0 ? void 0 : event.name), /*#__PURE__*/
    React.createElement("button", {
      type: "button",
      onClick: toggle,
      className: "btn-close" })), /*#__PURE__*/


    React.createElement("div", { className: "modal-body" }, /*#__PURE__*/
    React.createElement("h5", null, /*#__PURE__*/
    React.createElement("span", { className: "badge bg-" + (event === null || event === void 0 ? void 0 : event.color) }, "Start:",
    " ",
    b.toLocaleString("en-US", {
      day: "numeric",
      month: "short",
      year: "numeric",
      hour: "numeric",
      minute: "2-digit" })),

    " ", /*#__PURE__*/
    React.createElement("span", { className: "badge bg-" + (event === null || event === void 0 ? void 0 : event.color) }, "Stop:",
    " ",
    a.toLocaleString("en-US", {
      day: "numeric",
      month: "short",
      year: "numeric",
      hour: "numeric",
      minute: "2-digit" }))), /*#__PURE__*/



    React.createElement("p", { className: "mb-0" }, event === null || event === void 0 ? void 0 : event.description)), /*#__PURE__*/

    React.createElement("div", { className: "modal-footer" }, /*#__PURE__*/
    React.createElement("button", { className: "btn btn-primary", onClick: update }, "Edit"), /*#__PURE__*/


    React.createElement("button", { className: "btn btn-warning", onClick: erase }, "Delete")))))));








};
// END: Show Event Modal

// START: Edit Event Modal
const EditEventModal = ({ colors, event, toggle, visible, updateEvent }) => {
  const [name, setName] = React.useState("");
  const [color, setColor] = React.useState("");
  const [endDate, setEndDate] = React.useState("");
  const [startDate, setStartDate] = React.useState("");
  const [description, setDescription] = React.useState("");

  React.useEffect(() => {var _event$endDate, _event$startDate;
    setName((event === null || event === void 0 ? void 0 : event.name) || "");
    setColor((event === null || event === void 0 ? void 0 : event.color) || "");
    setDescription((event === null || event === void 0 ? void 0 : event.description) || "");
    setEndDate((event === null || event === void 0 ? void 0 : (_event$endDate = event.endDate) === null || _event$endDate === void 0 ? void 0 : _event$endDate.split("T")[0]) || "");
    setStartDate((event === null || event === void 0 ? void 0 : (_event$startDate = event.startDate) === null || _event$startDate === void 0 ? void 0 : _event$startDate.split("T")[0]) || "");
  }, [event]);

  const handleSubmit = e => {
    e.preventDefault();
    let a = new Date(endDate);
    let b = new Date(startDate);
    updateEvent({
      color,
      name: name === null || name === void 0 ? void 0 : name.trim(),
      end: a.toISOString(),
      start: b.toISOString(),
      id: Number.parseInt(event === null || event === void 0 ? void 0 : event.id),
      description: description === null || description === void 0 ? void 0 : description.trim() });

    setName("");
    setColor("");
    setEndDate("");
    setStartDate("");
    setDescription("");
    toggle();
  };

  return /*#__PURE__*/(
    React.createElement(React.Fragment, null,
    visible && /*#__PURE__*/React.createElement("div", { className: "modal-backdrop fade show" }), /*#__PURE__*/
    React.createElement("div", { className: "modal fade " + (visible ? "show d-block" : "") }, /*#__PURE__*/
    React.createElement("div", { className: "modal-dialog modal-dialog-scrollable" }, /*#__PURE__*/
    React.createElement("div", { className: "modal-content" }, /*#__PURE__*/
    React.createElement("div", { className: "modal-header" }, /*#__PURE__*/
    React.createElement("h5", { className: "modal-title" }, "Edit Event"), /*#__PURE__*/
    React.createElement("button", {
      type: "button",
      onClick: toggle,
      className: "btn-close" })), /*#__PURE__*/


    React.createElement("div", { className: "modal-body" }, /*#__PURE__*/
    React.createElement("form", { onSubmit: handleSubmit }, /*#__PURE__*/
    React.createElement("div", { className: "row justify-content-center" }, /*#__PURE__*/
    React.createElement("div", { className: "col-md-6" }, /*#__PURE__*/
    React.createElement("div", { className: "form-group" }, /*#__PURE__*/
    React.createElement("label", { className: "fw-lighter" }, "Name"), /*#__PURE__*/
    React.createElement("input", {
      type: "text",
      value: name,
      required: true,
      placeholder: "Name",
      className: "form-control mb-2",
      onChange: el => setName(el.target.value) }))), /*#__PURE__*/



    React.createElement("div", { className: "col-md-6" }, /*#__PURE__*/
    React.createElement("div", { className: "form-group" }, /*#__PURE__*/
    React.createElement("label", { className: "fw-lighter" }, "Color"), /*#__PURE__*/
    React.createElement("select", {
      value: color,
      required: true,
      className: "form-control mb-2",
      onChange: el => setColor(el.target.value) }, /*#__PURE__*/

    React.createElement("option", { value: "" }, ". . . choose color . . ."),
    colors.map((item, id) => /*#__PURE__*/
    React.createElement("option", { key: id, value: item.value },
    item.name))))), /*#__PURE__*/





    React.createElement("div", { className: "col-md-6" }, /*#__PURE__*/
    React.createElement("div", { className: "form-group" }, /*#__PURE__*/
    React.createElement("label", { className: "fw-lighter" }, "Start Date"), /*#__PURE__*/
    React.createElement("input", {
      type: "date",
      required: true,
      value: startDate,
      placeholder: "Start",
      className: "form-control mb-2",
      onChange: el => setStartDate(el.target.value) }))), /*#__PURE__*/



    React.createElement("div", { className: "col-md-6" }, /*#__PURE__*/
    React.createElement("div", { className: "form-group" }, /*#__PURE__*/
    React.createElement("label", { className: "fw-lighter" }, "Stop Date"), /*#__PURE__*/
    React.createElement("input", {
      type: "date",
      value: endDate,
      required: true,
      min: startDate,
      placeholder: "End",
      className: "form-control mb-2",
      onChange: el => setEndDate(el.target.value) }))), /*#__PURE__*/



    React.createElement("div", { className: "col-md-12" }, /*#__PURE__*/
    React.createElement("div", { className: "form-group" }, /*#__PURE__*/
    React.createElement("label", { className: "fw-lighter" }, "Description"), /*#__PURE__*/
    React.createElement("textarea", {
      rows: 3,
      value: description,
      placeholder: "Description",
      className: "form-control mb-2",
      onChange: el => setDescription(el.target.value) })))), /*#__PURE__*/




    React.createElement("div", { className: "d-grid" }, /*#__PURE__*/
    React.createElement("button", { className: "btn btn-primary", type: "submit" }, "Submit")))))))));










};
// END: Edit Event Modal

// START: Add Event Modal
const AddEventModal = ({ colors, toggle, visible, saveEvent }) => {
  const [name, setName] = React.useState("");
  const [color, setColor] = React.useState("");
  const [endDate, setEndDate] = React.useState("");
  const [startDate, setStartDate] = React.useState("");
  const [description, setDescription] = React.useState("");

  const handleSubmit = e => {
    e.preventDefault();
    let a = new Date(endDate);
    let b = new Date(startDate);
    saveEvent({
      color,
      name: name.trim(),
      end: a.toISOString(),
      start: b.toISOString(),
      description: description.trim() });

    setName("");
    setColor("");
    setEndDate("");
    setStartDate("");
    setDescription("");
    toggle();
  };

  return /*#__PURE__*/(
    React.createElement(React.Fragment, null,
    visible && /*#__PURE__*/React.createElement("div", { className: "modal-backdrop fade show" }), /*#__PURE__*/
    React.createElement("div", { className: "modal fade " + (visible ? "show d-block" : "") }, /*#__PURE__*/
    React.createElement("div", { className: "modal-dialog modal-dialog-scrollable" }, /*#__PURE__*/
    React.createElement("div", { className: "modal-content" }, /*#__PURE__*/
    React.createElement("div", { className: "modal-header" }, /*#__PURE__*/
    React.createElement("h5", { className: "modal-title" }, "Add Event"), /*#__PURE__*/
    React.createElement("button", {
      type: "button",
      onClick: toggle,
      className: "btn-close" })), /*#__PURE__*/


    React.createElement("div", { className: "modal-body" }, /*#__PURE__*/
    React.createElement("form", { onSubmit: handleSubmit }, /*#__PURE__*/
    React.createElement("div", { className: "row justify-content-center" }, /*#__PURE__*/
    React.createElement("div", { className: "col-md-6" }, /*#__PURE__*/
    React.createElement("div", { className: "form-group" }, /*#__PURE__*/
    React.createElement("label", { className: "fw-lighter" }, "Name"), /*#__PURE__*/
    React.createElement("input", {
      type: "text",
      value: name,
      required: true,
      placeholder: "Name",
      className: "form-control mb-2",
      onChange: el => setName(el.target.value) }))), /*#__PURE__*/



    React.createElement("div", { className: "col-md-6" }, /*#__PURE__*/
    React.createElement("div", { className: "form-group" }, /*#__PURE__*/
    React.createElement("label", { className: "fw-lighter" }, "Color"), /*#__PURE__*/
    React.createElement("select", {
      value: color,
      required: true,
      className: "form-control mb-2",
      onChange: el => setColor(el.target.value) }, /*#__PURE__*/

    React.createElement("option", { value: "" }, ". . . choose color . . ."),
    colors.map((item, id) => /*#__PURE__*/
    React.createElement("option", { key: id, value: item.value },
    item.name))))), /*#__PURE__*/





    React.createElement("div", { className: "col-md-6" }, /*#__PURE__*/
    React.createElement("div", { className: "form-group" }, /*#__PURE__*/
    React.createElement("label", { className: "fw-lighter" }, "Start Date"), /*#__PURE__*/
    React.createElement("input", {
      type: "date",
      required: true,
      placeholder: "Day",
      value: startDate,
      className: "form-control mb-2",
      onChange: el => setStartDate(el.target.value) }))), /*#__PURE__*/



    React.createElement("div", { className: "col-md-6" }, /*#__PURE__*/
    React.createElement("div", { className: "form-group" }, /*#__PURE__*/
    React.createElement("label", { className: "fw-lighter" }, "Stop Date"), /*#__PURE__*/
    React.createElement("input", {
      type: "date",
      min: startDate,
      required: true,
      value: endDate,
      placeholder: "Day",
      className: "form-control mb-2",
      onChange: el => setEndDate(el.target.value) }))), /*#__PURE__*/



    React.createElement("div", { className: "col-md-12" }, /*#__PURE__*/
    React.createElement("div", { className: "form-group" }, /*#__PURE__*/
    React.createElement("label", { className: "fw-lighter" }, "Description"), /*#__PURE__*/
    React.createElement("textarea", {
      rows: 3,
      value: description,
      placeholder: "Description",
      className: "form-control mb-2",
      onChange: el => setDescription(el.target.value) })))), /*#__PURE__*/




    React.createElement("div", { className: "d-grid" }, /*#__PURE__*/
    React.createElement("button", { className: "btn btn-primary", type: "submit" }, "Submit")))))))));










};
// END: Add Event Modal

// START: Calendar
const Calendar = () => {
  let today = new Date();
  let grid = { id: 0, day: 0 };
  const monthWeeks = [0, 1, 2, 3, 4, 5];
  const weekDays = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
  const colors = [
  { name: "blue", value: "info" },
  { name: "red", value: "danger" },
  { name: "green", value: "success" },
  { name: "yellow", value: "warning" },
  { name: "black", value: "secondary" }];


  console.log("STEP #1 : GET events via API / AJAX");

  const [events, setEvents] = React.useState([
  {
    id: 1,
    color: "info",
    name: "birthday",
    description: "Give me cake",
    endDate: "2022-06-02T12:00:11.771Z",
    startDate: "2022-06-01T12:00:11.771Z" },

  {
    id: 2,
    color: "success",
    name: "visit someone",
    description: "take a car, drive there, say hi...",
    endDate: "2022-06-14T12:00:11.771Z",
    startDate: "2022-06-10T12:00:11.771Z" },

  {
    id: 3,
    color: "warning",
    name: "important meeting",
    description: "don't attend...",
    endDate: "2022-06-23T12:00:51.462Z",
    startDate: "2022-06-20T12:00:51.462Z" }]);


  const [monthDifference, setMonthDifference] = React.useState(0);
  const [currentEvent, setCurrentEvent] = React.useState({});
  const [month, setMonth] = React.useState({
    today,
    firstDay: new Date(today.getFullYear(), today.getMonth(), 1),
    lastDay: new Date(today.getFullYear(), today.getMonth() + 1, 0) });

  const [showModal, setShowModal] = React.useState(false);
  const [showAddModal, setShowAddModal] = React.useState(false);
  const [showEditModal, setShowEditModal] = React.useState(false);

  React.useEffect(() => {
    today = new Date();
    grid = { id: 0, day: 0 };
    today.setMonth(today.getMonth() + monthDifference);
    setMonth({
      today,
      firstDay: new Date(today.getFullYear(), today.getMonth(), 1),
      lastDay: new Date(today.getFullYear(), today.getMonth() + 1, 0) });

  }, [monthDifference]);

  const getDayEvents = (day = 0) => {
    let a = new Date();
    let b = new Date();

    a.setMonth(a.getMonth() + monthDifference);
    b.setMonth(b.getMonth() + monthDifference);

    a.setDate(day);
    b.setDate(day - 1);

    a.setHours(23);
    b.setHours(0);

    return events.filter(event => {
      let c = new Date(event === null || event === void 0 ? void 0 : event.startDate);
      let d = new Date(event === null || event === void 0 ? void 0 : event.endDate);

      c.setHours(23);
      d.setHours(0);

      return c < a && b < d;
    });
  };

  const saveEvent = ({ name, description, start, end, color }) => {
    console.log("STEP #2 : SAVE event via API / AJAX");

    setEvents([
    ...events,
    {
      id: events.length + 1,
      name,
      color,
      description,
      endDate: end,
      startDate: start }]);


  };

  const updateEvent = ({ id, name, description, start, end, color }) => {
    console.log("STEP #3 : UPDATE event via API / AJAX");

    setEvents([
    ...events.filter(event => event.id != id),
    {
      id,
      name,
      color,
      description,
      endDate: end,
      startDate: start }]);


  };

  const deleteEvent = () => {
    console.log("STEP #4 : DELETE event via API / AJAX");

    if (confirm("You are about to delete an event :(")) {
      setEvents([...events.filter(event => event.id != currentEvent.id)]);
      setShowModal(false);
    }
  };

  return /*#__PURE__*/(
    React.createElement("div", { className: "container my-4" }, /*#__PURE__*/
    React.createElement(AddEventModal, {
      colors: colors,
      visible: showAddModal,
      saveEvent: saveEvent,
      toggle: () => setShowAddModal(!showAddModal) }), /*#__PURE__*/

    React.createElement(ShowEventModal, {
      visible: showModal,
      erase: deleteEvent,
      event: currentEvent,
      toggle: () => setShowModal(!showModal),
      update: () => {
        setShowModal(!showModal);
        setShowEditModal(!showEditModal);
      } }), /*#__PURE__*/

    React.createElement(EditEventModal, {
      colors: colors,
      visible: showEditModal,
      event: currentEvent,
      updateEvent: updateEvent,
      toggle: () => setShowEditModal(!showEditModal) }), /*#__PURE__*/

    React.createElement("div", { className: "d-flex justify-content-between mb-3" }, /*#__PURE__*/
    React.createElement("span", { className: "badge bg-light text-dark fs-4" },
    month.today.toLocaleString("default", {
      month: "long",
      year: "numeric" })), /*#__PURE__*/


    React.createElement("div", null, /*#__PURE__*/
    React.createElement("button", {
      title: "previous month",
      "data-bs-toggle": "tooltip",
      className: "btn btn-secondary rounded-pill ms-1",
      onClick: () => setMonthDifference(monthDifference - 1) }, "⇇"), /*#__PURE__*/



    React.createElement("button", {
      title: "next month",
      "data-bs-toggle": "tooltip",
      className: "btn btn-secondary rounded-pill ms-1",
      onClick: () => setMonthDifference(monthDifference + 1) }, "⇉"), /*#__PURE__*/



    React.createElement("button", {
      className: "btn btn-primary rounded-pill ms-1",
      onClick: () => setShowAddModal(!showAddModal) }, "⊹ Event"))), /*#__PURE__*/





    React.createElement("div", { className: "table-responsive" }, /*#__PURE__*/
    React.createElement("table", { className: "table table-bordered table-responsive text-center" }, /*#__PURE__*/
    React.createElement("thead", null, /*#__PURE__*/
    React.createElement("tr", { className: "text-uppercase" },
    weekDays.map((day, id) => /*#__PURE__*/
    React.createElement("th", { key: id }, day)))), /*#__PURE__*/



    React.createElement("tbody", null,
    monthWeeks.map((week, index) => /*#__PURE__*/
    React.createElement("tr", { key: index },
    weekDays.map((day, id) => {
      if (grid.day || month.firstDay.getDay() == grid.id)
      grid.day++;
      grid.id++;
      if (grid.day > month.lastDay.getDate()) grid.day = 0;

      return /*#__PURE__*/(
        React.createElement("td", { key: id, className: "box " + (!grid.day && "bg-light") },
        grid.day != 0 && /*#__PURE__*/
        React.createElement(React.Fragment, null, /*#__PURE__*/
        React.createElement("span", {
          className:
          monthDifference == 0 &&
          grid.day == new Date().getDate() ?
          "badge bg-primary rounded-pill" :
          "" },


        grid.day), /*#__PURE__*/

        React.createElement(GroupEvents, {
          events: getDayEvents(grid.day),
          show: id => {
            setCurrentEvent(events.find(a => id == a.id));
            setShowModal(!showModal);
          } }))));

    }))))))));

};
// END: Calendar

ReactDOM.render( /*#__PURE__*/React.createElement(Calendar, null), document.getElementById("root"));
//# sourceURL=pen.js
    </script>
</body>
</html>

14. Basic Calendar

Made by Norman Enmanuel. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
/* Default *************** */
.wrapper {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

table {
  border-collapse: collapse;
  width: 100%;
}

thead, tbody {
  width: 100%;
  display: inline-table;
}

td, th {
  width: 2rem;
  height: 2rem;
  text-align: center;
  font-size: .9em;
  user-select: none;
  cursor: pointer;
}

/* Custom **************** */
.year-wrapper {
  background-color: initial;
}

.year-title {
  color: #32323C;
  font-weight: 100;
  font-size: 2em;
  user-select: none;
}

.year {
  display: flex;
  flex-wrap: wrap;
}

.month {
  display: block;
  width: 100%;
  padding: 0 .5em;
  box-sizing: border-box;
}

.month-name {
  text-align: left;
  text-transform: capitalize;
  text-indent: .5em;
  font-weight: 400;
  font-size: 1.2em;
  color: #FA403F;
}

.day-abbr {
  text-transform: uppercase;
}

.weekend {
  color: #949496;
}

.weekday {
  color: #32323C;
  font-weight: 500;
}

.today {
  background-color: #df5308;
  color: #fff;
  height: 25px;
  width: 25px;
  display: inline-block;
  line-height: 25px;
  border-radius: 50%;
}

.padding {
  color: #efefef;
}

/* Responsive ************** */
[class*="col-"] {
  /* For mobile phones: */
  width: 100%;
}
@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-m-1 {width: 8.33%;}
  .col-m-2 {width: 16.66%;}
  .col-m-3 {width: 25%;}
  .col-m-4 {width: 33.33%;}
  .col-m-5 {width: 41.66%;}
  .col-m-6 {width: 50%;}
  .col-m-7 {width: 58.33%;}
  .col-m-8 {width: 66.66%;}
  .col-m-9 {width: 75%;}
  .col-m-10 {width: 83.33%;}
  .col-m-11 {width: 91.66%;}
  .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}
</style>
</head>
<body>
  <div id="root"></div>
  <script src='https://unpkg.com/[email protected]/umd/react.development.js'></script>
<script src='https://unpkg.com/[email protected]/umd/react-dom.development.js'></script>
<script src='https://cdn.rawgit.com/normancarcamo/calendar-script/aeb0d05c/dist/browser/calendar.min.js'></script>
      <script>
const { Component } = React;
const { render } = ReactDOM;

class Year extends Component {
  constructor(props) {
    super(props);
  }

  renderHeader(name) {
    return /*#__PURE__*/(
      React.createElement("thead", null, /*#__PURE__*/
      React.createElement("tr", null, /*#__PURE__*/
      React.createElement("th", { className: 'month-name', colSpan: 7 }, name)), /*#__PURE__*/

      React.createElement("tr", null,
      ['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, index) => /*#__PURE__*/
      React.createElement("th", { className: 'day-abbr', key: index }, day)))));




  }

  renderContent(month) {
    return /*#__PURE__*/(
      React.createElement("tbody", null,
      month.calendar.map((week, weekIndex) => /*#__PURE__*/
      React.createElement("tr", { key: weekIndex },
      week.map((day, dayIndex) => {
        if (day.summary.visible) {
          if (day.summary.weekend) {
            return /*#__PURE__*/(
              React.createElement("td", { key: dayIndex }, /*#__PURE__*/
              React.createElement("span", { className: `weekend ${day.today ? 'today' : ''}`.trim() },
              day.key)));



          } else {
            return /*#__PURE__*/(
              React.createElement("td", { key: dayIndex }, /*#__PURE__*/
              React.createElement("span", { className: `weekday ${day.today ? 'today' : ''}`.trim() },
              day.key)));



          };
        } else {
          return /*#__PURE__*/(
            React.createElement("td", { key: dayIndex }, /*#__PURE__*/
            React.createElement("span", { className: 'padding' },
            day.key)));



        };
      })))));




  }

  renderMonth(month) {
    return /*#__PURE__*/(
      React.createElement("table", { className: 'month col-3 col-m-4', key: month.key },
      this.renderHeader(month.name),
      this.renderContent(month)));


  }

  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: 'year-wrapper' }, /*#__PURE__*/
      React.createElement("h2", { className: 'year-title' },
      this.props.title), /*#__PURE__*/

      React.createElement("div", { className: 'year' },
      this.props.months.map(month => this.renderMonth(month)))));



  }}


class App extends Component {
  constructor(props) {
    // Initial props:
    super(props);

    // Initial state:
    this.state = {
      calendar: this.getCalendar({
        from: this.props.from || new Date().getFullYear(),
        to: this.props.to }) };


  }

  getCalendar(options) {
    let calendar = new Calendar();

    calendar.on('each:year', function (year) {
      year.on('each:month', function (month) {
        month.on('each:day:added', function (day) {
          // Show today: *************************************************
          let date = calendar.today.toISOString().substring(0, 10);

          if (day.date[1] === date) {
            day.today = true;
          };

          // Set visible true to differentiate days in a month
          // of previous and incoming.
          day.summary.visible = true;
        });
      });
      year.on('each:month:added', function (month) {
        // SPLIT DAYS IN WEEKS: *****************************************
        var result = calendar.daysWithPadding(month);
        var weeks = calendar.filterDaysPerWeek(result.days);
        month.calendar = weeks;
      });
    });

    return calendar.filter({ from: options.from, to: options.to });
  }

  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: 'wrapper' },
      Object.keys(this.state.calendar.years).map((year) => /*#__PURE__*/
      React.createElement(Year, {
        ...this.state.calendar.years[year],
        title: year,
        key: year }))));




  }}


render( /*#__PURE__*/
React.createElement(App, { from: 2017, to: 2018 }),
document.getElementById('root'));
//# sourceURL=pen.js
    </script>
</body>
</html>

15. React Calendar UI

Made by Cameron Messinides. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
html {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 100%;
  color: #113;
  background-color: #efeffa;
  padding: 1rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.c-calendar {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  margin: 0 auto;
  max-width: 768px;
  line-height: 1.5;
  background-color: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}

.c-calendar__row {
  display: flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  overflow: hidden;
}
.c-calendar__row + .c-calendar__row {
  border-top: 1px #eee solid;
}

.c-calendar__row--ghost {
  background-color: #efeffa;
}

.c-calendar__header .c-calendar__row {
  border-bottom: 4px #7201f4 solid;
  align-items: baseline;
}

.c-calendar__cell {
  padding: 0.5rem;
  white-space: nowrap;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.c-calendar__cell--checkbox,
.c-calendar__cell--control,
.c-calendar__event-date {
  flex: 0 0 auto;
}

.c-calendar__heading {
  margin-right: auto;
  font-size: 2rem;
  font-weight: 300;
  flex: 1 1 auto;
}

.c-calendar__selected-count {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #7201F4;
  background-color: #efe1ff;
  padding: 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
}

.c-calendar__event-name {
  font-weight: 700;
  margin-right: auto;
}

.c-calendar__event-date {
  font-size: 0.875rem;
}

.c-calendar__event-date,
.c-calendar__cell--control {
  color: #76737d;
  transform: translate(4rem);
}
.c-calendar__row:hover .c-calendar__event-date, body.user-is-tabbing .c-calendar__row--active .c-calendar__event-date,
.c-calendar__row:hover .c-calendar__cell--control,
body.user-is-tabbing .c-calendar__row--active .c-calendar__cell--control {
  transform: translate(0);
}

.c-button {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin: -0.5rem;
  padding: 0.5rem;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
}
body:not(.user-is-tabbing) .c-button:focus {
  outline: none;
}

.c-button--icon {
  border-radius: 50%;
}
.c-button--icon:hover {
  color: #113;
  background-color: #efeffa;
}

.c-button--edit:hover,
.c-button--edit:focus {
  color: #22B5A3;
  background-color: #ddf9f5;
}

.c-button--trash:hover,
.c-button--trash:focus,
.c-button--x:hover,
.c-button--x:focus {
  color: #B21A3E;
  background-color: #fbe4ea;
}

.c-button__icon:first-child {
  margin-right: 0.5rem;
}

.c-icon {
  display: block;
  height: 1rem;
  width: 1rem;
}

.c-checkbox {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px #ddd solid;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.13);
  border-radius: 4px;
  padding: 0.125rem;
  color: #7201f4;
}
.c-checkbox .c-icon {
  visibility: hidden;
  stroke-width: 4px;
}
.c-checkbox[aria-checked=true] {
  border-color: transparent;
  background-color: #efe1ff;
  box-shadow: none;
}
.c-checkbox[aria-checked=true] .c-icon {
  visibility: visible;
}
body:not(.user-is-tabbing) .c-checkbox:focus {
  outline: none;
}
</style>
</head>
<body>
  <div id="root"></div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='https://unpkg.com/react/umd/react.development.js'></script>
<script src='https://unpkg.com/react-dom/umd/react-dom.development.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js'></script>
<script src='https://unpkg.com/feather-icons/dist/feather.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js'></script>
      <script id="rendered-js" >
// Tab navigation detection -- credit to David Gilbertson
// Source: https://gist.github.com/davidgilbertson/1955dc1dde36e1fabbc6178052294560#file-unnecessarily-complicated-version-js
// More information: https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2
function handleFirstTab(e) {
  if (e.keyCode === 9) {
    document.body.classList.add("user-is-tabbing");

    window.removeEventListener("keydown", handleFirstTab);
    window.addEventListener("mousedown", handleMouseDownOnce);
  }
}

function handleMouseDownOnce() {
  document.body.classList.remove("user-is-tabbing");

  window.removeEventListener("mousedown", handleMouseDownOnce);
  window.addEventListener("keydown", handleFirstTab);
}

window.addEventListener("keydown", handleFirstTab);

// Seeding data
const data = [
{
  id: 0,
  name: "Hockey game",
  datetime: "2017-10-28T23:10:00.000Z" },

{
  id: 1,
  name: "Dinner with the Gang",
  datetime: "2017-11-02T22:30:00.000Z" },

{
  id: 2,
  name: "Catch up w/ Nicole",
  datetime: "2017-11-10T18:15:00.000Z" },

{
  id: 3,
  name: "SciFi Writing Group",
  datetime: "2017-11-10T01:00:00.000Z" },

{
  id: 4,
  name: "Secret Project presentation",
  datetime: "2017-11-14T17:40:00.000Z" },

{
  id: 5,
  name: "Doctor's Appointment",
  datetime: "2018-01-05T12:00:00.000Z" }];



const FEATHER_OPTS = {
  class: "c-icon",
  "aria-hidden": true };


// Utility functions
class Utils {
  static formatDate(datetimeStr) {
    const date = moment(datetimeStr);
    return date.format("h[:]mm A [β€”] MMM[.] D");
  }}


class Calendar extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      events: props.events,
      lastSelected: null };


    this.handleSelect = this.handleSelect.bind(this);
    this.handleSelectAll = this.handleSelectAll.bind(this);
    this.handleDelete = this.handleDelete.bind(this);
  }

  handleSelect(event_id, evt) {
    var events;
    if (evt.shiftKey && this.state.lastSelected !== null) {
      const lastIndex = this.state.events.findIndex(
      e => e.id === this.state.lastSelected);

      const thisIndex = this.state.events.findIndex(e => e.id === event_id);
      const range = [lastIndex, thisIndex].sort();
      events = this.state.events.map((event, i) => {
        if (!event.selected && _.inRange(i, range[0], range[1] + 1)) {
          return Object.assign({}, event, {
            selected: true });

        } else {
          return event;
        }
      });
    } else {
      events = this.state.events.map(event => {
        if (event.id === event_id) {
          return Object.assign({}, event, {
            selected: !event.selected });

        } else {
          return event;
        }
      });
    }
    this.setState({ events, lastSelected: event_id });
  }

  handleSelectAll() {
    const allSelected = this.state.events.every(e => e.selected);
    const events = this.state.events.map(event => {
      return Object.assign({}, event, {
        selected: !allSelected });

    });
    this.setState({ events, lastSelected: null });
  }

  handleDelete(event_id) {
    const events = this.state.events.filter(event => event.id !== event_id);
    const lastSelected =
    this.state.lastSelected === event_id ? null : this.state.lastSelected;
    this.setState({ events, lastSelected });
  }

  render() {
    const rows = this.state.events.map((event) => /*#__PURE__*/
    React.createElement(CalendarRow, {
      id: event.id,
      key: "event-" + event.id,
      name: event.name,
      datetime: event.datetime,
      selected: event.selected,
      onSelect: this.handleSelect,
      onEditClick: () => {
        console.log("Edited");
      },
      onDeleteClick: this.handleDelete }));


    return /*#__PURE__*/(
      React.createElement("div", { className: "c-calendar" }, /*#__PURE__*/
      React.createElement(CalendarHeader, {
        selectedCount: this.state.events.filter(e => e.selected).length,
        allSelected:
        this.state.events.length && this.state.events.every(e => e.selected),

        onSelectAll: this.handleSelectAll,
        heading: "All Events" }), /*#__PURE__*/

      React.createElement("ul", { className: "c-calendar__rows" }, rows), /*#__PURE__*/
      React.createElement(ToggleableCalendarForm, null)));


  }}


class CalendarHeader extends React.Component {
  constructor(props) {
    super(props);

    this.onSelectClick = this.onSelectClick.bind(this);
    this.onSelectKeyPress = this.onSelectKeyPress.bind(this);
  }

  onSelectClick(evt) {
    this.props.onSelectAll();
  }

  onSelectKeyPress(evt) {
    if (evt.key === " " || evt.which == 32) this.onSelectClick(evt);
  }

  render() {
    return /*#__PURE__*/(
      React.createElement("header", { className: "c-calendar__header" }, /*#__PURE__*/
      React.createElement("div", { className: "c-calendar__row c-calendar__row--big" }, /*#__PURE__*/
      React.createElement("div", { className: "c-calendar__cell c-calendar__cell--checkbox" }, /*#__PURE__*/
      React.createElement(Checkbox, {
        checked: this.props.allSelected,
        onKeyPress: this.onSelectKeyPress,
        onClick: this.onSelectClick,
        label: "Select all events" })), /*#__PURE__*/


      React.createElement("h1", { className: "c-calendar__cell c-calendar__heading" },
      this.props.heading),

      this.props.selectedCount > 0 && /*#__PURE__*/
      React.createElement("div", {
        className: "c-calendar__cell",
        role: "alert" }, /*#__PURE__*/

      React.createElement("span", { className: "c-calendar__selected-count" },
      this.props.selectedCount, " Selected")))));






  }}


class CalendarRow extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      active: false };


    this.handleFocus = this.handleFocus.bind(this);
    this.handleBlur = this.handleBlur.bind(this);
    this.onSelectClick = this.onSelectClick.bind(this);
    this.onSelectKeyPress = this.onSelectKeyPress.bind(this);
    this.onDeleteClick = this.onDeleteClick.bind(this);
  }

  handleFocus() {
    this.setState({ hasFocus: true });
  }

  handleBlur() {
    this.setState({ hasFocus: false });
  }

  onSelectClick(evt) {
    this.props.onSelect(this.props.id, evt);
  }

  onSelectKeyPress(evt) {
    if (evt.key === " " || evt.which === 32) this.onSelectClick(evt);
  }

  onDeleteClick(evt) {
    this.props.onDeleteClick(this.props.id);
  }

  render() {
    return /*#__PURE__*/(
      React.createElement("li", {
        id: "event-" + this.props.id,
        className:
        "c-calendar__row" + (
        this.state.hasFocus ? " c-calendar__row--active" : ""),

        onFocus: this.handleFocus,
        onBlur: this.handleBlur }, /*#__PURE__*/

      React.createElement("div", { className: "c-calendar__cell c-calendar__cell--checkbox" }, /*#__PURE__*/
      React.createElement(Checkbox, {
        checked: this.props.selected,
        onClick: this.onSelectClick,
        onKeyPress: this.onSelectKeyPress,
        label: "Select this event" })), /*#__PURE__*/


      React.createElement("div", { className: "c-calendar__cell c-calendar__event-name" },
      this.props.name), /*#__PURE__*/

      React.createElement("div", { className: "c-calendar__cell c-calendar__event-date" }, /*#__PURE__*/
      React.createElement("time", { dateTime: this.props.datetime },
      Utils.formatDate(this.props.datetime))), /*#__PURE__*/


      React.createElement("div", { className: "c-calendar__cell c-calendar__cell--control" }, /*#__PURE__*/
      React.createElement(IconButton, { icon: "edit", onClick: this.props.onEditClick })), /*#__PURE__*/

      React.createElement("div", { className: "c-calendar__cell c-calendar__cell--control" }, /*#__PURE__*/
      React.createElement(IconButton, { icon: "trash", onClick: this.onDeleteClick }))));



  }}


class ToggleableCalendarForm extends React.Component {
  render() {
    if (this.props.isEditorOpen) {

    } else {
      return /*#__PURE__*/(
        React.createElement("div", {
          className: "c-calendar__row c-calendar__row--ghost" }, /*#__PURE__*/

        React.createElement("div", { className: "c-calendar__cell" }, /*#__PURE__*/
        React.createElement("button", {
          className: "c-button c-button--ghost",
          type: "button" }, /*#__PURE__*/

        React.createElement("span", {
          className: "c-button__icon",
          dangerouslySetInnerHTML: {
            __html: feather.toSvg('plus', FEATHER_OPTS) } }), "Add an event"))));







    }
  }}
;

class Checkbox extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("span", {
        role: "checkbox",
        "aria-checked": this.props.checked,
        className: "c-checkbox",
        onClick: this.props.onClick,
        onKeyPress: this.props.onKeyPress,
        tabIndex: "0",
        ref: "checkbox",
        dangerouslySetInnerHTML: {
          __html: feather.toSvg("check", FEATHER_OPTS) } }));



  }}


class IconButton extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("button", {
        className: 'c-button c-button--icon c-button--' + this.props.icon,
        type: "button",
        "aria-label": this.props.label,
        onClick: this.props.onClick,
        ref: "button",
        dangerouslySetInnerHTML: {
          __html: feather.toSvg(this.props.icon, FEATHER_OPTS) } }));



  }}


const root = document.getElementById("root");
ReactDOM.render( /*#__PURE__*/React.createElement(Calendar, { events: data }), root);
//# sourceURL=pen.js
    </script>
</body>
</html>