Dag en datum kalender komen niet overeen

[JeroenE]

Ik heb een kalender gemaakt van (voorlopig) 1 maand.
Wat ik echter niet goed krijg, is dat ik de juiste datum niet onder de juiste dag krijg.

Voorbeeld 1
Voorbeeld 2
Beiden hebben dezelfde basisfunctie, alleen is er een klein verschil in het schrijven van de tabel.

Dit staat in de head van voorbeeld 1 :

<script language="javascript">
<!--
var Months = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
var DpM = new Array(31,"",31,30,31,30,31,31,30,31,30,31);
var today = new Date();
var nY = today.getFullYear();
var nM = today.getMonth();
var nD = today.getDate();

function showCalendar(y, m) {
DpM[1] = (((y % 100 != 0) && (y % 4 == 0)) || (y % 400 == 0)) ? 29 : 28;
var string = "<table width='225'><tr><th class='date' colspan='7'>" + 
Months[m-1] + " " + y + "</th></tr><tr>";
for (var day = 0; day < 7; day++) {
string += "<td class='";
if (day == today.getDay()) {
string += "today";
} else {
string += "days";
};
string += "'>" + "SMTWTFS".substr(day,1) + "</td>";
};
string += "<tr>";
for (var i = 0; i < 42; i++) {
var currDate = ((i-m-1 >= 0) && (i-m-1 < DpM[m-1])) ? i-m : "";
string += "<td class='";
if ((currDate == nD) && (m == nM+1) && (y == nY)) {
string += "today";
} else {
string += "dates";
};
string += "'>" + currDate + "</td>";
if ((i % 7 == 0) && (i < 36)) string += "</tr><tr>";
};
return string += "</td></tr></table>";
};
-->
</script>

En dit in de head van voorbeeld 2 :

<script language="javascript">
<!--
var Months = new Array("Januari","Februari","Maart","April","Mei","Juni","Juli","Augustus","September","October","November","December");
var DpM = new Array(31,"",31,30,31,30,31,31,30,31,30,31);
var today = new Date();
var nY = today.getFullYear();
var nM = today.getMonth();
var nD = today.getDate();

function showCalendar(y, m) {
var currNum = 1;
DpM[1] = (((y % 100 != 0) && (y % 4 == 0)) || (y % 400 == 0)) ? 29 : 28;
var string = "<table width='225'><tr><th class='date' colspan='7'>" + 
Months[m-1] + " " + y + "</th></tr><tr>";
for (var day = 0; day < 7; day++) {
string += "<td class='";
if (day == today.getDay()) {
string += "today";
} else {
string += "days";
};
string += "'>" + "ZMDWDVZ".substr(day,1) + "</td>";
};
for (var i = 0; i < 6; i++) {
string += "<tr>";
for (var j = 0; j < 7; j++) {
var currDate = ((currNum-nD-1 >= 0) && (currNum-nD-1 < DpM[m-1])) ? currNum-m : "";
string += "<td class='";
if ((currDate == nD) && (m == nM+1) && (y == nY)) {
string += "today";
} else {
string += "dates";
};
string += "'>" + currDate + "</td>";
currNum++;
};
string += "</tr>";
};
return string += "</td></tr></table>";
};
-->
</script>

Dit staat in de body :

<script language="javascript">
<!--
document.write("<table><tr valign='middle'><td class='maintable'>" + showCalendar(nY, nM+1) + "</td></tr></table>");
-->
</script>

De buitenste tabel is met het oog op het maken van een jaarkalender.

Hoe los ik dit op?

Greetz : Jeren.

 

[Withaar]

Misschien zo,

string += "'>" + "ZMDWDVZ".substr(day,1) + "</td>";

veranderen in

string += "'>" + "MDWDVZZ".substr(day,1) + "</td>";

Of verander de substr(day,1) eens in substr(day,0)

 

[peter vazed]

Is dat niet dit stukje:
string += " '>" + "MTWTFSS".substr(day,1) + "</td>"

 

[JeroenE]

Dat leek me eerst ook de goeie oplossing, maar dan krijg je het volgende :

Zie ook bijlage.

Greetz : Jeren.

 

[peter vazed]

Die vierkantjes, waar komen die vandaan?
Je originel code, de pagina heb ik gezien, doch dit kan ik niet vinden.
Werkt bij mij niet, de vierkantjes komen niet tevoorschijn.



///edit
effe je pagina geladen, was er weer.
Met FF de javascript console aangeklikt, en dit is de melding:

Error: syntax error
Source File: http://users.telenet.be/jemimaja/main.js
Line: 48, Column: 4
Source Code:
else if(h<120) { color=Math.floor(((h-60)/60)*b); red=b-color;grn=b;blu=0; };

 

[JeroenE]

Die vierkantjes zijn de randen van die cel en die worden met een class als volgt toegewezen

De css voor de kalender :

table .dates {
text-align:center;
}
table .date {
background-color:#ffcc00;
font-weight:bold;
text-align:center;
}
table .days {
font-weight:bold;
text-align:center;
}
table .today {
border:3px solid #ffcc00;
text-align:center;
font-weight:bold;
color:#ff0000;
}
table .maintable {
border:1px solid #ffffaa;
}

Het stukje script die de class bepaald :

for (var day = 0; day < 7; day++) {
string += "<td class='";
if (day == today.getDay()) { // zorgt voor het vierkantje rond de dag
string += "today";
} else {
string += "days";
};
string += "'>" + "ZMDWDVZ".substr(day,1) + "</td>";
};
for (var i = 0; i < 6; i++) {
string += "<tr>";
for (var j = 0; j < 7; j++) {
var currDate = ((currNum-m-1 >= 0) && (currNum-m-1 < DpM[m-1])) ? currNum-m : "";
string += "<td class='";
if ((currDate == nD) && (m == nM+1) && (y == nY)) { // zorgt voor het vierkantje rond de datum
string += "today";
} else {
string += "dates";
};
string += "'>" + currDate + "</td>";
currNum++;
};
string += "</tr>";
};

Ziet er beter uit tussen php-bbcode.

De fout met de syntaxerror zou moeten opgelost zijn.

Greetz : Jeren.

 

[JeroenE]

Ondanks nog enkele andere problemen die opdoken bij het aanpassen van het script, ben ik er ondertussen toch in geslaagd alles op te lossen.

Hier is het script zoals het uiteindelijk geworden is.
De head :

var Months = new Array("Januari","Februari","Maart","April","Mei","Juni","Juli","Augustus","September","October","November","December");
var DpM = new Array(31,"",31,30,31,30,31,31,30,31,30,31);
var today = new Date();
var nY = today.getFullYear();
var nM = today.getMonth() + 1;

function showCalendar(y, m) {
var now = new Date(y, m-1, 1);
now.nd = now.getDay() + 1;
DpM[1] = (((y % 100 != 0) && (y % 4 == 0)) || (y % 400 == 0)) ? 29 : 28;
var string = "<table width='225' height='100%'><tr><th class='date' colspan='7'>" + 
Months[m-1] + " " + y + "</th></tr><tr>";
for (var day = 0; day < 7; day++) {
string += "<td class='";
if ((day == today.getDay()) && (m == nM) && (y == nY)) {
string += "today";
} else {
string += "days";
};
string += "'>" + "ZMDWDVZ".substr(day,1) + "</td>";
};
string += "</tr><tr>";
for (var i = 1; i <= 42; i++) {
var currDate = ((i-now.nd >= 0) && (i-now.nd < DpM[m-1])) ? i-now.nd+1 : "&nbsp;";
string += "<td class='";
if ((currDate == today.getDate()) && (m == nM) && (y == nY)) {
string += "today";
} else {
string += "dates";
};
string += "'>" + currDate + "</td>";
if ((i % 7 == 0) && (i < 36)) string += "</tr><tr>";
};
return string += "</tr></table>";
};

De body :

document.write("<table width='100%' height='100%'><tr valign='middle'><td align='center'>");
document.write("<table><tr valign='middle'>");
for (var n = 0; n < 12; n++) {
document.write("<td class='maintable'>" + showCalendar(nY, n+1) + "</td>");
if ((n+1) % 4 == 0) document.write("</tr><tr valign='middle'>");
};
document.write("</tr></table></td></tr></table>");

Vrij te gebruiken door iedereen. Graag wel een kleine vermelding naar helpmij.nl waarvan ik al zoveel hulp en oplossingen gekregen heb.

Greetz : Jeren.