React Forms:

React Date Picker Form Element

To select the date, you can use the forms that have been prepared for this purpose. In this post we have a form to select the date. This form has a blue theme. It is possible to put an event in any date that is selected. This calendar was created with the help of React. Each day is chosen to have a blue and circular background.

Free Calendar Form Code

React Date Element

HTML Date Form Code

Pick Date by React JS

<!-- This script got from frontendfreecode.com -->
<div class="outer">
    <div id="root"></div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

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;
}

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" }, "\u2192")), /*#__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"));

<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>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<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>
<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><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<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" }, "\u2192")), /*#__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"));
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS