JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="scheduler">
  <div class="calendar-container">
        <header class="calendar-header">
            <p class="calendar-current-date"></p>
            <ul class="status-legend">
              <li data-status="Staged">Staged</li>
              <li data-status="Data Collection">Data Collection</li>
              <li data-status="Published">Published</li>
              <li data-status="Corrective Action Processing">Corrective Action Processing</li>
              <li data-status="Review">Review</li>
              <li data-status="Closed">Closed</li>
              <li data-status="Archived">Archived</li>
            </ul>
            <div class="calendar-navigation">
                <span id="calendar-prev"
                      class="material-symbols-rounded">
                    &lt;
                </span>
                <span id="calendar-next"
                      class="material-symbols-rounded">
                   &gt;
                </span>
            </div>
        </header>
 
        <div class="calendar-body">
            <ul class="calendar-weekdays">
                <li>Sun</li><li>Mon</li><li>Tue</li><li>Wed</li><li>Thu</li><li>Fri</li><li>Sat</li>
            </ul>
            <ul class="calendar-dates"></ul>
        </div>
    </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

html{
  height: 100%;
}
body{
  font-family: 'Roboto', sans-serif;
  height: 100%;
    margin: 0px;
    background-image: url(https://agrisphere-portal.com/live/images/defaultbg.jpg);
    background-size: cover;
    background-position: center bottom;
}

.scheduler{
  position: fixed;
  bottom:0px;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 99999999;
  background-color: rgba(0,0,0,0.6);
  background-image: url(https://agrisphere-portal.com/live/images/defaultbg.jpg);
    background-size: cover;
    background-position: center bottom;
    overflow:auto;
}

.scheduler .calendar-container {
    background: rgba(0,0,0,0.5);
    padding-bottom: 20px;
    height: 100%;
}
 
.scheduler .calendar-container header {
    padding: 10px;
    position: relative;
}
 .scheduler .calendar-container header>p{
    margin:0px;
    color:#fff;
    font-size: 23px;
}
.scheduler .calendar-navigation{
    width: 90px;
    text-align: right;
    position: absolute;
    top: 4px;
    right: 18px;
}
.scheduler header .calendar-navigation span {
    height: 38px;
    width: 38px;
    margin: 0 1px;
    cursor: pointer;
    text-align: center;
    line-height: 38px;
    border-radius: 50%;
    user-select: none;
    color: #aeabab;
    font-size: 21px;
    display: inline-block;
    color:#fff;
}
 
.scheduler .calendar-navigation span:last-child {
    margin-right: -10px;
}
 
.scheduler header .calendar-navigation span:hover {
    background: #f2f2f2;
    color:#000;
}
 
.scheduler header .calendar-current-date {
    font-weight: 500;
    font-size: 15px;
}
 
.scheduler .calendar-body {
    padding: 0px;
    clear:both;
}
 
.scheduler .calendar-body ul {
    display: block;
    text-align: center;
    list-style: none;
    margin: 0px;
    padding: 0px;
}
 
.scheduler .calendar-body .calendar-dates {
    margin-bottom: 20px;
    background-color: #bbb;
}
 
.scheduler .calendar-body li {
    width: calc((100%...

JavaScript

function Scheduler(){

	var t = this;


  let date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth();

  const day = document.querySelector(".calendar-dates");

  const currdate = document
      .querySelector(".calendar-current-date");

  const prenexIcons = document
      .querySelectorAll(".calendar-navigation span");

  // Array of month names
  const months = [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December"
  ];

  // Function to generate the calendar
  const manipulate = () => {

      // Get the first day of the month
      let dayone = new Date(year, month, 1).getDay();

      // Get the last date of the month
      let lastdate = new Date(year, month + 1, 0).getDate();

      // Get the day of the last date of the month
      let dayend = new Date(year, month, lastdate).getDay();

      // Get the last date of the previous month
      let monthlastdate = new Date(year, month, 0).getDate();

      // Variable to store the generated calendar HTML
      let lit = "";

      // Loop to add the last dates of the previous month
      for (let i = dayone; i > 0; i--) {
          lit +=
              `<li class="inactive"><span>${monthlastdate - i + 1}</span></li>`;
      }

      // Loop to add the dates of the current month
      for (let i = 1; i <= lastdate; i++) {

          // Check if the current date is today
          let isToday = i === date.getDate()
              && month === new Date().getMonth()
              && year === new Date().getFullYear()
              ? "active"
              : "";

          let rm = parseInt(month+1) + '';
          let rd = i + '';

          let timestamp =  year + '-' + rm.padStart(2, '0') + '-' +  rd.padStart(2, '0');

          lit += `<li class="${isToday}" data-timestamp="${timestamp}"><span>${i}</span></li>`;
      }

      // Loop to add the...