Highlighting today's date in a calendar

JavaScript
1

Hello.

How do I highlight today’s date in a js calendar? Please help. Here’s the js -

[CODE]
window.onload = function(){
var d = new Date();
var month_name = [‘January’,‘February’,‘March’,‘April’,‘May’,‘June’,‘July’,‘August’,‘September’,‘October’,‘November’,‘December’];
var month = d.getMonth(); //0-11
var year = d.getFullYear(); //2014
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 = [‘Mon’,‘Tue’,‘Wed’,‘Thu’,‘Fri’,‘Sat’,‘Sun’];
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);
document.getElementById(“calendar-month-year”).innerHTML = month_name[month]+" "+year;
document.getElementById(“calendar-dates”).appendChild(calendar);
}

function get_calendar(day_no, days){
var table = document.createElement(‘table’);
var tr = document.createElement(‘tr’);

//row for the day letters
for(var c=0; c<=6; c++){
    var th = document.createElement('th');
    th.innerHTML = "MTWTFSS"[c];
    tr.appendChild(th);
}
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');
    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');
        td.innerHTML = count;
        count++;
        tr.appendChild(td);
    }
    table.appendChild(tr);
}
return table;

} [/CODE]

2

You can get the current year, month and day like this in JavaScript.

var d = new Date();
var year = d.getFullYear();
var month = d.getMonth();
var day = d.getDate();

Find the code that is rendering the cell and if the year, month and day match add a class.

td.className = 'today';
3

Hi, thanks for the reply.
I’m sorry, but I’m not sure what you mean by “Find the code that is rendering the cell and if the year, month and day match add a class.”
Do you mean the html code? Here’s the html code that I’m using -

<div id="calendar-container"> <div id="calendar-header"> <span id="calendar-month-year"></span> </div> <div id="calendar-dates"> </div> </div>
So I’m not sure where to put td.className = 'today';

4

Can amend the code to the following as it only shows the current month?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
  .today {
    background: blue;
    color: #fff;
  }
</style>
</head>
<body>
<div id="calendar-month-year"></div>
<div id="calendar-dates"></div>

<script type="text/javascript">
window.onload = function(){
  var d = new Date();
  var month_name = ['January','February','March','April','May','June','July','August','September','October','November','December'];
  var month = d.getMonth();   //0-11
  var year = d.getFullYear(); //2014
  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 = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];
  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);
  document.getElementById("calendar-month-year").innerHTML = month_name[month]+" "+year;
  document.getElementById("calendar-dates").appendChild(calendar);
}
function get_calendar(day_no, days){
  var todaysDate = new Date().getDate();
  var table = document.createElement('table');
  var tr = document.createElement('tr');

  //row for the day letters
  for(var c=0; c<=6; c++){
      var th = document.createElement('th');
      th.innerHTML = "MTWTFSS"[c];
      tr.appendChild(th);
  }
  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');
      if (count == todaysDate) {
        td.className = 'today';
      }
      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');
          if (count == todaysDate) {
            td.className = 'today';
          }
          td.innerHTML = count;
          count++;
          tr.appendChild(td);
      }
      table.appendChild(tr);
  }
return table;
}
</script>
</body>
</html>
1 Like
5

Thank you so much! it works!

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.