How to lightUp the current date on the calendar?

**rainarts** · 07-30-2008, 04:22 PM

Hi everone! I would like ask about highlighting the current date on my calendar...

The script is as follow:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
   <head> 
      <title>Calendar</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   </head>
<body>
<form>
<select id="selectMonth" onChange="showMeTheMonth()">
<option value="January 1, 2008">January</option>
<option value="February 1, 2008">February</option>
<option value="March 1, 2008">March</option>
<option value="April 1, 2008">April</option>
<option value="May 1, 2008">May</option>
<option value="June 1, 2008">June</option>
<option value="July 1, 2008">July</option>
<option value="August 1, 2008">August</option>
<option value="September 1, 2008">Semptember</option>
<option value="October 1, 2008">October</option>
<option value="November 1, 2008">November</option>
<option value="December 1, 2008">December</option>
</select>
</form><br />
<p>
<div id="showMyCalendar">&nbsp;</div>
</p>

<script type="text/javascript">

<!-- Begin Hiding

Date.prototype.getMonthNames = function() { return [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ][this.getMonth()]; }

Date.prototype.getDaysInMonth = function() 
{ return new Date(this.getFullYear(), this.getMonth() + 1, 0).getDate(); }

Date.prototype.calendar = function()
{  var numberOfDays = this.getDaysInMonth();
   var startingDay = new Date(this.getFullYear(), this.getMonth(), 1).getDay();
   
var calendarTable = '<table summary="Calendar" class="calendar" style="text-align: center;">';

calendarTable += '<caption>' + this.getMonthNames() + '&nbsp;' + this.getFullYear() + '</caption>';

calendarTable += '<tr><td colspan="7"></td></tr>';

calendarTable += '<tr>';

calendarTable += '<td><font color="#B42600">S</font></td>';

calendarTable += '<td>M</td>';

calendarTable += '<td>T</td>';

calendarTable += '<td>W</td>';

calendarTable += '<td>TH</td>';

calendarTable += '<td>F</td>';

calendarTable += '<td>S</td></tr>';

for ( var i = 0; i < startingDay; i++ ) 
{ 

calendarTable += '<td>&nbsp;</td>'; }

var border = startingDay;

for ( i = 1; i <= numberOfDays; i++ ) 
{ 

calendarTable += '<td>' + i + '</td>'; border++;

if ( ( ( border % 7 ) == 0 ) && ( i < numberOfDays ) ) 
{ 

calendarTable += '<tr></tr>'; } 

}

while( ( border++ % 7) != 0 ) 
{ 

calendarTable += '<td>&nbsp;</td>'; }

calendarTable += '</table>'; return 
calendarTable; }
  
var currentMonth = document.getElementById('selectMonth');
  
var showStr = document.getElementById('showMyCalendar');

window.onload = function() 
{ var today = new Date();
  var month = today.getMonth();

currentMonth.selectedIndex = month; 

showStr.innerHTML = new Date( currentMonth.value ).calendar(); 
}

function showMeTheMonth()
{
nMonth = new Date( currentMonth.value );

showStr.innerHTML = nMonth.calendar();

} 

// Done Hiding -->

</script>

</body>
</html>

**jscheuer1** · 07-31-2008, 05:08 AM

I haven't figured out what's wrong with it yet, but it's just showing:

undefined

where I would expect to see the calendar. However, you can just do something like:

Code:

if( some code to determine if this is the today's date )
write in an id for the element

Then in your stylesheet, give that id a certain background color. If I can get it working (or you can tell me what to do to get it working), I can be more specific.

**jscheuer1** · 07-31-2008, 05:41 AM

OK, I figured out the problem, there was a line break in your posted code that did not belong, here:

Code:

calendarTable += '</table>'; return 
calendarTable; }

It should be:

Code:

calendarTable += '</table>'; return calendarTable; }

or:

Code:

calendarTable += '</table>';
return calendarTable; }

Either would be fine. Once I figured that out, the calendar worked. Interesting use of prototypes of the Date object, by the way.

Now, since it all uses the current year, we don't need to worry about that. The selected index of the select element will be the month number of the displayed calendar, and i here:

Code:

for ( i = 1; i <= numberOfDays; i++ ) 
{ 

calendarTable += '<td>' + i + '</td>'; border++;

if ( ( ( border % 7 ) == 0 ) && ( i < numberOfDays ) ) 
{ 

calendarTable += '<tr></tr>'; } 

}

will be the date number for each cell in the calendar that displays a date number. So I modified that section to:

Code:

for (var now = new Date(), id = '', i = 1; i <= numberOfDays; i++ ) 
{ 
if(now.getMonth() == document.getElementById('selectMonth').selectedIndex && now.getDate() == i)
id = ' id="currentday"';
else id = '';
calendarTable += '<td' + id + '>' + i + '</td>'; border++;

if ( ( ( border % 7 ) == 0 ) && ( i < numberOfDays ) ) 
{ 

calendarTable += '<tr></tr>'; } 

}

That will give the current date's cell an id of currentday. Next I put this stylesheet in the head:

Code:

<style type="text/css">
#currentday {
background-color:yellow;
}
</style>

And (as they say) Bob's your Uncle!

**rainarts** · 07-31-2008, 11:10 AM

It was a great help from you. Thanks a lot...

**rainarts** · 07-31-2008, 11:20 AM

Actually i have another calendar script here that reacts with the current date! But sad to say that this code is a bit messy and long. Thats why i prefer prototyping instead. Thanks again...

Thread: How to lightUp the current date on the calendar?

Thread Tools

Search Thread

How to lightUp the current date on the calendar?

The Following User Says Thank You to jscheuer1 For This Useful Post:

Great help!

It makes me dizzy

Bookmarks

Bookmarks

Posting Permissions