gagsfitz
05-18-2005, 07:36 AM
Hi,
I have an event calendar that, when the month is changed in a select box, refreshed thee calendar to show the relevant days/weeks of that month. I am using id tags to name the table cells. using onclick, when a day(table cell) is clicked, the event for that day should appear at the top of the page.
The problem I have is that when the page is reloaded after a change in the drop down, the calender is changing as it should but the values in the day of the number of the day is not changing as it should initially (i.e. click that day and it loads the previously selected date for that day. Once that has been loaded, all works as it should.
Any help would be greatly appreciated. Code below:
<br />
[php]
function fSetSelectedDay(myDate, pageName, categoryID){
// alert("myDate is: "+myDate);
// alert("pageName is: "+pageName);
// alert("categoryID is: "+categoryID);
var dateField1 = myDate;
// var dateField1 = trim(myElement.substring(0,2));
if (dateField1 != "" || dateField != undefined || !isNaN(dateField)) {
document.location=pageName + "?categoryID="+categoryID+"&date=" + dateField1 + "-" + calendarForm.tbSelMonthYear.value;
} else {
document.location=pageName + "?categoryID="+categoryID+"&date=" + 1 + "-" + calendarForm.tbSelMonthYear.value;
}
}
function fGetDaysInMonth(iMonth, iYear) {
var dPrevDate = new Date(iYear, iMonth, 0);
return dPrevDate.getDate();
}
function fDrawCal(iYear, iMonth, pageName, categoryID, branchID) {
// alert(pageName);
// alert("iMonth is: "+iMonth);
var myMonth;
myMonth = fBuildCal(iYear, iMonth);
document.write("<table class=\"calendarTable\" border=\"0\" cellpadding=\"0\" cellspacing=\"1\" width=\"100%\">");
document.write("<tr><th>" + myMonth[0][0] + " <\/th>");
document.write("<th>" + myMonth[0][1] + " <\/th>");
document.write("<th>" + myMonth[0][2] + " <\/th>");
document.write("<th>" + myMonth[0][3] + " <\/th>");
document.write("<th>" + myMonth[0][4] + " <\/th>");
document.write("<th>" + myMonth[0][5] + " <\/th>");
document.write("<th>" + myMonth[0][6] + " <\/th><\/tr>");
for (w = 1; w < 7; w++) {
document.write("<tr height=\"40\">");
for (d = 0; d < 7; d++) {
document.write("<td id=\"calCell\" title=\"Click to view this event: Date is :" +myMonth[w][d]+ "\" ");
if (!isNaN(myMonth[w][d])) {
document.write(" onclick=\"fSetSelectedDay("+myMonth[w][d]+", '"+pageName+"', "+categoryID+");\" onmouseout=\"unHighLight(this);\" onmouseover=\"highLight(this);\">");
document.write ("<a id=\"calDateText_\"> ");
document.write(myMonth[w][d] + "<\/font><br><span id=\"calDateText_" + myMonth[w][d] + "\"><\/span></a>");
} else {
// alert(myMonth[w][d]);
document.write(" >");
document.write ("<a id=\"calDateText_\"> ");
document.write(" <\/a><br> ");
}
document.write("<\/td>");
}
document.write("<\/tr>");
}
document.write("<\/table>");
if (isOpera) {
document.minicon.location = level + "utils/eventsHandler.asp?action=getEventsForMonth&year=" + iYear + "&month=" + iMonth + "&branchID="+branchID;
} else {
window.frames["minicon"].location = level + "utils/eventsHandler.asp?action=getEventsForMonth&year=" + iYear + "&month=" + iMonth + "&branchID="+branchID;
}
}
function fBuildCal(iYear, iMonth) {
var aMonth = new Array();
aMonth[0] = new Array(7);
aMonth[1] = new Array(7);
aMonth[2] = new Array(7);
aMonth[3] = new Array(7);
aMonth[4] = new Array(7);
aMonth[5] = new Array(7);
aMonth[6] = new Array(7);
var dCalDate = new Date(iYear, iMonth-1, 1);
var iDayOfFirst = dCalDate.getDay();
var iDaysInMonth = fGetDaysInMonth(iMonth, iYear);
var iVarDate = 1;
var i, d, w;
aMonth[0][0] = "Sun";
aMonth[0][1] = "Mon";
aMonth[0][2] = "Tue";
aMonth[0][3] = "Wed";
aMonth[0][4] = "Thu";
aMonth[0][5] = "Fri";
aMonth[0][6] = "Sat";
for (d = iDayOfFirst; d < 7; d++) {
aMonth[1][d] = iVarDate;
iVarDate++;
}
for (w = 2; w < 7; w++) {
for (d = 0; d < 7; d++) {
if (iVarDate <= iDaysInMonth) {
aMonth[w][d] = iVarDate;
iVarDate++;
}
}
}
return aMonth;
}
function fUpdateCal(monthYear, branchID) {
var tmpAr = monthYear.split("-");
var monthName = tmpAr[0];
var iYear = tmpAr[1];
var iMonth=1;
for (var i = 0; i < MONTH_NAMES.length ; i++) {
if (MONTH_NAMES[i]==monthName) {
iMonth = i;
break;
}
}
for (var i = 0; i < 31; i++) {
if (document.getElementById("calDateText_" + i)!=null) {
document.getElementById("calDateText_" + i).innerHTML = " ";
}
}
myMonth = fBuildCal(iYear, iMonth);
for (w = 1; w < 7; w++) {
for (d = 0; d < 7; d++) {
// if (!isNaN(myMonth[w][d])) {
// document.write(myMonth[w][d] + "<\/font><br><span class=\"vsm\" id=\"calDateText_" + myMonth[w][d] + "\"> <\/span>");
// } else {
// document.write(" <\/font><br> ");
// }
if (!isNaN(myMonth[w][d])) {
document.all.calDateText_[((7*w)+d)-7].outerHTML = "<a id=\"calDateText_\">" + myMonth[w][d] + "<br><span id=\"calDateText_" + myMonth[w][d] + "\"> <\/span></a>";
} else {
document.all.calDateText_[((7*w)+d)-7].outerHTML = "<a id=\"calDateText_\"><br><span id=\"calDateText_" + myMonth[w][d] + "\"> <\/span>";
}
}
}
if (iMonth < 10) {
iMonth = "0"+iMonth;
}
if (isOpera) {
document.minicon.location = level + "utils/eventsHandler.asp?action=getEventsForMonth&branchID="+branchID+"&year=" + iYear + "&month=" + iMonth;
} else {
window.frames["minicon"].location = level + "utils/eventsHandler.asp?action=getEventsForMonth&branchID="+branchID+"&year=" + iYear + "&month=" + iMonth;
}
}
<br />
I have an event calendar that, when the month is changed in a select box, refreshed thee calendar to show the relevant days/weeks of that month. I am using id tags to name the table cells. using onclick, when a day(table cell) is clicked, the event for that day should appear at the top of the page.
The problem I have is that when the page is reloaded after a change in the drop down, the calender is changing as it should but the values in the day of the number of the day is not changing as it should initially (i.e. click that day and it loads the previously selected date for that day. Once that has been loaded, all works as it should.
Any help would be greatly appreciated. Code below:
<br />
[php]
function fSetSelectedDay(myDate, pageName, categoryID){
// alert("myDate is: "+myDate);
// alert("pageName is: "+pageName);
// alert("categoryID is: "+categoryID);
var dateField1 = myDate;
// var dateField1 = trim(myElement.substring(0,2));
if (dateField1 != "" || dateField != undefined || !isNaN(dateField)) {
document.location=pageName + "?categoryID="+categoryID+"&date=" + dateField1 + "-" + calendarForm.tbSelMonthYear.value;
} else {
document.location=pageName + "?categoryID="+categoryID+"&date=" + 1 + "-" + calendarForm.tbSelMonthYear.value;
}
}
function fGetDaysInMonth(iMonth, iYear) {
var dPrevDate = new Date(iYear, iMonth, 0);
return dPrevDate.getDate();
}
function fDrawCal(iYear, iMonth, pageName, categoryID, branchID) {
// alert(pageName);
// alert("iMonth is: "+iMonth);
var myMonth;
myMonth = fBuildCal(iYear, iMonth);
document.write("<table class=\"calendarTable\" border=\"0\" cellpadding=\"0\" cellspacing=\"1\" width=\"100%\">");
document.write("<tr><th>" + myMonth[0][0] + " <\/th>");
document.write("<th>" + myMonth[0][1] + " <\/th>");
document.write("<th>" + myMonth[0][2] + " <\/th>");
document.write("<th>" + myMonth[0][3] + " <\/th>");
document.write("<th>" + myMonth[0][4] + " <\/th>");
document.write("<th>" + myMonth[0][5] + " <\/th>");
document.write("<th>" + myMonth[0][6] + " <\/th><\/tr>");
for (w = 1; w < 7; w++) {
document.write("<tr height=\"40\">");
for (d = 0; d < 7; d++) {
document.write("<td id=\"calCell\" title=\"Click to view this event: Date is :" +myMonth[w][d]+ "\" ");
if (!isNaN(myMonth[w][d])) {
document.write(" onclick=\"fSetSelectedDay("+myMonth[w][d]+", '"+pageName+"', "+categoryID+");\" onmouseout=\"unHighLight(this);\" onmouseover=\"highLight(this);\">");
document.write ("<a id=\"calDateText_\"> ");
document.write(myMonth[w][d] + "<\/font><br><span id=\"calDateText_" + myMonth[w][d] + "\"><\/span></a>");
} else {
// alert(myMonth[w][d]);
document.write(" >");
document.write ("<a id=\"calDateText_\"> ");
document.write(" <\/a><br> ");
}
document.write("<\/td>");
}
document.write("<\/tr>");
}
document.write("<\/table>");
if (isOpera) {
document.minicon.location = level + "utils/eventsHandler.asp?action=getEventsForMonth&year=" + iYear + "&month=" + iMonth + "&branchID="+branchID;
} else {
window.frames["minicon"].location = level + "utils/eventsHandler.asp?action=getEventsForMonth&year=" + iYear + "&month=" + iMonth + "&branchID="+branchID;
}
}
function fBuildCal(iYear, iMonth) {
var aMonth = new Array();
aMonth[0] = new Array(7);
aMonth[1] = new Array(7);
aMonth[2] = new Array(7);
aMonth[3] = new Array(7);
aMonth[4] = new Array(7);
aMonth[5] = new Array(7);
aMonth[6] = new Array(7);
var dCalDate = new Date(iYear, iMonth-1, 1);
var iDayOfFirst = dCalDate.getDay();
var iDaysInMonth = fGetDaysInMonth(iMonth, iYear);
var iVarDate = 1;
var i, d, w;
aMonth[0][0] = "Sun";
aMonth[0][1] = "Mon";
aMonth[0][2] = "Tue";
aMonth[0][3] = "Wed";
aMonth[0][4] = "Thu";
aMonth[0][5] = "Fri";
aMonth[0][6] = "Sat";
for (d = iDayOfFirst; d < 7; d++) {
aMonth[1][d] = iVarDate;
iVarDate++;
}
for (w = 2; w < 7; w++) {
for (d = 0; d < 7; d++) {
if (iVarDate <= iDaysInMonth) {
aMonth[w][d] = iVarDate;
iVarDate++;
}
}
}
return aMonth;
}
function fUpdateCal(monthYear, branchID) {
var tmpAr = monthYear.split("-");
var monthName = tmpAr[0];
var iYear = tmpAr[1];
var iMonth=1;
for (var i = 0; i < MONTH_NAMES.length ; i++) {
if (MONTH_NAMES[i]==monthName) {
iMonth = i;
break;
}
}
for (var i = 0; i < 31; i++) {
if (document.getElementById("calDateText_" + i)!=null) {
document.getElementById("calDateText_" + i).innerHTML = " ";
}
}
myMonth = fBuildCal(iYear, iMonth);
for (w = 1; w < 7; w++) {
for (d = 0; d < 7; d++) {
// if (!isNaN(myMonth[w][d])) {
// document.write(myMonth[w][d] + "<\/font><br><span class=\"vsm\" id=\"calDateText_" + myMonth[w][d] + "\"> <\/span>");
// } else {
// document.write(" <\/font><br> ");
// }
if (!isNaN(myMonth[w][d])) {
document.all.calDateText_[((7*w)+d)-7].outerHTML = "<a id=\"calDateText_\">" + myMonth[w][d] + "<br><span id=\"calDateText_" + myMonth[w][d] + "\"> <\/span></a>";
} else {
document.all.calDateText_[((7*w)+d)-7].outerHTML = "<a id=\"calDateText_\"><br><span id=\"calDateText_" + myMonth[w][d] + "\"> <\/span>";
}
}
}
if (iMonth < 10) {
iMonth = "0"+iMonth;
}
if (isOpera) {
document.minicon.location = level + "utils/eventsHandler.asp?action=getEventsForMonth&branchID="+branchID+"&year=" + iYear + "&month=" + iMonth;
} else {
window.frames["minicon"].location = level + "utils/eventsHandler.asp?action=getEventsForMonth&branchID="+branchID+"&year=" + iYear + "&month=" + iMonth;
}
}
<br />