JSFiddle - React, Tailwind, and code Playground

by surista

HTML

<script src="https://momentjs.com/downloads/moment.min.js"></script>
<!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>


<hr>
<div class="container col-sm-4 col-md-7 col-lg-4 mt-5">
  <div class="card">
    <h3 class="card-header" id="monthAndYear"></h3>
    <table class="table table-bordered table-responsive-sm" id="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="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>
  <!--<button name="jump" onclick="jump()">Go</button>-->
  <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"
         ...

JavaScript

function showDays(startDay){
  let start = moment(startDay);
  window.SelectedSunday = start; // save it for future use

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

  // display month and year in table header
  let monthAndYear = document.getElementById("monthAndYear");
  monthAndYear.innerHTML = start.format('MMM YYYY');

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

  let row = table.insertRow(1);

  day = start.format('DD'); // Get day
  let cell = row.insertCell(0);
  cell.innerHTML = day;

  for(let i = 1; i < 7; i++){
    // iterate through days of week
    start.add(1, 'days');
    day = start.format('DD'); // Get day
    let cell = row.insertCell(i);
    cell.innerHTML = day;
  }
}

function nextWeek() {
  window.SelectedSunday.add(1, 'days');
  showDays(window.SelectedSunday);
}

function previousWeek() {
  window.SelectedSunday.add(-13, 'days');
  showDays(window.SelectedSunday);
}

window.SelectedSunday = null;
let currentSunday = moment().startOf('week');

showDays(currentSunday);