Log in

View Full Version : 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:


<!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:


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:


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

It should be:


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

or:


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:


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:


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:


<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...