JSFiddle - React, Tailwind, and code Playground

by ChrisWong

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Calendar Modal -->
<div class="container">
  <div class="row">
    <div class="col-md-12">
        <div class="modal fade " id="calendar-modal">
          <div class="modal-dialog">
            <div class="modal-content">
               
              <div class="modal-header"> 
                  <h1 id="modalTitle">Holidays</h1>
                  <button type="button" class="close btn btn-secondary" data-bs-dismiss="modal" >&times;</button>
              </div>
              <!-- This is the body section of our modal overlay --> 
               <div class="modal-body" id="modalBody">
                <div class="btn-group dropright">
                  <select class="form-select form-select-sm mb-3" id="monthSelect"> 

                  </select>
                </div>
                <div class="list-group">
                  <button type="button" class="list-group-item list-group-item-action active" id="holidayTitle">
                    Holidays in <span id="currentMonth"></span>
                  </button>
                  <span id="holidays">
                  </span>
                  
                </div>               
              </div>
               <!-- This is the footer section of our modal overlay  -->
              <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" >Close</button>
              </div>
            </div>
          </div>
        </div>
     </div>
  </div>
</div>

JavaScript

// Declares blank arrays
let monthHolidayName = [];
let monthHolidayDescription = [];
let monthHolidayDay = [];
let monthHolidayMonth = [];
let monthHolidayIsoDate = [];
              
// On change pushes the arrays with the current months data
$('#monthSelect').change(function(){
          
  var selectedMonth = $('#monthSelect').val();
  var numSelectedMonth = parseInt(selectedMonth) + 1;

  for(i = 0; i < result['data']['holidays'].length; i++){
    var holidayMonth = result['data']['holidays'][i]['date']['datetime']['month'];
    if(holidayMonth === numSelectedMonth){
      // console.log((result['data']['holidays'][i]));
      monthHolidayName.push(result['data']['holidays'][i]['name']);
      monthHolidayDescription.push(result['data']['holidays'][i]['description']);
      monthHolidayDay.push(result['data']['holidays'][i]['date']['datetime']['day']);
      monthHolidayMonth.push(result['data']['holidays'][i]['date']['datetime']['month']);
      monthHolidayIsoDate.push(result['data']['holidays'][i]['date']['iso']);
    }
  }

  // Empties the #holidays element <--------------------
  $("#holidays").empty();
  
  // Appends the data to the modal
  for(i = 0; i < monthHolidayName.length; i++){
    var holidayName = monthHolidayName[i];
    var holidayDescription = monthHolidayDescription[i];
    var holidayDay = monthHolidayDay[i];
    var holidayDayMonth = monthHolidayMonth[i];
    var holidayIsoDate = monthHolidayIsoDate[i];

    var dateParsed = Date.parse(`${holidayDay} ${holidayDayMonth}`).toString("MMMM dS");
    // Appends elements to #holidays with the data         
    $("#holidays").append(`<div class="list-group-item list-group-item-action"><div style="text-decoration: underline; text-align: center;">${holidayName}</div><div style="text-align: center">${holidayDescription}</div><small class="text-muted">${holidayIsoDate}</small></div>`);
  }          
});