JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="container py-3">

  <div id="calendar">

    <div class="text-center mb-3">
      <h2>October 2020</h2>
      <button name="changemonth" class='btn btn-xs btn-primary' data-month='09' data-year='2020'>Mes anterior</button>
      <button class='btn btn-xs btn-primary' data-month='11' data-year='2020'>Mes actual</button>
      <button class='btn btn-xs btn-primary' data-month='11' data-year='2020'>Mes siguiente</button>
    </div>

    <table class='table table-bordered table-calendar'>
      <tr>
        <th class='header_weekday'>Lunes</th>
        <th class='header_weekday'>Martes</th>
        <th class='header_weekday'>Miércoles</th>
        <th class='header_weekday'>Jueves</th>
        <th class='header_weekday'>Viernes</th>
        <th class='header_weekday'>Sábado</th>
        <th class='header_weekday'>Domingo</th>
      </tr>
      <tr>
        <td class='empty'></td>
        <td class='empty'></td>
        <td class='empty'></td>
        <td class=''>
          <h4>1</h4>
          <span class='badge badge-danger'>N/A</span>
        </td>
        <td class=''>
          <h4>2</h4>
          <span class='badge badge-danger'>N/A</span>
        </td>
        <td class=''>
          <h4>3</h4>
          <span class='badge badge-danger'>Cerrado</span>
        </td>
        <td class=''>
          <h4>4</h4>
          <span class='badge badge-danger'>Cerrado</span>
        </td>
      </tr>
      <tr>
        <td class=''>
          <h4>5</h4>
          <span class='badge badge-danger'>N/A</span>
...

CSS

.table-calendar TH {
  font-size: .5rem;
}

.table-calendar TD {
  font-size: .75rem;
  width: calc(100% / 7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

JavaScript

$(function() {

  // this bit is new... I've switch to $(document).on('click')
  // this basically always re-binds this to newly added ajax html.
  // the standard jq click fn wont work on newly/replaced html
  // use $(document).on() to target new 'ajax' inserted elements
  // also i've switched A to BUTTON using name attribute as target
  $(document).on('click', '[name="changemonth"]', function(e) {

    // prevent default
    e.preventDefault();

    // defining a URL param string as a data-target attribute to pass to through jquery ajax is not the way...

    // seperate your ajax params to pass this way as seperate data attributes...

    // seperate data attribures (see html data attributes too)
    let month = $(this).attr("data-month");
    let year = $(this).attr("data-year");

    // trigger the ajax call
    $.ajax({
      url: "calendar.php",
      
      // pass url vars here.. php GET() will get these keys..
      data: ({
        month: month,
        year: year
      }),
      
      // on success
      success: function(data) {
        
        // replace the calendar entire html with calendar.php
        $("#calendar").html(data);
        
      }

    });

  });

});