Calendar component in pure JS

calendar.js

class Calendar {
  constructor(selector){
    this.MONTHS= ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    this.root = document.querySelector(selector);
    this.activeDateTime = new Date();
    this.render();
    this.attachEvents();
   
  }
  
  get activeYear(){
    return this.activeDateTime.getFullYear();
  }
  
  get activeMonth(){
    return this.activeDateTime.getMonth();
  }
  
  get activeDate(){
    return this.activeDateTime.getDate();
  }
  
  attachEvents(){

    this.root.addEventListener('click', (e)=>{
      if(e.target.dataset.control === 'cell'){
        const dateValue = e.target.dataset.date;
        alert(dateValue)
      }
      else if(e.target.dataset.control === 'next'){
        this.getNextMonth()
      }
      else if(e.target.dataset.control === 'prev'){
       this.getPrevMonth()
      }
    })
  
  }
  
  get monthDays(){
    const date = new Date(this.activeYear, this.activeMonth+1, 0);
    const padLeft = new Date(this.activeYear, this.activeMonth, 1).getDay();
    const dates = Array.from(Array(date.getDate()), (_, index) => index+1);
    for(let padding = 0; padding < padLeft; padding++){
     dates.unshift(undefined);
    }
    return dates;
  }
  
  
  getNextMonth(){
    this.activeDateTime.setMonth(this.activeMonth + 1);
    this.render()
  }
  
  
  getPrevMonth(){
    this.activeDateTime.setMonth(this.activeMonth - 1);
    this.render()
  }
  
  
  getDayClass(day){
    let className = "cell"
    if(day === undefined)
    className += " empty"
    return className;
  }
  
  
  
  render(){
    this.root.innerHTML = `
   <div class="calendar" aria-label="calendar" aria-live="polite">
    <div class="header">
      <span data-control="prev" id="prev" role="button" class="prev">&lt;</span>
      <div aria-label="month" class="active-month">${this.MONTHS[this.activeMonth]}</div>
      <div aria-label="year" class="active-year">${this.activeYear}</div>
      <div data-control="next" id="next" role="button" class="next">&gt;</div>
    </div>
    
    <div class="body">
      <div class="row days">
        <div role="cell" class="cell">S</div>
        <div role="cell" class="cell">M</div>
        <div role="cell" class="cell">T</div>
        <div role="cell" class="cell">W</div>
        <div role="cell" class="cell">T</div>
        <div role="cell" class="cell">F</div>
        <div role="cell" class="cell">S</div>
      </div>
      <div role="row" class="row">
        ${this.monthDays.map(date => (`<div data-control="cell" data-date=${date} role="cell" class="${this.getDayClass(date)}">${date ? date: ''}</div>`)).join("")}
      </div>
      
    </div>
  </div>
 `;

    
  }
  
}



// USAGE:
    
 const cal = new Calendar("#main");
    
    
    
    
   

CSS:

.calendar {
  
  background: #fff;
  width: 300px;
  font-family: sans-serif;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 5px 20px 0 rgba(0,0,0,0.05);
}

.calendar .header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
  
}

#next, #prev {
  cursor: pointer;
}

.calendar .row {
  display: flex;
  flex-wrap: wrap;
}

.row.days {
  background: rgba(0,0,0,0.05);
  border-radius: 5px;
}

.calendar .row .cell {
  text-align:center;
  width: calc(300px / 7);
  height: calc(300px / 7);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.calendar .row .cell:hover {
  background: #eee;
}

.empty {
  pointer-events: none;
}