JSFiddle - React, Tailwind, and code Playground

HTML

<div id="calendar"></div>

JavaScript

class Calendar {
	constructor(domId) {
    this.renderCalendar(domId);
    this.addEventListeners(domId);
  }
  
  handleCalendarClick(selectedDay) {
		event.preventDefault();
    this.updateView(selectedDay);
    this.updateInput(selectedDay)
  }
  
  addEventListeners(domId) {
  	document.getElementById(domId)
      .querySelectorAll('li button').forEach(button => {
        const selectedDay = button.dataset.day;
      	button.addEventListener('click', () => {
        	this.handleCalendarClick(selectedDay)
        });
      })
  }
  
  updateView(selectedDay) {
    document.querySelector(`button[data-day="${selectedDay}"]`).classList.toggle('selected');
  }
  
  updateInput(selectedDay) {
  	document.getElementById('selectedDate').value = selectedDay;
  }
  
  renderCalendar(domId) {
  	document.getElementById(domId).innerHTML = `
      <input id="selectedDate" />
      <ul>
      <li>
      <button type="button" data-day="01">01</button>
      </li>
      <li>
      <button type="button" data-day="02">02</button>
      </li>
      <li>
      <button type="button" data-day="03">03</button>
      </li>
      </ul>
    `;
  }
}

const calendar = new Calendar('calendar');