JSFiddle - React, Tailwind, and code Playground

HTML

<label for="">
  <input type="checkbox" class="js-dow js-weekday">月曜</label>
<label for="">
  <input type="checkbox" class="js-dow js-weekday">火曜</label>
<label for="">
  <input type="checkbox" class="js-dow js-weekday">水曜</label>
<label for="">
  <input type="checkbox" class="js-dow js-weekday">木曜</label>
<label for="">
  <input type="checkbox" class="js-dow js-weekday">金曜</label>
<label for="">
  <input type="checkbox" class="js-dow js-holiday">土曜</label>
<label for="">
  <input type="checkbox" class="js-dow js-holiday">日曜</label>
<label for="">
  <input type="checkbox" class="js-dow js-holiday js-nh">祝日</label>
<label for="">
  <input type="checkbox" id="selectHolidays">土日祝日</label>
<label for="">
  <input type="checkbox" id="selectWeekdays">平日</label>
<table id="t1">
  <tr>
    <th class="js-dow">mon</th>
    <th class="js-dow">tue</th>
    <th class="js-dow">wed</th>
    <th class="js-dow">thu</th>
    <th class="js-dow">fri</th>
    <th class="js-dow">sat</th>
    <th class="js-dow">sun</th>
  </tr>
  <tr>
    <td class="js-national-holiday">1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>8</td>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
  </tr>
  <tr>
    <td>15</td>
    <td>16</td>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
    <td>21</td>
  </tr>
  <tr>
    <td>22</td>
    <td>23</td>
    <td>24</td>
    <td>25</td>
    <td>26</td>
    <td>27</td>
    <td>28</td>
  </tr>
</table>

CSS

table {
     border-collapse: collapse;
     display: table;
   }
   
   tr {}
   
   th,
   td {
     border: solid 1px #ccc;
   }
   
   td {
     width: 25px;
     text-align: right;
   }
   
   .selected {
     color: red;
   }
   
   .js-national-holiday {
     background: #efefef;
   }

JavaScript

$(function() {
  var cell = $('#t1 td');
  cell.on("click", function() {
    if (!$(this).parent().hasClass('.disable') && !$(this).hasClass('selected')) {
      $(this).addClass('selected');
    } else if (!$(this).parent().hasClass('disable') && $(this).hasClass('selected')) {
      $(this).removeClass('selected');
    }
  });

  $(".js-dow").on("change", function() {
    var flg = $(this).prop('checked');
    var dow = $(".js-dow").index(this);
    $("#t1 tr").each(function() {
      $(this).find('td').eq(dow).toggleClass('selected', flg);
    });
  }).change();

  $(".js-nh").on("change", function() {
    var flg = $(this).prop('checked');
    var nh = $(".js-nh").index(this);
    var hol = $(".js-national-holiday");
    $("#t1 tr").each(function() {
      $(this).find(hol).eq(nh).toggleClass('selected', flg);
    });
  }).change();

  var selectHolidays = $("#selectHolidays");
  selectHolidays.on('click', function() {
    var dow = selectHolidays.index(this);
    if (selectHolidays.is(':checked')) {
      $('.js-holiday').prop('checked', true).change();
    } else {
      $('.js-holiday').prop('checked', false).change();
    }
  });

  var selectWeekdays = $("#selectWeekdays");
  selectWeekdays.on('click', function() {
    var dow = selectWeekdays.index(this);
    if (selectWeekdays.is(':checked')) {
      $('.js-weekday').prop('checked', true).change();
    } else {
      $('.js-weekday').prop('checked', false).change();
    }
  });

});