How to put a class on only some days of some months of dynamically created calendar?

Question

so I need a calendar for apartment site, only to show free and reserved dates. I have a calendar but, since every day and month is dynamically created with JavaScript, is there a way to add a class to only specific days to mark them, not to all of them? It wouldn’t be a problem for a hard-coded calendar, but I can’t find a way to add a class to only some days of some months, which are all dynamically created. This is a calendar:

// DARK MODE TOGGLE
document.querySelector('.dark-mode-switch').onclick = () => {
  document.querySelector('body').classList.toggle('dark');
  document.querySelector('body').classList.toggle('light');
}



// CHECK LEAP YEAR
isLeapYear = (year) => {
  return (year % 4 === 0 && year % 100 !== 0 && year % 400 !== 0) || (year % 100 === 0 && year % 400 === 0);
}


getFebDays = (year) => {
  return isLeapYear(year) ? 29 : 28;
}


let calendar = document.querySelector('.calendar');

const month_names = ['January', 'Fabruary', 'March', 'April', 
'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

let month_picker = document.querySelector('#month-picker');


month_picker.onclick = () => {
  month_list.classList.add('show');
}


// GENERATE CALENDAR
generateCalendar = (month, year) => {
  let calendar_days = document.querySelector('.calendar-days');
  calendar_days.innerHTML = '';
  let calendar_header_year = document.querySelector('#year');

  let days_of_month = [31, getFebDays(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

  let currDate = new Date();

  month_picker.innerHTML = month_names[month];
  calendar_header_year.innerHTML = year;

  let first_day = new Date(year, month, 1);

  for (let i = 0; i <= days_of_month[month] + first_day.getDay() - 1; i++) {
    let day = document.createElement('div');
    if (i >= first_day.getDay()) {
      day.classList.add('calendar-day');
      day.innerHTML = i - first_day.getDay() + 1;
      day.innerHTML += `<span></span>
                      <span></span>
                      <span></span>
                      <span></span>`
    }
    calendar_days.appendChild(day);
  }
}


let month_list = document.querySelector('.month-list');

month_names.forEach((e, index) => {
  let month = document.createElement('div');
  month.innerHTML = `<div>${e}</div>`;
  month.onclick = () => {
    month_list.classList.remove('show');
    curr_month.value = index;
    generateCalendar(curr_month.value, curr_year.value);
  }
  month_list.appendChild(month);
})


document.querySelector('#prev-year').onclick = () => {
  --curr_year.value;
  generateCalendar(curr_month.value, curr_year.value);
}

document.querySelector('#next-year').onclick = () => {
  ++curr_year.value;
  generateCalendar(curr_month.value, curr_year.value);
}


let currDate = new Date();

let curr_month = { value: currDate.getMonth() };
let curr_year = { value: currDate.getFullYear() };

generateCalendar(curr_month.value, curr_year.value);

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
  --dark-body: #4d4c5a;
  --dark-main: #141529;
  --dark-second: #79788c;
  --dark-hover: #323048;
  --dark-text: #f8fbff;

  --light-body: #f3f8fe;
  --light-main: #fdfdfd;
  --light-second: #c3c2c8;
  --light-hover: #edf0f5;
  --light-text: #151426;

  --blue: #0000ff;
  --white: #fff;

  --shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

  --font-family: cursive;
}

.dark {
  --bg-body: var(--dark-body);
  --bg-main: var(--dark-main);
  --bg-second: var(--dark-second);
  --color-hover: var(--dark-hover);
  --color-txt: var(--dark-text);
}

.light {
  --bg-body: var(--light-body);
  --bg-main: var(--light-main);
  --bg-second: var(--light-second);
  --color-hover: var(--light-hover);
  --color-txt: var(--light-text);
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html, body {
  height: 100vh;
  display: grid;
  place-items: center;
  font-family: var(--font-family);
  background: var(--bg-body);
}

.calendar {
  height: max-content;
  width: max-content;
  background: var(--bg-main);
  border-radius: 30px;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.light .calendar {
  box-shadow: var(--shadow);
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 25px;
  font-weight: 600;
  color: var(--color-txt);
  padding: 10px;
}

.calendar-body {
  padding: 10px;
}

.calendar-week-day {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-weight: 600;
  height: 50px;
}

.calendar-week-day div {
  display: grid;
  place-items: center;
  color: var(--bg-second);
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  color: var(--color-txt);
}

.calendar-days div {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  position: relative;
  cursor: pointer;
  animation: to-top 1s forwards;
}


.month-picker {
  padding: 5px 10px;
  border-radius: 10px;
  cursor: pointer;
}

.month-picker:hover {
  background: var(--color-hover);
}

.year-picker {
  display: flex;
  align-items: center;
}

.year-change {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 10px;
  cursor: pointer;
}

.year-change:hover {
  background: var(--color-hover);
}



.calendar-footer {
  padding: 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.toggle {
  display: flex;
}

.toggle span {
  margin-right: 10px;
  color: var(--color-txt);
}

.dark-mode-switch {
  position: relative;
  width: 48px;
  height: 25px;
  border-radius: 14px;
  background: var(--bg-second);
  cursor: pointer;
}

.dark-mode-switch-ident {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--bg-main);
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left 0.2s ease-in-out;
}

.dark .dark-mode-switch .dark-mode-switch-ident {
  top: 2px;
  left: calc(2px + 50%);
}


.calendar-days div span {
  position: absolute;
}

.calendar-days div:hover span {
  transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
}

.calendar-days div span:nth-child(1),
.calendar-days div span:nth-child(3) {
  width: 2px;
  height: 0;
  background: var(--color-txt);
}

.calendar-days div:hover span:nth-child(1),
.calendar-days div:hover span:nth-child(3) {
  height: 100%;
}

.calendar-days div span:nth-child(1) {
  bottom: 0;
  left: 0;
}

.calendar-days div span:nth-child(3) {
  top: 0;
  right: 0;
}

.calendar-days div span:nth-child(2),
.calendar-days div span:nth-child(4) {
  width: 0;
  height: 2px;
  background: var(--color-txt);
}

.calendar-days div:hover span:nth-child(2),
.calendar-days div:hover span:nth-child(4) {
  width: 100%;
}

.calendar-days div span:nth-child(2) {
  top: 0;
  left: 0;
}

.calendar-days div span:nth-child(4) {
  bottom: 0;
  right: 0;
}


.calendar-days div.curr-date {
  background: var(--blue);
  color: var(--white);
  border-radius: 50%;
}

.calendar-days div.curr-date span {
  display: none;
}



.month-list {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: var(--bg-main);
  padding: 20px;
  color: var(--color-txt);
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 5px;
  transform: scale(1.5);
  visibility: hidden;
  pointer-events: none;
}

.month-list.show {
  transform: scale(1);
  visibility: visible;
  pointer-events: visible;
  transition: all .2s ease-in-out;
}

.month-list > div {
  display: grid;
  place-items: center;
}

.month-list > div > div {
  width: 100%;
  padding: 5px 20px;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
}

.month-list > div > div:hover {
  background: var(--color-hover);
}


@keyframes to-top {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }  

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Calendar</title>
</head>

<body class="dark">
  <div class="calendar">
    <div class="calendar-header">
      <span class="month-picker" id="month-picker">
        February
      </span>

      <div class="year-picker">
        <span class="year-change" id="prev-year">
          <pre><</pre>
        </span>
        <span id="year">2022</span>
        <span class="year-change" id="next-year">
          <pre>></pre>
        </span>
      </div>
    </div>

    <div class="calendar-body">
      <div class="calendar-week-day">
        <div>Sun</div>
        <div>Mon</div>
        <div>Tue</div>
        <div>Wed</div>
        <div>Thu</div>
        <div>Fri</div>
        <div>Sat</div>
      </div>

      <div class="calendar-days">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
      </div>
    </div>

    <div class="calendar-footer">
      <div class="toggle">
        <span>Dark Mode</span>
        <div class="dark-mode-switch">
          <div class="dark-mode-switch-ident"></div>
        </div>
      </div>
    </div>

    <div class="month-list"></div>
  </div>





  <script src="app.js"></script>
</body>

</html>

So how can I add a class to only specific days of specific month (not all days of every month) to highlight them?