index.html:
<!DOCTYPE html>
<html lang="en-US">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta name="author" content="Nour Abdelaziz">
  <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
  <meta name="description" content="Unit 5 Final Project">
  <title>Unit 5 Project -- Nour Abdelaziz</title>
  <link href="style.css" rel="stylesheet" type="text/css">
  <script src="script.js"></script>
</head>

<body>
  <header>
    <h1 id="head">Unit 5 Project -- Nour Abdelaziz</h1>
    <h1 id="subhead">Calendar App</h1>
  </header>
  <main>
    <table>
      <thead>
        <tr>
          <th colspan="7">June 2023</th>
        </tr>
        <tr>
          <th class="weekday">Sunday</th>
          <th class="weekday">Monday</th>
          <th class="weekday">Tuesday</th>
          <th class="weekday">Wednesday</th>
          <th class="weekday">Thursday</th>
          <th class="weekday">Friday</th>
          <th class="weekday">Saturday</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="placeholder"></td>
          <td class="placeholder"></td>
          <td class="placeholder"></td>
          <td class="placeholder"></td>
          <td class="day" data-date="1">1</td>
          <td class="day" data-date="2">2</td>
          <td class="day" data-date="3">3</td>
        </tr>
        <tr>
          <td class="day" data-date="4">4</td>
          <td class="day" data-date="5">5</td>
          <td class="day" data-date="6">6</td>
          <td class="day" data-date="7">7</td>
          <td class="day" data-date="8">8</td>
          <td class="day" data-date="9">9</td>
          <td class="day" data-date="10">10</td>
        </tr>
        <tr>
          <td class="day" data-date="11">11</td>
          <td class="day" data-date="12">12</td>
          <td class="day" data-date="13">13</td>
          <td class="day" data-date="14">14</td>
          <td class="day" data-date="15">15</td>
          <td class="day" data-date="16">16</td>
          <td class="day" data-date="17">17</td>
        </tr>
        <tr>
          <td class="day" data-date="18">18</td>
          <td class="day" data-date="19">19</td>
          <td class="day" data-date="20">20</td>
          <td class="day" data-date="21">21</td>
          <td class="day" data-date="22">22</td>
          <td class="day" data-date="23">23</td>
          <td class="day" data-date="24">24</td>
        </tr>
        <tr>
          <td class="day" data-date="25">25</td>
          <td class="day" data-date="26">26</td>
          <td class="day" data-date="27">27</td>
          <td class="day" data-date="28">28</td>
          <td class="day" data-date="29">29</td>
          <td class="last-day day" data-date="30">30</td>
          <td class="placeholder"></td>
        </tr>
      </tbody>
    </table>
  </main>
  <div id="appointmentModal" class="modal">
    <div class="modal-content">
  <span class="close">&times;</span>
  <h2>Enter Appointment</h2>
  <form id="appointmentForm">
    <label for="date">Date:</label>
    <input type="text" id="date" readonly>
    <label for="time">Time:</label>
    <input type="text" id="time">
    <label for="description">Description:</label>
    <input type="text" id="description">
    <button type="submit">Save Changes</button>
      <div class="delete">x</div>
  </form>
</div>

  </div>
</body>

</html>
script.js:
$(document).ready(function() {
  var startDate = new Date(2023, 5, 1);
  var endDate = new Date(2023, 5, 30);
  var currentDate = new Date(startDate);
  var tableBody = $('tbody');

  var rows = '';
  while (currentDate <= endDate) {
    var row = '<tr>';
    for (var i = 0; i < 7; i++) {
      var cell = '';
      if (currentDate.getMonth() == startDate.getMonth() && currentDate.getDate() == startDate.getDate()) {
        cell = '<td class="first-day day" data-date="' + currentDate.getDate() + '">' + currentDate.getDate() + '</td>';
        currentDate.setDate(currentDate.getDate() + 1);
      } else if (currentDate.getMonth() == endDate.getMonth() && currentDate.getDate() == endDate.getDate()) {
        cell = '<td class="last-day day" data-date="' + currentDate.getDate() + '">' + currentDate.getDate() + '</td>';
        currentDate.setDate(currentDate.getDate() + 1);
      } else if (currentDate.getDate() > 4 && currentDate.getDate() <= 30) {
        cell = '<td class="day" data-date="' + currentDate.getDate() + '">' + currentDate.getDate() + '</td>';
        currentDate.setDate(currentDate.getDate() + 1);
      } else {
        cell = '<td class="placeholder">#</td>';
      }
      row += cell;
    }
    row += '</tr>';
    rows += row;
  }
  
  tableBody.append(rows);

  $(document).on('click', '.day', function() {
    var date = $(this).data('date');
    $('#date').val(date);
    $('#appointmentModal').css('display', 'block');
  });

  $('.close').on('click', function() {
    $('#appointmentModal').css('display', 'none');
  });

  $('#appointmentForm').submit(function(e) {
    e.preventDefault();
    var date = $('#date').val();
    var time = $('#time').val();
    var description = $('#description').val();

    var appointmentHTML =
      '<div class="appointment">' +
      '<span class="time">' +
      time +
      '</span>' +
      '<span class="description">' +
      description +
      '</span>' +
      '<span class="delete">&times;</span>' +
      '</div>';

    $('[data-date="' + date + '"]').append(appointmentHTML);

    var appointments = $('[data-date="' + date + '"] .appointment');
    appointments.sort(function(a, b) {
      var timeA = $(a).find('.time').text();
      var timeB = $(b).find('.time').text();
      return timeA.localeCompare(timeB);
    });
    $('[data-date="' + date + '"]').empty().append(appointments);
    $('#appointmentForm')[0].reset();
    $('#appointmentModal').css('display', 'none');
  });

  $(document).on('click', '.appointment', function() {
    var time = $(this).find('.time').text();
    var description = $(this).find('.description').text();
    var date = $(this).closest('td').data('date');
    $('#date').val(date);
    $('#time').val(time);
    $('#description').val(description);
    $('#appointmentModal').css('display', 'block');
    $(this).remove();
  });

  $(document).on('click', '.appointment .delete', function() {
    $(this).closest('.appointment').remove();
  });
});
$(document).ready(function() {
  // Get the appointment modal
  var modal = document.getElementById("appointmentModal");

  var span = document.getElementsByClassName("close")[0];

  // When a day is clicked
  $(".day").click(function() {
    // Get the date
    var date = $(this).data("date");

    $("#date").val(date);

    modal.style.display = "block";
  });

  span.onclick = function() {
    modal.style.display = "none";
  };

  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  };

  // Handle form submission
  $("#appointmentForm").submit(function(event) {
    event.preventDefault();

    // Get the form values
    var date = $("#date").val();
    var time = $("#time").val();
    var description = $("#description").val();

    alert("Appointment Details:\n\nDate: " + date + "\nTime: " + time + "\nDescription: " + description);

    modal.style.display = "none";
  });
});
$(document).ready(function() {
  var appointmentForm = $('#appointmentForm');
  var dateInput = $('#date');
  var timeInput = $('#time');
  var descriptionInput = $('#description');

  appointmentForm.submit(function(event) {
    event.preventDefault();

    // Get the appointment details
    var date = dateInput.val();
    var time = timeInput.val();
    var description = descriptionInput.val();

    var dayCell = $('td[data-date="' + date + '"]');

    var appointmentElement = $('<div class="appointment">' +
                                  '<div class="time">' + time + '</div>' +
                                  '<div class="description">' + description + '</div>' +
                              '</div>');

    dayCell.append(appointmentElement);

    // Reset the form inputs
    dateInput.val('');
    timeInput.val('');
    descriptionInput.val('');
  });
});
$(document).ready(function() {
  var appointmentForm = $('#appointmentForm');
  var dateInput = $('#date');
  var timeInput = $('#time');
  var descriptionInput = $('#description');

  appointmentForm.submit(function(event) {
    event.preventDefault();

    var date = dateInput.val();
    var time = timeInput.val();
    var description = descriptionInput.val();

    var dayCell = $('td[data-date="' + date + '"]');
    var appointmentElement = $('<div class="appointment">' +
                                  '<div class="time">' + time + '</div>' +
                                  '<div class="description">' + description + '</div>' +
                              '</div>');

    var deleteButton = $('<div class="delete">Delete</div>');
    appointmentElement.append(deleteButton);

    dayCell.append(appointmentElement);

    dateInput.val('');
    timeInput.val('');
    descriptionInput.val('');

    deleteButton.click(function() {
      $(this).parent('.appointment').remove();
      $(document).on('click', ' .delete', function() {
  $(this).closest('.appointment').remove();
});
    });
  });
});
style.css:
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: rgb(254, 250, 224); /* Color 3 */
}

table {
  width: 80%;
  margin: 0 auto;
  border-collapse: collapse;
  margin-top: 20px;
  margin-bottom: 20px;
  border: 3px solid rgb(96, 108, 56); /* Color 1 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

th,
td {
  border: 1px solid black;
  text-align: center;
  padding: 10px;
  background-color: rgb(221, 161, 94); /* Color 4 */
  font-size: 18px;
}

.weekday {
  background-color: rgb(96, 108, 56); /* Color 1 */
  color: white;
  font-weight: bold;
}

.day {
  cursor: pointer;
  background-color: rgb(40, 54, 24); /* Color 2 */
  color: white;
  font-size: 18px;
  font-weight: bold;
}

.first-day {
  background-color: rgb(221, 161, 94); /* Color 4 */
}

.last-day {
  background-color: rgb(221, 161, 94); /* Color 4 */
}

.placeholder {
  background-color: rgba(0, 0, 0, 0);
}

#head {
  text-align: center;
  background-color: rgb(188, 108, 37); /* Color 5 */
  color: white;
  padding: 20px;
  font-size: 28px;
  margin-bottom: 20px;
}

#subhead {
  text-align: center;
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 20px;
}

#appointmentModal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: white;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 50%;
  position: relative;
}

.close {
  position: absolute;
  top: 0;
  right: 5px;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

form label {
  display: block;
  margin-top: 10px;
}

form input[type="text"],
form button[type="submit"] {
  display: block;
  margin-top: 5px;
}

form button[type="submit"] {
  margin-top: 10px;
}
make a button that allows you to delete the appointment after you make it. index.html, and script.js