PDA

View Full Version : Enhance Jasons calender a little - who can help please



dussy
07-12-2007, 09:54 AM
1) Script Title: Jasons JS Calender
2) Script URL (on DD): http://dynamicdrive.com/dynamicindex7/jasoncalendar.htm

3) Describe problem:

Hello to you Js Cracks!

I have a request of an friend of mine, if it would be possible, to an the weeknumber to each line in the calender pop up.
so i had a look into it, but have to addmit, that my JS knowledge is far to low to accomplish this.

Is anybody around who can help me to manage this?

thanks for any hint and help

Regards: Dussy

dussy
07-12-2007, 01:10 PM
Its in this funktion:



function BuildCalendarDays() {
var Rows = 5;
if (((this.displayed.dayCount == 31) && (this.displayed.firstDay > 4)) || ((this.displayed.dayCount == 30) && (this.displayed.firstDay == 6))) Rows = 6;
else if ((this.displayed.dayCount == 28) && (this.displayed.firstDay == 0)) Rows = 4;
var HTML = '<table width="' + (CellWidth * 7) + '" cellspacing="0" cellpadding="1" style="cursor:default">';
for (var j=0;j<Rows;j++) {
HTML += '<tr><td> - </td>';
for (var i=1;i<=7;i++) {
Day = (j * 7) + (i - this.displayed.firstDay);
if ((Day >= 1) && (Day <= this.displayed.dayCount)) {
if ((this.displayed.yearValue == this.picked.yearValue) && (this.displayed.monthIndex == this.picked.monthIndex) && (Day == this.picked.day)) {
TextStyle = 'color:white;font-weight:bold;'
BackColor = DayBGColor;
}
else {
TextStyle = 'color:black;'
BackColor = CalBGColor;
}
if ((this.displayed.yearValue == Today.getFullYear()) && (this.displayed.monthIndex == Today.getMonth()) && (Day == Today.getDate())) TextStyle += 'border:1px solid darkred;padding:0px;';
HTML += '<td align="center" class="calendarDateInput" style="cursor:default;height:' + CellHeight + ';width:' + CellWidth + ';' + TextStyle + ';background-color:' + BackColor + '" onClick="' + this.objName + '.pickDay(' + Day + ')" onMouseOver="return ' + this.objName + '.displayed.dayHover(this,true,\'' + BackColor + '\',' + Day + ')" onMouseOut="return ' + this.objName + '.displayed.dayHover(this,false,\'' + BackColor + '\')">' + Day + '</td>';
}
else HTML += '<td class="calendarDateInput" style="height:' + CellHeight + '">&nbsp;</td>';
}
HTML += '</tr>';
}
return HTML += '</table>';
}


I placed a " <td> - </td>' " in line 10 which now creates the space to put a weeknuber in, but how can i fetsch the current weeknuber with JS

any IDea?

dussy
07-12-2007, 03:10 PM
so i have now made it a dirty way, dont know if this is the kingsway to do, but it seems to work:



// Builds the HTML for the calendar days
function BuildCalendarDays() {
var Rows = 5;
if (((this.displayed.dayCount == 31) && (this.displayed.firstDay > 4)) || ((this.displayed.dayCount == 30) && (this.displayed.firstDay == 6))) Rows = 6;
else if ((this.displayed.dayCount == 28) && (this.displayed.firstDay == 0)) Rows = 4;
var HTML = '<table width="' + (CellWidth * 7) + '" cellspacing="0" cellpadding="1" style="cursor:default">';
var monatcnt = this.displayed.monthIndex;
switch (monatcnt) {
case 0: var weeknr = 1; break;
case 1: var weeknr = 5; break;
case 2: var weeknr = 9; break;
case 3: var weeknr = 14; break;
case 4: var weeknr = 18; break;
case 5: var weeknr = 22; break;
case 6: var weeknr = 27; break;
case 7: var weeknr = 31; break;
case 8: var weeknr = 35; break;
case 9: var weeknr = 39; break;
case 10: var weeknr = 43; break;
case 11: var weeknr = 47; break;
default: var weeknr = 1; break;
}
for (var j=0;j<Rows;j++) {
HTML += '<tr><td style="border-right-style: solid; border-right-width: 1px;">&nbsp;&nbsp;'+ weeknr + '&nbsp; </td>';
for (var i=1;i<=7;i++) {
Day = (j * 7) + (i - this.displayed.firstDay);
if ((Day >= 1) && (Day <= this.displayed.dayCount)) {
if ((this.displayed.yearValue == this.picked.yearValue) && (this.displayed.monthIndex == this.picked.monthIndex) && (Day == this.picked.day)) {
TextStyle = 'color:white;font-weight:bold;'
BackColor = DayBGColor;
}
else {
TextStyle = 'color:black;'
BackColor = CalBGColor;
}
if ((this.displayed.yearValue == Today.getFullYear()) && (this.displayed.monthIndex == Today.getMonth()) && (Day == Today.getDate())) TextStyle += 'border:1px solid darkred;padding:0px;';
HTML += '<td align="center" class="calendarDateInput" style="cursor:default;height:' + CellHeight + ';width:' + CellWidth + ';' + TextStyle + ';background-color:' + BackColor + '" onClick="' + this.objName + '.pickDay(' + Day + ')" onMouseOver="return ' + this.objName + '.displayed.dayHover(this,true,\'' + BackColor + '\',' + Day + ')" onMouseOut="return ' + this.objName + '.displayed.dayHover(this,false,\'' + BackColor + '\')">' + Day + '</td>';
}
else HTML += '<td class="calendarDateInput" style="height:' + CellHeight + '">&nbsp;</td>';

}
weeknr = weeknr+1;
HTML += '</tr>';
}
return HTML += '</table>';
}

nmb
11-21-2007, 12:26 PM
dussy thats great - i have a question. is it possible to hide the drop down portion of the calendar form so that only the calendar icon in shown, and when you click on it you select the date? the values still need to be passed in the same way though, as they connect to a database. this ones got me stumped, i think you stand a chance through!!