title: highlight a current date
body: <p>I am beginner for programming. I got a code from online and I am modifying to get hands on js, jquery, jsp. What I am trying to get is I need to highlight a today's date. I tried many times but could not succeeded. Any help will be greatly appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
   var Calendar = function(calen) {
      //Store div id
      this.divId = calen.ParentID;
      // Days of week, starting on Sunday
      this.DaysOfWeek = calen.DaysOfWeek;
      // Months, stating on January
      this.Months = calen.Months;
  
      // Set the current month, year
      var d = new Date();
      this.CurrentMonth = d.getMonth();
      this.CurrentYear = d.getFullYear();
      
  
      var f=calen.Format;
      //this.f = typeof(f) == 'string' ? f.charAt(0).toUpperCase() : 'M';
  
      if(typeof(f) == 'string') {
        this.f  = f.charAt(0).toUpperCase();
      } else {
        this.f = 'M';
      }
  
    };
  
    // Goes to next month
    Calendar.prototype.nextMonth = function() {
  
      if ( this.CurrentMonth == 11 ) {
  
        this.CurrentMonth = 0;
        
        this.CurrentYear++;
  
      } else {
        console.log("this.CurrentMonth == ", this.CurrentMonth);
        this.CurrentMonth++;
      }
  
      this.showCurrent();
    };
  
    // Goes to previous month
    Calendar.prototype.previousMonth = function() {
  
      if ( this.CurrentMonth == 0 ) {
  
        this.CurrentMonth = 11;
        this.CurrentYear--;
  
      } else {
  
        this.CurrentMonth--;
  
      }
  
      this.showCurrent();
    };
  
    // 
    Calendar.prototype.previousYear = function() {
      this.CurrentYear--;
      this.showCurrent();
    }
   
    Calendar.prototype.nextYear = function() {
  
      this.CurrentYear++;
  
      this.showCurrent();
    }              
  
    // Show current month
    Calendar.prototype.showCurrent = function() {
     
      this.Calendar(this.CurrentYear, this.CurrentMonth);
      
    };
    
    
  
    // Show month (year, month)
    Calendar.prototype.Calendar = function(y,m,n) {
      
      typeof(y) == 'number' ? this.CurrentYear = y : null;
      typeof(y) == 'number' ? this.CurrentMonth = m : null;
      typeof(y) == 'number' ? this.CurrDate = n : null;
  
  
      // 1st day of the selected month
      var firstDayOfCurrentMonth = new Date(y, m, 1).getDay();
      
      // Last date of the selected month
      var lastDateOfCurrentMonth = new Date(y, m+1, 0).getDate();
  
      // Last day of the previous month
      var lastDateOfLastMonth = m == 0 ? new Date(y-1, 11, 0).getDate() : new Date(y, m, 0).getDate();
  
      
      // Write selected month and year. This HTML goes into &lt;div id="year"&gt;&lt;/div&gt;
      //var yearhtml = '&lt;span class="yearspan"&gt;' + y + '&lt;/span&gt;';
  
      // Write selected month and year. This HTML goes into &lt;div id="month"&gt;&lt;/div&gt;
      //var monthhtml = '&lt;span class="monthspan"&gt;' + this.Months[m] + '&lt;/span&gt;';
  
      // Write selected month and year. This HTML goes into &lt;div id="month"&gt;&lt;/div&gt;
      var monthandyearhtml = '&lt;span id="monthandyearspan"&gt;' + this.Months[m] + ' - ' + y + '&lt;/span&gt;';
  
      var html = '&lt;table&gt;';
  
      // Write the header of the days of the week
      html += '&lt;tr&gt;';
  
      
      for(var i=0; i &lt; 7;i++) {
  
  
        html += '&lt;th class="daysheader"&gt;' + this.DaysOfWeek[i] + '&lt;/th&gt;';
      }
  
      html += '&lt;/tr&gt;';
  
  
      //this.f = 'X';
  
      var p = dm = this.f == 'M' ? 1 : (firstDayOfCurrentMonth == 0 ? -5 : 2);
  
      
      
      var cellvalue;
  
      for (var d, i=0, z=0; z&lt;6; z++) {
        html += '&lt;tr&gt;';
  
        for (var k= 0; k &lt; 7; k++) {
          d = i + dm - firstDayOfCurrentMonth;
  
          // Dates from prev month
          if (d &lt; 1){
            cellvalue = lastDateOfLastMonth - firstDayOfCurrentMonth + p++;
            
            html += '&lt;td id="prevmonthdates"&gt;' + 
                  '&lt;span id="cellvaluespan"&gt;' + (cellvalue) + '&lt;/span&gt;&lt;br/&gt;' + 
               
                '&lt;/td&gt;';
  
          // Dates from next month
          } else if ( d &gt; lastDateOfCurrentMonth){
           
           html += '&lt;td id="nextmonthdates"&gt;' + (p++) + '&lt;/td&gt;';
  
          // Current month dates
            
          } else {
            html += '&lt;td id="currentmonthdates"&gt;' + (d) + '&lt;/td&gt;';
            p = 1;
          }
          
          
          if (i % 7 == 6 &amp;&amp; d &gt;= lastDateOfCurrentMonth) {
  
            z = 10; // no more rows
          }
  
  
          i++;
  
        }
  
        html += '&lt;/tr&gt;';
      }
  
      // Closes table
      html += '&lt;/table&gt;';
  
      
      document.getElementById("monthandyear").innerHTML = monthandyearhtml;
  
      document.getElementById(this.divId).innerHTML = html;
    };
  
    // On Load of the window
    window.onload = function() {
      
      // Start calendar
      var c = new Calendar({
        ParentID:"divcalendartable",
  
        DaysOfWeek:[
        'MON',
        'TUE',
        'WED',
        'THU',
        'FRI',
        'SAT',
        'SUN'
        ],
  
        Months:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],
  
        Format:'dd/mm/yyyy'
      });
      
     
  
      c.showCurrent();
      
      
      // Bind next and previous button clicks
      getId('btnPrev').onclick = function(){
        c.previousMonth();
      };
  
      getId('btnPrevYr').onclick = function(){
        c.previousYear();
      };
  
      getId('btnNext').onclick = function(){
        c.nextMonth();
      };
  
      getId('btnNextYr').onclick = function(){
        c.nextYear();
      };                        
    }
  
    // Get element by id
    function getId(id) {
      return document.getElementById(id);
    }
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body { margin: 0; padding: 0; }
  
  table {
    border-collapse: collapse;
    font-family: Georgia, Times, serif;
  }
  
  th {
    border: 1px solid #A8A8A8;
    vertical-align: top;
  }
  
  td {
    height: 150px;
    width: 150px;
    padding: 10px;
    border: 1px solid #A8A8A8;
    vertical-align: top;
    text-align:center;
  }
  
  .divcalendar {
    padding: 15px;
      float:left;
      /*background-color: #FFCC00;*/
  }
  
  /* Wrapper div. That makes the inner div into an inline element that can be centered with text-align.*/
  #calendaroverallcontrols {
    text-align: center;
  }
  
  /* This is a fluid div as width will be changing */
  #calendarmonthcontrols {
    display: inline-block;
    /*background-color: #FF0000;*/
  }
  
  #calendarmonthcontrols &gt; div, #calendarmonthcontrols &gt; a {
      display: inline-block;
  }    
  
  #btnPrevYr {
    text-decoration: none;
    font-size: 35px;
    vertical-align: middle;
    /*background: #00FFCC;*/      
  }
  
  #btnPrev {
    text-decoration: none;
    font-size: 35px;
    margin-left: 20px;
    vertical-align: middle;
    /*background: #00FFCC;*/
  }    
  
  /*.yearspan {
    font-size: 20px;
    font-weight: bold;
    float: left;
    margin-left: 5px;
    margin-right: 5px;
  }
  
  .monthspan {
    font-size: 20px;
    font-weight: bold;
    float: left;
    margin-left: 5px;
    margin-right: 5px;
  }*/
  
  #monthandyearspan {
    width: 50px;
    font-size: 25px;
    font-weight: bold;
    margin-left: 20px;
    margin-right: 20px;
    vertical-align: middle;
    /*background: #00FFCC;*/
  }    
  
  #monthandyear {
    vertical-align: middle;
  }
  
  #btnNext {
    text-decoration: none;
    font-size: 35px;
    margin-right: 20px;
    vertical-align: middle;
    /*background: #00FFCC;*/
  }
  
  #btnNextYr {
    text-decoration: none;
    font-size: 35px;
    vertical-align: middle;
    /*background: #00FFCC;*/
  }        
  
  #divcalendartable {
    clear: both;
  }
  
  .daysheader {
    background: #C0C0C0;
    height: auto;
    text-align: center;
  }
  
  #prevmonthdates {
    background-color: #E0E0E0;
  }
  
  #nextmonthdates {
    background-color: #E0E0E0;
  }
  
  #currentmonthdates {
    background-color: #FFFFFF;
  }
  
  #cellvaluespan {
    background: #FF0000;
  }
  
  #cellvaluelist {
    background: #FFCC00;
  }        
  
  .swim {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 80%;
    text-align: center;
    background: #445511;
    color: #F5F5F5;
    margin-bottom: 5px;
    padding: 5px;
  }
  
  .chrono {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 80%;
    text-align: center;
    background: #778899;
    color: #F5F5F5;
    margin-bottom: 5px;
    padding: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-2.2.4.min.js"&gt;&lt;/script&gt;
  &lt;div class="divcalendar"&gt;
  
  &lt;div id="calendaroverallcontrols"&gt;
  
    &lt;div id="calendarmonthcontrols"&gt;
       &lt;a id="btnPrevYr" href="#" title="Previous Year"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt; 
  
      &lt;a id="btnPrev" href="#" title="Previous Month"&gt;&lt;span&gt;&lt;&lt;/span&gt;&lt;/a&gt;
    
    
      
  
      &lt;div id="monthandyear"&gt;&lt;/div&gt;
  
  
      &lt;a id="btnNext" href="#" title="Next Month"&gt;&lt;span&gt;&gt;&lt;/span&gt;&lt;/a&gt;
  
    &lt;a id="btnNextYr" href="#" title="Next Year"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;      
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- extra  --&gt;
  &lt;div id="divcalendartable"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>