How to create calendar in javascript from scratch

#calendar-container{
    padding: 10px;
    width: 210px;
    height: 240px;
    text-align: center;
    border: 1px solid #eee;
    border-radius: 10px;
    font-size: 16px;
    font-family: Arial;  
}

#calendar-container>div{
    padding: 0;
    margin-bottom: 10px;
}

#calendar-month-year{
    margin: 5px;
}

#calendar-dates>table>tr>td{
    padding: 5px;
}

After creating css style we will now create, the main file that is javascript code

var d = new Date();
var month_name = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var month = d.getMonth();   
var year = d.getFullYear(); 

function ClickEventPrev(){
  month = month - 1;
  if (month < 0) {
    year = year - 1;
    month = 11;
  } 
  calendar(newCalendar=1);
}

function ClickEventNext(){
  month = month + 1;
  if (month > 11) {
    year = year + 1;
    month = 0;
  }
  calendar(newCalendar=1);
}

function calendar(newCalendar){  

  if(newCalendar =1){
      var oldCalendar =  document.getElementById("calendar-dates")
      while (oldCalendar.firstChild) {
          oldCalendar.removeChild(oldCalendar.firstChild);
   }
    }
    
    var event=[{
     "year":2017,
      "month":8,
      "day":1
    },
    {
     "year":2017,
      "month":9,
      "day":5
    },
    {
     "year":2018,
      "month":1,
      "day":1
    }
    ]
  
    var first_date = month_name[month] + " " + 1 + " " + year;
    //September 1 2014
    var tmp = new Date(first_date).toDateString();
    //Mon Sep 01 2014 ...
    var first_day = tmp.substring(0, 3);    //Mon
    var day_name = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
    var day_no = day_name.indexOf(first_day);   //1
    var days = new Date(year, month+1, 0).getDate();    //30
    //Tue Sep 30 2014 ...
    var calendar = get_calendar(day_no, days,event);
     
     document.getElementById("calendar-month-year").innerHTML = month_name[month]+" "+year;
     document.getElementById("calendar-dates").appendChild(calendar);
   
} 

function get_calendar(day_no, days,event){

    var table = document.createElement('table');
    var tr = document.createElement('tr');
    
    //row for the day letters
    for(var c=0; c<=6; c++){
        var td = document.createElement('td');
        td.innerHTML = "SMTWTFS"[c];
        tr.appendChild(td);
    }
    table.appendChild(tr);
    
    //create 2nd row
    tr = document.createElement('tr');
    var c;
    for(c=0; c<=6; c++){
        if(c == day_no){
            break;
        }
        var td = document.createElement('td');
        td.innerHTML = "";
        tr.appendChild(td);
    }
    
    var count = 1;
    for(; c<=6; c++){
        var td = document.createElement('td');
        
        // add event to the calendar
        for(EventArray=0; EventArray<event.length-1; EventArray++){    
        
            if(event[EventArray].year ==year && event[EventArray].month==month && event[EventArray].day==count){                    
             td.innerHTML = count+"Event";
            }else{
              td.innerHTML = count;
            }
        }         
                           
        count++;
        tr.appendChild(td);
    }
    table.appendChild(tr);
    
      //rest of the date rows
    for(var r=3; r<=7; r++){
        tr = document.createElement('tr');
        for(var c=0; c<=6; c++){
            if(count > days){
                table.appendChild(tr);
                return table;
            }
            var td = document.createElement('td');
            
             // add event to the calendar
            for(EventArray=0; EventArray<event.length-1; EventArray++){    

                if(event[EventArray].year ==year && event[EventArray].month==month && event[EventArray].day==count){                    
                 td.innerHTML = count+"Event";
                }else{
                  td.innerHTML = count;
                }
            }   

            count++;
            tr.appendChild(td);
        }
        table.appendChild(tr);
    }
  
    return table;
}
calendar();

We will now discuss the code. What we are doing here is finding the first day of the month for the first row. We have total 6 rows after finding the first row we can now fill the remaining rows. In this calendar we are also giving ability to add events. The events data can be fetched from any ajax call or from any input field.
Here is the live code