JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<div style="display: table;" id="calendarYearContainer">

  <div class="navigation">

    <label for="">Action : </label><select name="bookAction" id="bookAction">
<option value="toggle" selected="selected">Toggle</option>
<option value="B">Set to Booked</option>
<option value="A">Set to Available</option>
<option value="U">Set to Unavailable</option>
</select><a id="calPrevious" href="#">≪2018</a><label name="2019" id="calendarYear" for="">2019</label><a id="calNext" href="#">2020≫</a> </div>

  <div class="calendarContainer" id="cc1">
    <table class="calendar" cellspacing="0" style="border-spacing: 7!important; padding-left: 0px; background: #FEFFF2;">
      <thead>
        <tr class="month-year-row">
          <th colspan="8" class="week">January, 2019</th>
        </tr>
        <tr class="weekdays-row">
          <th>&nbsp;</th>
          <th class="week">Sat</th>
          <th class="week">Sun</th>
          <th class="week">M</th>
          <th class="week">T</th>
          <th class="week">W</th>
          <th class="week">T</th>
          <th class="week">F</th>

        </tr>
      </thead>
      <tbody>
        <tr>
          <td>&nbsp;</td>
          <td class=" calendar-selected-day"> </td>
          <td class=" calendar-selected-day"> </td>
          <td class=" calendar-selected-day" id="2019-01-01"><a class="free simpleCal" href="#">1</a> </td>
          <td class="" id="2019-01-02"><a class="free simpleCal" href="#">2</a> </td>
          <td class="" id="2019-01-03"><a class="free simpleCal" href="#">3</a> </td>
          <td class="" id="2019-01-04"><a class="free simpleCal" href="#">4</a> </td>
          <td class="" id="2019-01-05"><a class="free simpleCal" href="#">5</a> </td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td class="weekStart" id="2019-01-06"><a class="free simpleCal" href="#">6</a> </td>
          <td class="" id="2019-01-07"><a...

CSS

.calendarContainer {
  width: 270px;
  height: auto;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
  border: 1px cadetblue solid;
  font-size: 12px;
}

.calendar tr {
  margin-left: 10px;
}

.calendar th,
.calendar td {
  /* */
  padding: 4px;
  color: #FFF;
}

.calendar th.week {
  text-align: center;
  color: #333;
  font-family: sans-serif;
}

.calendar .weekdays-row th {
  background-color: #fff;
}

.calendar .weekStart a {
  background: #811D77
}

.calendar .calendar-selected-day {
  font-weight: bold;
}

.calendar tr:hover {
  background: #aa7ba6
}

a.simpleCal {
  text-align: center;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -khtml-border-radius: 4px;
  border-radius: 4px;
  padding: 0px;
  width: 28px;
  height: 28px;
  display: block;
  margin: 5px 0px 5px 0px;
  text-decoration: none;
  font-weight: bold;
  line-height: 25px;
}

a.booked {
  background-color: #CC0000;
  color: #FFF !important;
}

a.free {
  background-color: #669933;
  color: #FFF !important;
}

a.unavail {
  background-color: darkorange;
  color: #FFF !important;
}

a.inprogress {
  background-color: #669933;
  color: #FBA601 !important;
}

JavaScript

$('a').on('click', function() {
  $this = $(this);
  alert('Start Date: ' + $this.parents('tr').children('.weekStart').attr('id'));


});