CodePen Embed - React Calendar component simple

<div id="root"></div>

$primary: #555;
$secondary: #fff;
$fontsize: 14px;
$fontsans: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen",
  "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica",
  "Arial", sans-serif;
$fontweight: 400;
$letterspacing: 0.4px;
$lineheight: 1.5;

::-webkit-scrollbar{height:8px;width:8px;background:$secondary;}
::-webkit-scrollbar-thumb{background:$primary;}

* {
  box-sizing: border-box;
}

html,
body {
  position: relative;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: $fontsans;
  font-size: $fontsize;
  font-weight: $fontweight;
  letter-spacing: $letterspacing;
  line-height: $lineheight;
}

.calendar {

  width: 100%;

  .header {
    height: 4rem;
    line-height: 4rem;
    text-align: center;

    background: darken($primary, 10%);
    color: $secondary;

    .left,
    .center,
    .right {
      width: calc(100% / 3 - 1rem);
      float: left;

      h1 {
        line-height: 1.8rem;
        font-size: 25px;
        text-transform:uppercase;
      }

      button {
        background-color: darken($primary, 15%);
        border: 1px solid darken($primary, 20%);
        color: $secondary;
        padding: 0.5rem 1rem;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 0 4px;
        cursor: pointer;
        transition: all 500ms ease;

        &:hover {
          background-color: darken($primary, 12%);
          border-color: darken($primary, 12%);
          color: $secondary;
          transition: all 500ms ease;
        }
      }
    }
  }

  .days,
  .weekdays {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;

    li {
      display: block;
      float: left;
      width: calc(100% / 7);
      padding: 5px;
      box-sizing: border-box;
    }
  }

  .weekdays {
    height: 40px;
    background: darken($primary, 15%);
    border-bottom: 2px solid darken($primary, 20%);

    li {
      text-align: center;
      text-transform: uppercase;
      line-height: 20px;
      border: none !important;
      padding: 10px 6px;
      color: $secondary;
      font-size: 13px;
      font-weight: bold;
    }

    .today {
      background: darken($primary, 20%);
      color: $secondary;
    }
  }

  .days {
    li {
      height: 150px;
      overflow-y: auto;
      background: $secondary;
      position: relative;
      color: darken($primary, 20%);
      border: 1px solid darken($secondary, 5%);
			cursor:pointer;
      .info {
        position: absolute;
        bottom: 2px;
        right: 2px;
        z-index:1;
        opacity: 0;
      }
      .date {
        text-align: center;
        margin-bottom: 5px;
        background: lighten($primary, 15%);
        color: $secondary;
        width: 25px;
        height: 25px;
        line-height: 25px;
        border-radius: 50%;
        float: right;
        font-size: 12px;
        font-weight: bold;
        z-index:2;
      }
    }
    
    .days-before{background: darken($secondary, 3%)}
    .days-after{background: darken($secondary, 3%)}
    .today {
      background: darken($secondary, 10%);
      .date{
         background: $primary
      }
    }
  }
}

.ev {
  display: block;
  background: lighten($primary, 40%);
  border: 1px solid lighten($primary, 30%);
  border-radius: 4px;
  margin: 5px auto;
  transition: background 500ms ease;
}
.ev:hover {
  opacity:0.5;
  transition: opacity 500ms ease;
}
.ev-desc {
  padding: 0.2rem 0.5rem;
  font-size:12px;
}
.label_info{
  background:aqua;
  border:1px solid aqua;
  color:black;
}
.label_warning{
  background:yellow;
  border:1px solid yellow; 
  color:black;
}
.label_primary{
  background:blue;
  border:1px solid darkblue;
  color:white;
}

@media (max-width: 1024px) { 
	.right{display:none;}
.calendar .header .left, 
	.calendar .header .center{
		width:calc(100%/2 - 1rem)
	}
}
@media (max-width: 768px) {

  .calendar {
    
    .header {
      height: auto;
      text-align: center;
      padding: 1rem;

      .left,
      .center,
      .right {
        width: 100%;
        float: none;
      }
    }
    
    .weekdays,
    .null {
      display: none !important;
    }

    .days li {
      height: auto !important;
      border: 1px solid darken($secondary, 5%);
      width: 100%;
      padding: 10px;
      margin-bottom: -1px;
      .info {
        left: 2px;
        opacity: 1;
        color: lighten($primary, 35%);
      }
    }
    .date {
      float: none;
    }
  }
}

View Compiled

const { Fragment, useState, useEffect,useCallback } = React;

const jsonDataDemo = '[{"id":1,"date":"2024-01-08","hour":"8:30","content":"Ploceus rubiginosus","source":"http://dummyimage.com/149x100.png/5fa2dd/ffffff","type":"warning"},{"id":2,"date":"2024-08-14","hour":"10:25","content":"Mazama gouazoubira","source":"http://dummyimage.com/233x100.png/ff4444/ffffff","type":"warning"},{"id":3,"date":"2024-11-22","hour":"7:14","content":"Estrilda erythronotos","source":"http://dummyimage.com/219x100.png/dddddd/000000","type":"info"},{"id":4,"date":"2024-12-11","hour":"1:57","content":"Canis lupus lycaon","source":"http://dummyimage.com/246x100.png/dddddd/000000","type":"info"},{"id":5,"date":"2024-07-09","hour":"23:37","content":"Panthera tigris","source":"http://dummyimage.com/135x100.png/dddddd/000000","type":"primary"},{"id":6,"date":"2024-08-10","hour":"1:08","content":"Tamandua tetradactyla","source":"http://dummyimage.com/176x100.png/cc0000/ffffff","type":"primary"},{"id":7,"date":"2024-05-04","hour":"10:28","content":"Eutamias minimus","source":"http://dummyimage.com/216x100.png/dddddd/000000","type":"primary"},{"id":8,"date":"2024-07-28","hour":"5:41","content":"Gekko gecko","source":"http://dummyimage.com/149x100.png/cc0000/ffffff","type":"primary"},{"id":9,"date":"2024-12-11","hour":"20:56","content":"Gyps bengalensis","source":"http://dummyimage.com/134x100.png/ff4444/ffffff","type":"primary"},{"id":10,"date":"2024-04-30","hour":"5:00","content":"Zosterops pallidus","source":"http://dummyimage.com/165x100.png/5fa2dd/ffffff","type":"warning"},{"id":11,"date":"2024-06-20","hour":"21:21","content":"Cynictis penicillata","source":"http://dummyimage.com/234x100.png/5fa2dd/ffffff","type":"info"},{"id":12,"date":"2024-01-08","hour":"12:09","content":"Vanessa indica","source":"http://dummyimage.com/201x100.png/dddddd/000000","type":"info"},{"id":13,"date":"2024-07-18","hour":"12:14","content":"Naja nivea","source":"http://dummyimage.com/138x100.png/ff4444/ffffff","type":"info"},{"id":14,"date":"2024-03-13","hour":"2:04","content":"Cyrtodactylus louisiadensis","source":"http://dummyimage.com/130x100.png/5fa2dd/ffffff","type":"warning"},{"id":15,"date":"2024-02-23","hour":"11:51","content":"Varanus sp.","source":"http://dummyimage.com/188x100.png/5fa2dd/ffffff","type":"info"},{"id":16,"date":"2024-11-04","hour":"12:27","content":"Varanus komodensis","source":"http://dummyimage.com/221x100.png/5fa2dd/ffffff","type":"warning"},{"id":17,"date":"2024-09-02","hour":"17:55","content":"Panthera leo","source":"http://dummyimage.com/177x100.png/dddddd/000000","type":"warning"},{"id":18,"date":"2024-01-22","hour":"3:39","content":"Varanus komodensis","source":"http://dummyimage.com/228x100.png/ff4444/ffffff","type":"info"},{"id":19,"date":"2024-11-11","hour":"10:02","content":"Zosterops pallidus","source":"http://dummyimage.com/179x100.png/ff4444/ffffff","type":"warning"},{"id":20,"date":"2024-06-22","hour":"5:52","content":"Eolophus roseicapillus","source":"http://dummyimage.com/153x100.png/cc0000/ffffff","type":"info"},{"id":21,"date":"2024-02-07","hour":"20:56","content":"Struthio camelus","source":"http://dummyimage.com/236x100.png/dddddd/000000","type":"warning"},{"id":22,"date":"2024-01-03","hour":"0:15","content":"Motacilla aguimp","source":"http://dummyimage.com/179x100.png/ff4444/ffffff","type":"primary"},{"id":23,"date":"2024-01-12","hour":"5:04","content":"Alcelaphus buselaphus cokii","source":"http://dummyimage.com/134x100.png/cc0000/ffffff","type":"warning"},{"id":24,"date":"2024-12-17","hour":"1:44","content":"Trichosurus vulpecula","source":"http://dummyimage.com/124x100.png/ff4444/ffffff","type":"warning"},{"id":25,"date":"2024-01-27","hour":"0:36","content":"Dasypus septemcincus","source":"http://dummyimage.com/232x100.png/5fa2dd/ffffff","type":"info"},{"id":26,"date":"2024-01-22","hour":"0:26","content":"Nyctea scandiaca","source":"http://dummyimage.com/192x100.png/ff4444/ffffff","type":"primary"},{"id":27,"date":"2024-08-19","hour":"16:13","content":"Dasyurus maculatus","source":"http://dummyimage.com/242x100.png/dddddd/000000","type":"primary"},{"id":28,"date":"2024-04-22","hour":"22:50","content":"Aonyx capensis","source":"http://dummyimage.com/117x100.png/5fa2dd/ffffff","type":"primary"},{"id":29,"date":"2024-08-10","hour":"19:22","content":"Ursus arctos","source":"http://dummyimage.com/152x100.png/5fa2dd/ffffff","type":"warning"},{"id":30,"date":"2024-07-05","hour":"16:18","content":"Anastomus oscitans","source":"http://dummyimage.com/234x100.png/ff4444/ffffff","type":"warning"},{"id":31,"date":"2024-10-20","hour":"18:51","content":"Pycnonotus nigricans","source":"http://dummyimage.com/197x100.png/dddddd/000000","type":"warning"},{"id":32,"date":"2024-07-03","hour":"23:22","content":"Macropus rufus","source":"http://dummyimage.com/238x100.png/dddddd/000000","type":"warning"},{"id":33,"date":"2024-10-19","hour":"2:43","content":"Merops nubicus","source":"http://dummyimage.com/217x100.png/cc0000/ffffff","type":"info"},{"id":34,"date":"2024-05-21","hour":"3:54","content":"Corallus hortulanus cooki","source":"http://dummyimage.com/182x100.png/cc0000/ffffff","type":"primary"},{"id":35,"date":"2024-10-08","hour":"9:31","content":"Theropithecus gelada","source":"http://dummyimage.com/147x100.png/dddddd/000000","type":"info"},{"id":36,"date":"2024-01-18","hour":"21:56","content":"Lycosa godeffroyi","source":"http://dummyimage.com/200x100.png/cc0000/ffffff","type":"primary"},{"id":37,"date":"2024-08-16","hour":"14:56","content":"Stercorarius longicausus","source":"http://dummyimage.com/169x100.png/5fa2dd/ffffff","type":"info"},{"id":38,"date":"2024-02-18","hour":"15:30","content":"Gymnorhina tibicen","source":"http://dummyimage.com/146x100.png/cc0000/ffffff","type":"info"},{"id":39,"date":"2024-08-05","hour":"19:00","content":"Felis caracal","source":"http://dummyimage.com/138x100.png/5fa2dd/ffffff","type":"primary"},{"id":40,"date":"2024-03-21","hour":"0:44","content":"Sylvicapra grimma","source":"http://dummyimage.com/179x100.png/ff4444/ffffff","type":"warning"},{"id":41,"date":"2024-04-03","hour":"0:32","content":"Tachyglossus aculeatus","source":"http://dummyimage.com/221x100.png/ff4444/ffffff","type":"warning"},{"id":42,"date":"2024-01-04","hour":"10:24","content":"Conolophus subcristatus","source":"http://dummyimage.com/189x100.png/cc0000/ffffff","type":"info"},{"id":43,"date":"2024-07-14","hour":"21:52","content":"Uraeginthus granatina","source":"http://dummyimage.com/229x100.png/ff4444/ffffff","type":"primary"},{"id":44,"date":"2024-02-06","hour":"4:03","content":"Corythornis cristata","source":"http://dummyimage.com/126x100.png/5fa2dd/ffffff","type":"primary"},{"id":45,"date":"2024-10-08","hour":"4:49","content":"Crotaphytus collaris","source":"http://dummyimage.com/109x100.png/cc0000/ffffff","type":"primary"},{"id":46,"date":"2024-01-12","hour":"7:51","content":"Parus atricapillus","source":"http://dummyimage.com/191x100.png/cc0000/ffffff","type":"info"},{"id":47,"date":"2024-09-06","hour":"21:51","content":"Dasypus novemcinctus","source":"http://dummyimage.com/206x100.png/ff4444/ffffff","type":"primary"},{"id":48,"date":"2024-02-23","hour":"21:02","content":"Diomedea irrorata","source":"http://dummyimage.com/127x100.png/5fa2dd/ffffff","type":"info"},{"id":49,"date":"2024-12-14","hour":"19:09","content":"Canis aureus","source":"http://dummyimage.com/142x100.png/dddddd/000000","type":"info"},{"id":50,"date":"2024-11-11","hour":"21:17","content":"Alopex lagopus","source":"http://dummyimage.com/240x100.png/dddddd/000000","type":"warning"},{"id":51,"date":"2024-07-13","hour":"1:43","content":"Martes americana","source":"http://dummyimage.com/217x100.png/5fa2dd/ffffff","type":"primary"},{"id":52,"date":"2024-04-28","hour":"11:51","content":"Phalacrocorax brasilianus","source":"http://dummyimage.com/211x100.png/dddddd/000000","type":"info"},{"id":53,"date":"2024-05-16","hour":"3:25","content":"Spheniscus mendiculus","source":"http://dummyimage.com/239x100.png/ff4444/ffffff","type":"primary"},{"id":54,"date":"2024-10-18","hour":"19:21","content":"Dasyurus viverrinus","source":"http://dummyimage.com/131x100.png/cc0000/ffffff","type":"info"},{"id":55,"date":"2024-03-06","hour":"21:10","content":"unavailable","source":"http://dummyimage.com/237x100.png/cc0000/ffffff","type":"warning"},{"id":56,"date":"2024-05-07","hour":"20:14","content":"Snycerus caffer","source":"http://dummyimage.com/224x100.png/cc0000/ffffff","type":"info"},{"id":57,"date":"2024-04-15","hour":"3:00","content":"Francolinus coqui","source":"http://dummyimage.com/110x100.png/cc0000/ffffff","type":"warning"},{"id":58,"date":"2024-10-04","hour":"12:33","content":"Nyctea scandiaca","source":"http://dummyimage.com/182x100.png/cc0000/ffffff","type":"primary"},{"id":59,"date":"2024-12-20","hour":"23:58","content":"Certotrichas paena","source":"http://dummyimage.com/170x100.png/5fa2dd/ffffff","type":"warning"},{"id":60,"date":"2024-09-06","hour":"6:17","content":"Coendou prehensilis","source":"http://dummyimage.com/244x100.png/cc0000/ffffff","type":"warning"},{"id":61,"date":"2024-03-01","hour":"13:48","content":"Lutra canadensis","source":"http://dummyimage.com/213x100.png/cc0000/ffffff","type":"warning"},{"id":62,"date":"2024-02-03","hour":"12:22","content":"Trichosurus vulpecula","source":"http://dummyimage.com/116x100.png/5fa2dd/ffffff","type":"info"},{"id":63,"date":"2024-10-30","hour":"9:24","content":"Marmota caligata","source":"http://dummyimage.com/130x100.png/ff4444/ffffff","type":"primary"},{"id":64,"date":"2024-04-04","hour":"20:36","content":"Fregata magnificans","source":"http://dummyimage.com/214x100.png/5fa2dd/ffffff","type":"primary"},{"id":65,"date":"2024-02-10","hour":"16:26","content":"Macaca radiata","source":"http://dummyimage.com/185x100.png/dddddd/000000","type":"info"},{"id":66,"date":"2024-03-30","hour":"23:43","content":"Microcebus murinus","source":"http://dummyimage.com/137x100.png/dddddd/000000","type":"primary"},{"id":67,"date":"2024-12-25","hour":"8:01","content":"Phylurus milli","source":"http://dummyimage.com/230x100.png/dddddd/000000","type":"info"},{"id":68,"date":"2024-06-12","hour":"10:05","content":"Melursus ursinus","source":"http://dummyimage.com/139x100.png/5fa2dd/ffffff","type":"info"},{"id":69,"date":"2024-01-26","hour":"16:17","content":"Carduelis uropygialis","source":"http://dummyimage.com/240x100.png/ff4444/ffffff","type":"info"},{"id":70,"date":"2024-05-29","hour":"0:03","content":"Coluber constrictor","source":"http://dummyimage.com/229x100.png/cc0000/ffffff","type":"info"},{"id":71,"date":"2024-02-23","hour":"13:10","content":"Cygnus buccinator","source":"http://dummyimage.com/107x100.png/ff4444/ffffff","type":"info"},{"id":72,"date":"2024-04-05","hour":"5:26","content":"Macropus rufus","source":"http://dummyimage.com/167x100.png/dddddd/000000","type":"primary"},{"id":73,"date":"2024-05-29","hour":"11:34","content":"Calyptorhynchus magnificus","source":"http://dummyimage.com/238x100.png/cc0000/ffffff","type":"warning"},{"id":74,"date":"2024-04-13","hour":"15:26","content":"Ictonyx striatus","source":"http://dummyimage.com/215x100.png/dddddd/000000","type":"info"},{"id":75,"date":"2024-01-08","hour":"22:14","content":"Isoodon obesulus","source":"http://dummyimage.com/145x100.png/5fa2dd/ffffff","type":"primary"},{"id":76,"date":"2024-07-11","hour":"23:50","content":"Phascogale calura","source":"http://dummyimage.com/193x100.png/5fa2dd/ffffff","type":"info"},{"id":77,"date":"2024-10-14","hour":"15:15","content":"Hyaena brunnea","source":"http://dummyimage.com/206x100.png/ff4444/ffffff","type":"warning"},{"id":78,"date":"2024-12-08","hour":"0:46","content":"Gymnorhina tibicen","source":"http://dummyimage.com/203x100.png/dddddd/000000","type":"warning"},{"id":79,"date":"2024-03-06","hour":"6:21","content":"Cervus unicolor","source":"http://dummyimage.com/218x100.png/dddddd/000000","type":"warning"},{"id":80,"date":"2024-01-25","hour":"19:37","content":"Sula dactylatra","source":"http://dummyimage.com/101x100.png/cc0000/ffffff","type":"warning"},{"id":81,"date":"2024-03-25","hour":"17:57","content":"Felis concolor","source":"http://dummyimage.com/217x100.png/5fa2dd/ffffff","type":"primary"},{"id":82,"date":"2024-09-29","hour":"1:05","content":"Felis wiedi or Leopardus weidi","source":"http://dummyimage.com/135x100.png/5fa2dd/ffffff","type":"warning"},{"id":83,"date":"2024-09-04","hour":"8:40","content":"Geochelone radiata","source":"http://dummyimage.com/160x100.png/5fa2dd/ffffff","type":"info"},{"id":84,"date":"2024-09-05","hour":"15:01","content":"Alopex lagopus","source":"http://dummyimage.com/105x100.png/dddddd/000000","type":"primary"},{"id":85,"date":"2024-02-27","hour":"3:40","content":"Tursiops truncatus","source":"http://dummyimage.com/151x100.png/ff4444/ffffff","type":"info"},{"id":86,"date":"2024-01-03","hour":"7:55","content":"Panthera leo","source":"http://dummyimage.com/241x100.png/cc0000/ffffff","type":"warning"},{"id":87,"date":"2024-02-01","hour":"3:21","content":"Genetta genetta","source":"http://dummyimage.com/245x100.png/5fa2dd/ffffff","type":"primary"},{"id":88,"date":"2024-07-23","hour":"23:37","content":"Bucephala clangula","source":"http://dummyimage.com/233x100.png/cc0000/ffffff","type":"info"},{"id":89,"date":"2024-06-03","hour":"8:03","content":"Marmota caligata","source":"http://dummyimage.com/234x100.png/dddddd/000000","type":"primary"},{"id":90,"date":"2024-02-27","hour":"20:43","content":"Anthropoides paradisea","source":"http://dummyimage.com/185x100.png/ff4444/ffffff","type":"warning"},{"id":91,"date":"2024-11-01","hour":"23:15","content":"Redunca redunca","source":"http://dummyimage.com/137x100.png/ff4444/ffffff","type":"warning"},{"id":92,"date":"2024-02-25","hour":"15:08","content":"Panthera leo","source":"http://dummyimage.com/207x100.png/5fa2dd/ffffff","type":"primary"},{"id":93,"date":"2024-06-05","hour":"0:17","content":"Nectarinia chalybea","source":"http://dummyimage.com/210x100.png/ff4444/ffffff","type":"warning"},{"id":94,"date":"2024-08-06","hour":"4:17","content":"Eumetopias jubatus","source":"http://dummyimage.com/173x100.png/5fa2dd/ffffff","type":"info"},{"id":95,"date":"2024-03-04","hour":"2:45","content":"Gymnorhina tibicen","source":"http://dummyimage.com/244x100.png/5fa2dd/ffffff","type":"primary"},{"id":96,"date":"2024-02-27","hour":"19:09","content":"Microcebus murinus","source":"http://dummyimage.com/177x100.png/5fa2dd/ffffff","type":"warning"},{"id":97,"date":"2024-06-09","hour":"12:44","content":"Varanus salvator","source":"http://dummyimage.com/107x100.png/ff4444/ffffff","type":"primary"},{"id":98,"date":"2024-10-23","hour":"13:42","content":"Paradoxurus hermaphroditus","source":"http://dummyimage.com/177x100.png/cc0000/ffffff","type":"info"},{"id":99,"date":"2024-06-20","hour":"3:02","content":"Mirounga angustirostris","source":"http://dummyimage.com/116x100.png/dddddd/000000","type":"warning"},{"id":100,"date":"2024-09-25","hour":"5:19","content":"Acridotheres tristis","source":"http://dummyimage.com/144x100.png/ff4444/ffffff","type":"primary"}]';

// ---- spanish
moment.locale("es");

// ---- calendar wrapper
const Calendar = (props) => <div className="calendar">{props.children}</div>;

// ---- calendar header
const Header = (props) => <header className="header">{props.children}</header>;


// ---- column component for calendar header
const Column = (props) => <div className={props.align}>{props.children}</div>;

// ---- button component
const Button = (props) => (
	<button type="button" title={props.text} aria-label={props.text} {...props}>
		{(props.icon) ? (<i className={props.icon}></i>) : props.text}
	</button>
);

// ---- week days
const WeekDays = (props) => {
	let m = moment().weekday();
	// map week names
	return (
		<ul className="weekdays">
			{moment.weekdays(true).map((item, i) => (
				<li key={i.toString()} className={m == i && "today"}>
					{item}
				</li>
			))}
		</ul>
	);
};

// ---- month events
const MonthEvents = (props) =>
	props.data &&
	props.data.map((c) => {
		let arr = c.date.split("-");
		if (arr[0] === props.year && arr[1] === props.month && arr[2] === props.day) {
			return (
				<div className={`ev ${(c.type) && 'label_'+c.type}`} onClick={() => props.fn(c)}>
					<div className="ev-desc">
            <b>{c.content}</b><br/>
            <small style={{display:'block',textAlign:'right'}}>{c.hour}</small>
          </div>
				</div>
			);
		}
	});

// ---- month days
const MonthDays = (props) => {
	// first day
	const first = moment(props.date).date(1),
		// week format
		weekF = moment().format("YYYYMM");

	// get event data
	const handleClick = useCallback((event) => {
		alert(event.date + ": " + event.content);
	});

	// init arr
	let arr = [];

	// create 7 x 5 boxes
	for (let i = 0; i < 35; i++) {
		// day
		let day = moment()
				.date(1)
				.subtract(first.weekday() - i, "days"),
			// day format
			dayF = moment(day.format("YYYYMM")),
			// add class by type
			cls = dayF.isBefore(weekF)
				? "days-before"
				: dayF.isAfter(weekF)
				? "days-after"
				: props.date.clone().isSame(day, "day") && "today";

		// push
		arr.push(
			<li key={i.toString()} className={cls}>
				<div className="date">{day.date()}</div>
				<div className="info">{day.format("dddd")}</div>

				<MonthEvents
					data={props.data}
					day={day.clone().format("DD")}
					month={props.date.clone().format("MM")}
					year={props.date.clone().format("YYYY")}
					fn={handleClick}
				/>
			</li>
		);
	}
	return <ul className="days">{arr}</ul>;
};

// ---- app
function App() {
	// states
	const [data, setdata] = useState(JSON.parse(jsonDataDemo));
	const [month, setMonth] = useState(moment());
  
	// next prev and today buttons
	const next = useCallback(() => {
		setMonth(month.clone().add(1, "month"));
	}, [month]);
  
	const prev = useCallback(() => {
		setMonth(month.clone().subtract(1, "month"));
	}, [month]);
  
	const today = useCallback(() => {
		setMonth(moment());
	}, [month]);
  
	// render
	return (
		<Calendar>
			<Header>
				<Column align="left">
					<Button 
						onClick={prev} 
						icon="fa fa-arrow-left" 
						text={"Anterior"} />
					<Button 
						onClick={today} 
						icon="fa fa-calendar" 
						text={"Hoy"} />
					<Button 
						onClick={next} 
						icon="fa fa-arrow-right" 
						text={"Siguiente"} />
				</Column>
				<Column align="center">
					<h1>{month.format("MMMM")}</h1>
				</Column>
				<Column align="right">
					{moment().format("dddd")} {moment().format("LL")}
				</Column>
			</Header>
			<WeekDays />
			<MonthDays date={month} data={data} />
		</Calendar>
	);
}
// ---- render
ReactDOM.render(<App />, window.root);

View Compiled

This Pen is owned by Moncho Varela on CodePen.

See more by @nakome on CodePen

External CSS

https://use.fontawesome.com/releases/v5.8.2/css/all.css

External CSS

External JavaScript