JSFiddle - React, Tailwind, and code Playground

by surista

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Calendar</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
        integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

</head>
<body>

<div class="container col-sm-4 col-md-7 col-lg-4 mt-5">
  <div class="card">
    <h3 class="card-header" id="test-monthAndYear"></h3>
    <table class="table table-bordered table-responsive-sm" id="test-calendar">
      <thead>
      <tr>
        <th>Sun</th>
        <th>Mon</th>
        <th>Tue</th>
        <th>Wed</th>
        <th>Thu</th>
        <th>Fri</th>
        <th>Sat</th>
      </tr>
      </thead>

      <tbody id="test-calendar-body">

      </tbody>
    </table>
    <div class="form-inline">

      <button class="btn btn-outline-primary col-sm-6" id="previous" onclick="previousWeek()">Previous</button>

      <button class="btn btn-outline-primary col-sm-6" id="next" onclick="nextWeek()">Next</button>
    </div>
    <br/>
  </div>

<!-- <script src="./js/utils.js"></script>
 -->
<!-- Optional JavaScript for bootstrap -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
        integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
        integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
       ...

JavaScript

// Returns the number of days in the given month and year
function daysMonth(xMonth, xYear) {
  daysInCurrentMonth = 32 - new Date(xYear, xMonth, 32).getDate();
  return daysInCurrentMonth;
}


today = new Date();

// show current Sun-Sat week
function showWeek(today) {
  console.log("Today from showWeek function: " + today);
  let currentDate = today.getDate();
  let currentDay = today.getDay();
  let currentMonth = today.getMonth();
  let currentYear = today.getFullYear();
  let daysInMonth = daysMonth(currentMonth, currentYear);
  let currentSunday = currentDate - currentDay;

  let test_table = document.getElementById("test-calendar");
  tbl_body = document.getElementById("test-calendar-body"); // body of the calendar

  // always only show one row
  if (test_table.rows.length == 2) {
    test_table.deleteRow(1);
  }

  let test_row = test_table.insertRow(1);

  for (let i = 0; i < 7; i++) {
    let cell = test_row.insertCell(i);
    if ((currentSunday + i) <= daysInMonth) {
      cell.innerHTML = (currentSunday + i);
    }
    else {
      cell.innerHTML = (currentSunday + i) % daysInMonth;
    }
  }
}


showWeek(today);

// fuctions to move current sunday back / forwards
function addDays(dateObj, numDays) {
  dateObj.setDate(dateObj.getDate() + numDays);
  return dateObj;
}

function nextWeek(currentSunday) {
  today = addDays(new Date(), 7);
  showWeek(today);
}

function previousWeek(currentSunday) {
  today = addDays(new Date(), -7);
  showWeek(today);
}