Hi Everyone,
Im having a slight problem with my calendar script. If i choose another year month my script doesnt give the correct dates for that year and month, it gives the daates for the current year. For example if i choose January 2010, it will give me that dates for January 2003. Can someone please help me? =(
<---------html page ------------------------------------------->
<html>
<head>
<title>Untitled</title>
<script src=http://www.webdeveloper.com/forum/archive/index.php/"cal.js" type="text/javascript"></script>
<script>
function init()
{
doCal(Calendar.getMonth(),Calendar.getYear());
}
</script>
</head>
<body>
<div id="Calendar"></div>
<script>init();</script>
</html>
<------------------.JS file --------------------------------------->
// SET ARRAYS
var day_of_week = new Array('Sun','Mon','Tue','Wed','Thu','Fri','Sat');
var month_of_year = new Array('January','February','March','April','May','June','July','August','September','October','Novem ber','December');
// DECLARE AND INITIALIZE VARIABLES
var Calendar = new Date();
var today = Calendar.getDate(); // Returns day (1-31)
var weekday = Calendar.getDay(); // Returns day (1-31)
var DAYS_OF_WEEK = 7; // "constant" for number of days in a week
var DAYS_OF_MONTH = 31; // "constant" for number of days in a month
var cal; // Used for printing
function doCal(myMonth,myYear){
var month = myMonth;
var year = myYear;
var TR_start = '<TR>';
var TR_end = '</TR>';
var highlight_start = '<TD BGCOLOR=#990000><TABLE CELLSPACING=0 BORDER=0 BORDERCOLOR=CCCCCC style="font-family:verdana,arial,ms sans serif;color:white;"><TR><TD><B><CENTER>';
var highlight_end = '</CENTER></TD></TR></TABLE></B>';
var TD_start = '<TD><CENTER>';
var TD_end = '</CENTER></TD>';
cal = '<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0 style="BORDER-COLOR: BLACK;font-family:verdana,arial,ms sans serif;" ><TR><TD>';
cal += '<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=2>' + TR_start;
cal += '<TD COLSPAN="' + DAYS_OF_WEEK + '" BGCOLOR=#990000 style="color:white;"><CENTER><B>';
cal += month_of_year[month] + ' ' + year + '</B>' + TD_end + TR_end;
cal += TR_start;
Calendar.setMonth(month); // Start the calendar month at now
Calendar.setDate(1); // Start the calendar day at '1'
// LOOPS FOR EACH DAY OF WEEK
for(index=0; index < DAYS_OF_WEEK; index++)
{
// BOLD TODAY'S DAY OF WEEK
if(weekday == index){
cal += TD_start + '<B>' + day_of_week[index] + '</B>' + TD_end;
//alert("here");
}
// PRINTS DAY
else
cal += TD_start + day_of_week[index] + TD_end;
}
cal += TD_end + TR_end;
cal += TR_start;
// FILL IN BLANK GAPS UNTIL TODAY'S DAY
for(index=0; index < Calendar.getDay(); index++)
cal += TD_start + ' ' + TD_end;
// LOOPS FOR EACH DAY IN CALENDAR
for(index=0; index < DAYS_OF_MONTH; index++)
{
if( Calendar.getDate() > index )
{
// RETURNS THE NEXT DAY TO PRINT
week_day =Calendar.getDay();
// alert(week_day);
// START NEW ROW FOR FIRST DAY OF WEEK
if(week_day == 0)
cal += TR_start;
if(week_day != DAYS_OF_WEEK)
{
// SET VARIABLE INSIDE LOOP FOR INCREMENTING PURPOSES
var day = Calendar.getDate();
// HIGHLIGHT TODAY'S DATE
if( today==Calendar.getDate() )
cal += highlight_start + day + highlight_end + TD_end;
// PRINTS DAY
else
cal += TD_start + day + TD_end;
}
// END ROW FOR LAST DAY OF WEEK
if(week_day == DAYS_OF_WEEK)
cal += TR_end;
}
// INCREMENTS UNTIL END OF THE MONTH
Calendar.setDate(Calendar.getDate()+1);
}// end for loop
// PRINT CALENDAR
cal += '</TD></TR></TABLE></tr></td></TABLE>';
// SET ARRAYS
cal +="<select name='MonthValue'>"
for (var x=0;x<12;x++)
{
cal +="<option value='http://www.webdeveloper.com/forum/archive/index.php/" + x + "'>" + month_of_year[x];
}
cal +="</select>"
cal +="<select name='YearValue'>"
for (var x=2003;x<2050;x++)
{
cal +="<option value='http://www.webdeveloper.com/forum/archive/index.php/" + x + "'>" + x;
}
cal +="</select>"
cal +="<input type=button value='http://www.webdeveloper.com/forum/archive/index.php/Get Calendar' onclick='again();'>"
document.getElementById("Calendar").innerHTML = cal;
return;
}
function again()
{
var m,y
var Calendar = new Date();
var today = Calendar.getDate();
var day = Calendar.getDate();
m = document.all["MonthValue"].options.value;
y = document.all["YearValue"].options.value;
doCal(m,y,today);
}
// End -->
Im having a slight problem with my calendar script. If i choose another year month my script doesnt give the correct dates for that year and month, it gives the daates for the current year. For example if i choose January 2010, it will give me that dates for January 2003. Can someone please help me? =(
<---------html page ------------------------------------------->
<html>
<head>
<title>Untitled</title>
<script src=http://www.webdeveloper.com/forum/archive/index.php/"cal.js" type="text/javascript"></script>
<script>
function init()
{
doCal(Calendar.getMonth(),Calendar.getYear());
}
</script>
</head>
<body>
<div id="Calendar"></div>
<script>init();</script>
</html>
<------------------.JS file --------------------------------------->
// SET ARRAYS
var day_of_week = new Array('Sun','Mon','Tue','Wed','Thu','Fri','Sat');
var month_of_year = new Array('January','February','March','April','May','June','July','August','September','October','Novem ber','December');
// DECLARE AND INITIALIZE VARIABLES
var Calendar = new Date();
var today = Calendar.getDate(); // Returns day (1-31)
var weekday = Calendar.getDay(); // Returns day (1-31)
var DAYS_OF_WEEK = 7; // "constant" for number of days in a week
var DAYS_OF_MONTH = 31; // "constant" for number of days in a month
var cal; // Used for printing
function doCal(myMonth,myYear){
var month = myMonth;
var year = myYear;
var TR_start = '<TR>';
var TR_end = '</TR>';
var highlight_start = '<TD BGCOLOR=#990000><TABLE CELLSPACING=0 BORDER=0 BORDERCOLOR=CCCCCC style="font-family:verdana,arial,ms sans serif;color:white;"><TR><TD><B><CENTER>';
var highlight_end = '</CENTER></TD></TR></TABLE></B>';
var TD_start = '<TD><CENTER>';
var TD_end = '</CENTER></TD>';
cal = '<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0 style="BORDER-COLOR: BLACK;font-family:verdana,arial,ms sans serif;" ><TR><TD>';
cal += '<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=2>' + TR_start;
cal += '<TD COLSPAN="' + DAYS_OF_WEEK + '" BGCOLOR=#990000 style="color:white;"><CENTER><B>';
cal += month_of_year[month] + ' ' + year + '</B>' + TD_end + TR_end;
cal += TR_start;
Calendar.setMonth(month); // Start the calendar month at now
Calendar.setDate(1); // Start the calendar day at '1'
// LOOPS FOR EACH DAY OF WEEK
for(index=0; index < DAYS_OF_WEEK; index++)
{
// BOLD TODAY'S DAY OF WEEK
if(weekday == index){
cal += TD_start + '<B>' + day_of_week[index] + '</B>' + TD_end;
//alert("here");
}
// PRINTS DAY
else
cal += TD_start + day_of_week[index] + TD_end;
}
cal += TD_end + TR_end;
cal += TR_start;
// FILL IN BLANK GAPS UNTIL TODAY'S DAY
for(index=0; index < Calendar.getDay(); index++)
cal += TD_start + ' ' + TD_end;
// LOOPS FOR EACH DAY IN CALENDAR
for(index=0; index < DAYS_OF_MONTH; index++)
{
if( Calendar.getDate() > index )
{
// RETURNS THE NEXT DAY TO PRINT
week_day =Calendar.getDay();
// alert(week_day);
// START NEW ROW FOR FIRST DAY OF WEEK
if(week_day == 0)
cal += TR_start;
if(week_day != DAYS_OF_WEEK)
{
// SET VARIABLE INSIDE LOOP FOR INCREMENTING PURPOSES
var day = Calendar.getDate();
// HIGHLIGHT TODAY'S DATE
if( today==Calendar.getDate() )
cal += highlight_start + day + highlight_end + TD_end;
// PRINTS DAY
else
cal += TD_start + day + TD_end;
}
// END ROW FOR LAST DAY OF WEEK
if(week_day == DAYS_OF_WEEK)
cal += TR_end;
}
// INCREMENTS UNTIL END OF THE MONTH
Calendar.setDate(Calendar.getDate()+1);
}// end for loop
// PRINT CALENDAR
cal += '</TD></TR></TABLE></tr></td></TABLE>';
// SET ARRAYS
cal +="<select name='MonthValue'>"
for (var x=0;x<12;x++)
{
cal +="<option value='http://www.webdeveloper.com/forum/archive/index.php/" + x + "'>" + month_of_year[x];
}
cal +="</select>"
cal +="<select name='YearValue'>"
for (var x=2003;x<2050;x++)
{
cal +="<option value='http://www.webdeveloper.com/forum/archive/index.php/" + x + "'>" + x;
}
cal +="</select>"
cal +="<input type=button value='http://www.webdeveloper.com/forum/archive/index.php/Get Calendar' onclick='again();'>"
document.getElementById("Calendar").innerHTML = cal;
return;
}
function again()
{
var m,y
var Calendar = new Date();
var today = Calendar.getDate();
var day = Calendar.getDate();
m = document.all["MonthValue"].options.value;
y = document.all["YearValue"].options.value;
doCal(m,y,today);
}
// End -->