Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Calendar starting with Monday 1

Status
Not open for further replies.
Diamax

Diamax

Programmer
Jan 13, 2006
3
CA
Hello guys!
I'm new to this forums, and here it is my new post!

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
 
Sort by date Sort by votes
Date data type is often just modulo arithmetic. If you can the heading to monday going first, you simple change this line:

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

to

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

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:
[tt] //x=0;
//x+=7;[/tt]

and then

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

 
Upvote 0 Downvote
Hi Tsuji!

Well you've been very helpful, very nice explanations, and solution(s). The solution as you posted it was a little more than I expected, I was looking at the x but didn't quite figured it out as you did, actually I just didn't figure it out, plain and simple. your post on this is great, now the calendar is working as I wanted it too.
Would you mind if I post your solution, in the other forums that I was asking the same question? so if someone is interested would see how it was done, of course all credit would go to you.

THANK YOU VERY MUCH!!

Diamax
 
Upvote 0 Downvote
>Would you mind if I post your solution, in the other forums that I was asking the same question?
No problem at all, Diamax.

>of course all credit would go to you.
No need, I learn from your post and other posts as well.

To make your post elsewhere more solid, the x problem is that x=0 should be put outside of j-loop. In you do that, the conditional should be spared of [tt](...+6)%7>(i+x)[/tt] %7, ie it should then be read [tt](...+6)>(i+x). That is all the variations needed. The simplest of course is just to commented out x all together and use modulo 7 instead.
 
Upvote 0 Downvote
Well Tsuji, your last suggestion I wasn't able to implement it, it's just that I'm at expert by any means, I guess I didn't really understand your message, however the solution in your first post works perfectly, so I will go with that as I can make use of it.

Again your help is really apreciated, you are the only one that found a solution to this question!

Thank you Tsuji!

Diamax
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Adding datepicker calendar dynamically
Replies
0
Views
210
lexer
lexer
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
154
ggriffit
ggriffit
JPSeo
  • Locked
  • Question
Another cjhild_process.exec issue with complex shell command
Replies
0
Views
108
JPSeo
JPSeo
waubain
  • Locked
  • Question
id tag not loading new data with new ajax call 1
Replies
4
Views
176
waubain
waubain
Disskyz
  • Locked
  • Question
Need help with javascript date 1
Replies
4
Views
171
Smurfmania
Smurfmania

Part and Inventory Search

Sponsor

Back
Top