How to create calendar in javascript from scratch

First create a HTML skeleton

<div id="calendar-container">
            <div id="calendar-header">
               <span id="prev" onclick="ClickEventPrev()"> &#10094;</span>
                <span id="calendar-month-year"></span>
                  <span id="next" onclick="ClickEventNext()"> &#10095; </span>
           </div>
 <div id="calendar-dates">

 </div>

Now Create a CSS file

#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

Comments

Popular posts from this blog

What are sales territory in Netsuite?

How to get and set a sublist in netsuite suitlet suitescript 2.0