JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<div ng-app="app">
  <div ng-controller=mainCtrl ng-cloak>
    {{data.test}}
    <table>
      <thead>

      </thead>
      <tr>
        <th ng-repeat="d in data.days">{{d}}</th>
      </tr>
      <tbody>
        <tr ng-repeat="r in [].constructor(6) track by $index">
          <td ng-repeat="d in [].constructor(7) track by $index" class="{{data.classes[$parent.$index*7 + $index]}}">
            {{set_date($parent.$index, $index)}}
          </td>
        </tr>
      </tbody>
    </table>


    <br /><br /><br />

    <table>
      <thead>

      </thead>
      <tr>
        <th></th>
        <th ng-repeat="d in data.days">{{d}}</th>
      </tr>
      <tbody>
        <tr ng-repeat="r in [].constructor(23) track by $index">
          <td> {{data.times[$index]}}</td>
          <td ng-repeat="t in [].constructor(7) track by $index" class="">
{{set_time($parent.$index, $index)}}
          </td>
        </tr>
      </tbody>
    </table>


    <br /><br /><br />

    <table>
      <thead>

      </thead>
      <tr>
        <th></th>
        <th style="width:85%;">{{data.todate}}</th>
      </tr>
      <tbody>
        <tr ng-repeat="r in [].constructor(23) track by $index">
          <td> {{data.times[$index]}}</td>
          <td class="">

          </td>
        </tr>
      </tbody>
    </table>

  </div>
  <div>

CSS

.normal-days{
  
}

.prevmonth-days, .nextmonth-days {
  background: grey;
}

.today {
  background: lightgreen;
}

JavaScript

var app = angular.module('app', []);

app.controller('mainCtrl', function($scope) {
  $scope.data = {
    todate: new Date(),
    date: new Date(2020, 09, 01),
    days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
    months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
    shortMonths: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    classes: [],
    times:[]
  };

  $scope.data.month = $scope.data.date.getMonth();
  $scope.data.year = $scope.data.date.getFullYear();
  $scope.data.first = new Date($scope.data.year, $scope.data.month, 1);
  $scope.data.last = new Date($scope.data.year, $scope.data.month + 1, 0);
  $scope.data.startingDay = $scope.data.first.getDay();
  $scope.data.lastDay = $scope.data.last.getDay();
  $scope.data.toDay = $scope.data.date.getDay();
  $scope.data.lastDate = $scope.data.last.getDate();

  $scope.data.prev_monthlast = new Date($scope.data.year, $scope.data.month, 0);
  $scope.data.prev_lastDay = $scope.data.prev_monthlast.getDay();
  $scope.data.prev_lastDate = $scope.data.prev_monthlast.getDate();


  $scope.set_date = function(par_ind, ind) {
    var f = 7;
    var d = par_ind * f + ind + 1;

    var c_ind = d - 1;

    $scope.data.classes[c_ind] = 'normal-days';

    if ($scope.data.startingDay > 0) {
      d = d - $scope.data.startingDay;
    }

    if (d > $scope.data.lastDate) {
      d = d - $scope.data.lastDate;
      $scope.data.classes[c_ind] = 'nextmonth-days';
    }

    if (d < 1) {
      d = d + $scope.data.prev_lastDate;
      $scope.data.classes[c_ind] = 'prevmonth-days';
    }

    if (d === $scope.data.todate.getDate() && $scope.data.month === $scope.data.todate.getMonth() && $scope.data.year === $scope.data.todate.getFullYear()) {
      $scope.data.classes[c_ind] = 'today';
    }

    return d;
  };
  
 

  $scope.set_time = function(par_ind, ind) {
    var t =...