PDA

View Full Version : Calendar starting with Monday

Diamax
01-13-2006, 08:49 AM
Hello guys!

I found this callendar script on the internet, and I like it very much, but I would really like the week to start with Monday, I already make the change so it shows "Monday" in the first column, but I cannot figure out how to display properly the date, because the date it still displays as if the week starts with "Sunday". I hope you guys can help me with this, because I've tried so many things but it just doesn't display properly.
Here it is the script for this callendar:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Calendar</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">


<META content="MSHTML 6.00.2800.1106" name=GENERATOR></HEAD>
<BODY bgcolor="#e8e8e8">

<script type="text/javascript">

<!--

function ampCalendar_setFebDays()
{
if ( this.month == 1 )
{
if ( this.year % 4 == 0 )
{
if ( this.year % 100 == 0)
{
if ( this.year % 400 == 0)
this.m_rgDays[1] = 29;
}
else
this.m_rgDays[1] = 29;
}
}
}

function ampCalendar_Display()
{
var strDeadCell;
var strHdrCell;
var strCellContents;
var nColor;
var strDateNum;
var strCellText;

strDeadCell = "<td width=\"14%\" height=\"90\" bgcolor=\"#" +
this.colorDead + "\">&nbsp;</td>";

strHdrCell = "<td align=\"center\" width=\"14%\" bgcolor=\"#ffffff\">" +
"<font color=\"#000000\" face=\"";

document.writeln("<table align=\"" + this.align + "\" border=0 width=\"80%\">");
document.writeln("<tr><td align=\"center\" valign=\"bottom\" bgcolor=\"#e8e8e8\">");
document.writeln("<font face=\"Arial, Helvetica, Verdana\" size=5 color=\"#000000\"><b>" + this.title + "</b></font>");
document.writeln("</td></tr>");
document.writeln("<tr><td bgcolor=\"#000000\">");
document.writeln("<table width=\"100%\" border=\"0\" cellpadding=\"3\" bordercolor=\"#ffffff\" bordercolordark=\"#ffffff\" bordercolorlight=\"#ffffff\">");
document.writeln("<tr>");
document.writeln(strHdrCell + this.font + "\" size=\"" + this.headSize + "\"><strong>Monday</strong></font></td>");
document.writeln(strHdrCell + this.font + "\" size=\"" + this.headSize + "\"><strong>Tuesday</strong></font></td>");
document.writeln(strHdrCell + this.font + "\" size=\"" + this.headSize + "\"><strong>Wednesday</strong></font></td>");
document.writeln(strHdrCell + this.font + "\" size=\"" + this.headSize + "\"><strong>Thursday</strong></font></td>");
document.writeln(strHdrCell + this.font + "\" size=\"" + this.headSize + "\"><strong>Friday</strong></font></td>");
document.writeln(strHdrCell + this.font + "\" size=\"" + this.headSize + "\"><strong>Saturday</strong></font></td>");
document.writeln(strHdrCell + this.font + "\" size=\"" + this.headSize + "\"><strong>Sunday</strong></font></td>");
document.writeln("</tr>");

// now create each row
for (j = 0; j < 6; j++)
{
if( 5 == j && this.m_myDate.getDate() < 30 )
{
// Check to see if we've already printed all
// the days. If so, get out without doing another row.
break;
}
x = 0;
document.writeln("<tr>");
for( i = 0; i < 7; i++)
{
// Is this a "dead" cell?
if ( this.m_myDate.getDay() > (i + x) ||
this.m_myDate.getMonth() != this.month - 1 )
document.writeln( strDeadCell );
else
{
if ( this.m_myDate.getYear() < this.m_now.getYear())
nColor = this.colorPast;
else if (this.m_myDate.getYear() > this.m_now.getYear())
nColor = this.colorFuture;
else
{
// Same year...
if (this.m_myDate.getMonth() < this.m_now.getMonth() )
nColor = this.colorPast;
else if (this.m_myDate.getMonth() > this.m_now.getMonth() )
nColor = this.colorFuture;
else
{
// Same month...
if (this.m_myDate.getDate() < this.m_now.getDate())
nColor = this.colorPast;
else if (this.m_myDate.getDate() > this.m_now.getDate())
nColor = this.colorFuture;
else
nColor = this.colorNow;
}
}
strDateNum = this.m_myDate.getDate();
strCellText = this.getText( this.m_myDate.getDate() );
strCellContents = "<td valign=\"top\" width=\"14%\" height=\"90\" " +
"bgcolor=\"#" + nColor + "\"><b><font face=\"" +
this.font + "\" size=\"" + this.fontSize + "\">" +
strDateNum + "</b><br><font face=\"" +
this.font + "\" size=" + this.fontSize + ">" +
strCellText + "</font></td>";
document.writeln( strCellContents );
this.m_myDate.setDate( this.m_myDate.getDate() + 1 );
}
}
document.writeln("</tr>");
x += 7;
}

document.writeln("</table>");
document.writeln("</td></tr></table>");
document.writeln("</br>");


}

function ampCalendar_setItem( nDay, strText )
{
x = this.m_rgDay.length;
this.m_rgDay[x + 1] = nDay;
this.m_rgTxt[x + 1] = strText;
}

function ampCalendar_getText( n )
{
var x = 0;
while( x < this.m_rgDay.length )
{
if ( n == this.m_rgDay[x] )
return this.m_rgTxt[x] ;

x++;
}
return "";
}

//
// ampCalendar() - Constructor
//
function ampCalendar( m, y )
{
// properties
this.m_rgDay = new Array();
this.m_rgTxt = new Array();

// Static stuff

// Colors
this.colorDead = "686868";
this.colorFuture = "00FA9A";
this.colorPast = "b0b0b0";
this.colorNow = "ffff00";

this.m_rgDays = new Array( 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 );
this.m_rgMths = new Array( "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" );

this.font = "Verdana, Arial, Helvetica";
this.fontSize = "3";
this.headSize = "3";
this.align = "center";

this.month = m;
this.year = (y < 1900? y+1900: y);
this.m_now = new Date();
this.m_myDate = new Date(this.year, m - 1, 1);

this.monthName = this.m_rgMths[ this.m_myDate.getMonth() ];
this.title = this.monthName + " " + this.year;

// Methods
this.setFebDays = ampCalendar_setFebDays;
this.display = ampCalendar_Display;
this.setItem = ampCalendar_setItem;
this.getText = ampCalendar_getText;

this.setFebDays();
}

//-->

</script>

<SCRIPT>
// This line gets today's date in the variable
// called 'theDate'.

theDate = new Date();

// Create a new calendar object
//This line takes the current month and adds
// 1 to create the calendar. For some strange
// reason, the JavaScript Date() class uses
// month numbers of 0-11, not 1-12. ampCal
// uses 1-12 numbers for the months to avoid
// confusion for casual users.

myCal = new ampCalendar(theDate.getMonth()+1, theDate.getYear());

// This big 'switch' statement sets the
// calendar's day entries according to the
// current month. Note that you only need to
// set days where you actually have data. You
// can also omit entire months and the calendar
// will still display for that month but it
// will be not have any day entries.

switch ( theDate.getMonth()+1 )
{
case 1:
myCal.setItem( 1, "New Year's Day" );
break;

case 2:
myCal.setItem( 14, "Valentine's Day" );
break;

case 3:
myCal.setItem( 1, "" );
myCal.setItem( 8, "" );
break;

case 4:
myCal.setItem( 22, "" );
myCal.setItem( 25, "" );
myCal.setItem( 26, "" );
break;

case 5:
myCal.setItem( 15, "" );
myCal.setItem( 31, "" );
break;

case 6:
myCal.setItem( 14, "" );
break;

case 7:
myCal.setItem( 6, "" );
myCal.setItem( 18, "2:30PM: Katelyn<br>Birthday Party" );
myCal.setItem( 31, "12-1PM: Signwave<br>50 and 405" );
break;

case 8:
myCal.setItem( 24, "4-6PM: Signwave<br>Fay and Grissom" );
myCal.setItem( 25, "4-6PM: Signwave<br>Parkway" );
myCal.setItem( 31, "<marquee><b>7-7: Vote for Parker</b></marquee><hr>Poll Captain-14" );
break;

case 9:
myCal.setItem( 6, "HOLIDAY - Labor Day" );
myCal.setItem( 1, "Anniversary-Kari" );
break;

case 10:
myCal.setItem( 4, "" );
break;

case 11:
myCal.setItem( 11, "HOLIDAY - Veterans Day" );
myCal.setItem( 16, "" );
myCal.setItem( 21, "" );
myCal.setItem( 25, "HOLIDAY - Thanksgiving Day" );
myCal.setItem( 26, "HOLIDAY - Day After" );
break;

case 12: myCal.setItem( 3, "");
myCal.setItem( 4, "");
myCal.setItem( 9, "");
myCal.setItem( 21, "");
myCal.setItem( 27, "");
myCal.setItem( 28, "");
myCal.setItem( 29, "");
myCal.setItem( 30, "");
myCal.setItem( 31, "");
break;

// Set the title to something cool
ampCal.title = ampCal.title + "Monthly Events";
}

// Now display the calendar

myCal.display();
</SCRIPT>
</BODY></HTML>


Any input is apreciated!
Thank you very much guys!
Diamax
01-14-2006, 04:06 PM
Hello everybody!

Here it is the solution to my question, in case someone is interested, as Tsuji from Tek-Tips Forums posted it:


****************
Date data type is often just modulo arithmetic. If you can the heading to monday going first, you simple change this line:

> if ( this.m_myDate.getDay() > (i + x) ||
this.m_myDate.getMonth() != this.month - 1 )

to

if ( (this.m_myDate.getDay()+6)%7 > (i + x) || this.m_myDate.getMonth() != this.month - 1 )

Though that makes the calendar works already, you have to correct one non-sense. That is the use of x. Your x+=7 line is inside the j-loop, but, before the i-loop you have x=0, hence, it is absolutely non-sense, and it makes the above modification work by such mistake. To properly make the logic correct, you should

[1] comment all these x line:
//x=0;
//x+=7;

and then

[2] replace the above conditional by this.
if ( (this.m_myDate.getDay()+6)%7 > i || this.m_myDate.getMonth() != this.month - 1 )
****************