title: How to generate "on click" link from any given day - equal or greater than today (and, let say, in a month span - in JavaScript, HTML & CSS calendar?
body: <p>I'm a beginner programmer - a student actually - and this is my very first calendar I recreated using HTML, CSS &amp; JavaScript.</p>
  <p>I want to use this calendar as a part of a booking system, so I'm wondering about the next step for me to make each individual day in the calendar an active link, that - being clicked - takes a user to an individual web page where to follow with the booking for that particular day.</p>
  <p>The HTML code goes like this:</p>
  <pre><code>&lt;h3 class=&quot;header&quot;&gt;Elija la fecha y la sesión del evento&lt;/h3&gt;
  
  &lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;calendar&quot;&gt;
          &lt;div class=&quot;calendar__info&quot;&gt;
              &lt;div class=&quot;calendar__prev&quot; id=&quot;prev-month&quot;&gt;&amp;#9664;&lt;/div&gt;
              &lt;div class=&quot;calendar__month&quot; id=&quot;month&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;calendar__year&quot; id=&quot;year&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;calendar__next&quot; id=&quot;next-month&quot;&gt;&amp;#9654;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;calendar__week&quot;&gt;
              &lt;div class=&quot;calendar__day calendar__item&quot;&gt;lun&lt;/div&gt;
              &lt;div class=&quot;calendar__day calendar__item&quot;&gt;mar&lt;/div&gt;
              &lt;div class=&quot;calendar__day calendar__item&quot;&gt;mié&lt;/div&gt;
              &lt;div class=&quot;calendar__day calendar__item&quot;&gt;jue&lt;/div&gt;
              &lt;div class=&quot;calendar__day calendar__item&quot;&gt;vie&lt;/div&gt;
              &lt;div class=&quot;calendar__day calendar__item&quot;&gt;sáb&lt;/div&gt;
              &lt;div class=&quot;calendar__day calendar__item&quot;&gt;dom&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;calendar__dates&quot; id=&quot;dates&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src=&quot;/static/script.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>The CSS code:</p>
  <pre><code>html {
    font-size: 50%;
  }
  
  .container {
    width: 100%;
    height:100vh;
    background-color: coral;
    color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .calendar {
    width: 80%;
    max-width: 600px;
    margin: 1em auto;
    background-color: #222227;
    box-shadow: 0 0.5rem 3rem rgba(0,0,0,0.4);
  }
  
  .calendar__info {
    display: flex;
    align-items: center;
    padding: 0.2em;
    font-size: 3em;
    text-transform: uppercase;
    background-color: #008080;
  }
  
  .calendar__prev, .calendar__next {
    cursor: pointer;
  }
  
  .calendar__prev {
    margin-right: auto;
  }
  
  .calendar__next {
    margin-left: auto;
  }
  
  .calendar__month, .calendar__year {
    padding: .5em 1em;
  }
  
  .calendar__week, .calendar__dates {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 10px;
  }
  
  .calendar__item {
    display: flex;
    justify-content: center;
    grid-template-columns: repeat(7, 1fr);
    align-items: center;
    text-align: center;
    height: 5rem;
    line-height: 4;
    font-size: 2rem;
    margin: 0.3rem;
  }
  
  .calendar__item:hover {
    background-color: #262626;
    border: 0.2rem solid #777;
    cursor: pointer;
  }
  </code></pre>
  <p>The JavaScript code:</p>
  <pre><code>let monthNames = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
  
  let currentDate = new Date();
  let currentDay = currentDate.getDate();
  let monthNumber = currentDate.getMonth();
  let currentYear = currentDate.getFullYear();
  
  let dates = document.getElementById('dates');
  let month = document.getElementById('month');
  let year = document.getElementById('year');
  
  let prevMonthDOM = document.getElementById('prev-month');
  let nextMonthDOM = document.getElementById('next-month');
  
  month.textContent = monthNames[monthNumber];
  year.textContent = currentYear.toString();
  
  prevMonthDOM.addEventListener('click', ()=&gt;lastMonth());
  nextMonthDOM.addEventListener('click', ()=&gt;nextMonth());
  
  writeMonth(monthNumber);
  
  function writeMonth(month) {
      for (let i = startDay(); i &gt; 0; i--) {
          dates.innerHTML += `&lt;div class=&quot;calendar__item&quot;&gt;${''}&lt;/div&gt;`;
      }
  
      for (let i = 1; i &lt;= getTotalDays(month); i++) {
          dates.innerHTML += `&lt;div class=&quot;calendar__item&quot;&gt;${i}&lt;/div&gt;`;
      }
  }
  
  function getTotalDays(month) {
      if (month === -1) month = 11;
  
      if (month == 0 || month == 2 || month == 4 || month == 6 || month == 7 || month == 9 || month == 11) {
          return 31;
      } else if (month == 3 || month == 5 || month == 8 || month == 10) {
          return 30;
      } else {
          return isLeap() ? 29 : 28;
      }
  }
  
  function isLeap() {
      return ((currentYear % 100 !==0) &amp;&amp; (currentYear % 4 === 0) || (currentYear % 400 === 0));
  }
  
  function startDay() {
      let start = new Date(currentYear, monthNumber, 1);
      return ((start.getDay() - 1) === -1) ? 6 : start.getDay() - 1;
  }
  
  function lastMonth() {
      if (monthNumber !== 0) {
          monthNumber--;
      } else {
          monthNumber = 11;
          currentYear--;
      }
  
      setNewDate();
  
  }
  
  function nextMonth() {
      if (monthNumber !== 11) {
          monthNumber++;
      } else {
          monthNumber = 0;
          currentYear++;
      }
  
      setNewDate();
  }
  
  function setNewDate() {
      currentDate.setFullYear(currentYear, monthNumber, currentDay);
      month.textContent = monthNames[monthNumber];
      year.textContent = currentYear.toString();
      dates.textContent = '';
      writeMonth(monthNumber);
  }
  </code></pre>