week kalender

Status
Niet open voor verdere reacties.
P

peba25

Gebruiker
Lid geworden
6 jul 2009
Berichten
70
Hallo,

Ik heb momenteel een lijst met alle weeknummers op een pagina staan. De weeknummers zijn href's welke een functie aanroepen;

Code: 
function period1(week){
window.location.href=('report.html?='+week);
}

Weet iemand hoe ik de href link van de actuele week een andere kleur zou kunnen geven?

Nu is dit een werkende oplossing zo'n lijst op een pagina maar echt vraai is het niet. Weet iemand of er een alreeds gemaakte calender beschikbaar is waarin het weeknummer wordt weergegeven? Of zou hier een dropdownlist met de weeknummers mooier zijn?



alvast bedankt.
 
Egel zei:
Dit script genereerd een weeknummer volgens de NEN 2772 norm:[js] // Egel 060307 :)
// NEN 2772: (Nederlandse Norm)
// de eerste week van het jaar heeft 4 of meer dagen in dat jaar,
// een week begint op een maandag.
function weeknummer(terug) {
var vandaag = new Date();
var jaartal = vandaag.getFullYear() - (terug ? 1 : 0);
var nieuwjaarsdag = new Date(jaartal,0,1);
var dagen = Math.floor((vandaag.getTime() - nieuwjaarsdag.getTime()) / (24 * 60 * 60 * 1000));
var nen = [6,7,8,9,10,4,5][nieuwjaarsdag.getDay()];
var nummer = Math.floor((dagen + nen) / 7);
if (nummer == 0) nummer = weeknummer(true);
return nummer;
};[/js]Dat kun je dan bijvoorbeeld zo gebruiken:
location.href = 'pagina_' + weeknummer() + '.html';
Klik om te vergroten...

Daarmee zou je de document.links array kunnen doorlopen en dan de link die het nummer bevat een andere .className geven. :) Als: document.links.className = 'rood';

Maar waarom een javascript link die de location.href aanpast?
En niet direct href="report.html?=' + week + '"' enz...


Als je wat meer van je script post kan ik het beter inpassen. ;)
 
Bedankt Egel,

Wat ik nu op de pagina laat zien zijn alle weeknummers (hier een stukje)
Code: 
<td><table class="week">
	<tr><td>Week</td><td><a href="javascript:period1(1)">Week 1</a></td></tr>
	<tr><td></td><td> <a href="javascript:period1(2)">Week 2</a></td></tr>
	<tr><td></td><td> <a href="javascript:period1(3)">Week 3</a></td></tr>
	<tr><td></td><td> <a href="javascript:period1(4)">Week 4</a></td></tr>
	<tr><td></td><td> <a href="javascript:period1(5)">Week 5</a></td></tr>
	<tr><td></td><td> <a href="javascript:period1(6)">Week 6</a></td></tr>
	<tr><td></td><td> <a href="javascript:period1(7)">Week 7</a></td></tr>
	<tr><td></td><td> <a href="javascript:period1(8)">Week 8</a></td></tr>
	<tr><td></td><td> <a href="javascript:period1(9)">Week 9</a></td></tr>
	<tr><td></td><td> <a href="javascript:period1(10)">Week 10</a></td></tr>
	<tr><td></td><td> <a href="javascript:period1(11)">Week 11</a></td></tr>
	<tr><td></td><td> <a href="javascript:period1(12)">Week 12</a></td></tr>
	<tr><td></td><td> <a href="javascript:period1(13)">Week 13</a></td></tr>
	<tr><td></td><td> <a href="javascript:period1(14)">Week 14</a></td></tr>
	<tr><td></td><td> <a href="javascript:period1(15)">Week 15</a></td></tr>
	<tr><td></td><td> <a href="javascript:period1(16)">Week 16</a></td></tr>
	<tr><td></td><td> <a href="javascript:period1(17)">Week 17</a></td></tr>
	<tr><td></td><td><a href="javascript:period1(18)">Week 18</a></td></tr>
</table></td>

En de functie waarmee ik de href maak.

Code: 
function period1(week){
var year = document.getElementById('year').value
window.location.href=('report.html?='+week +'&'+year);
}

Graag zou ik de tekst van de actuele week welke ik mooi kan bepalen met jou script een accent of een andere kleur willen geven. Dit zodat de gebruiker snel de huidige week ziet.
Hoe voeg ik hier zoals jij aangeeft voor iedere week op de juiste manier een classname aan toe zodat ik dit kan realiseren?

Alvast bedankt.
 
Je hoeft niet voor alle weken een className toe te voegen, alleen voor de huidige:
[js]<style type="text/css">
a.red { color: red;}
</style>

<td><table class="week">
<tr><td>Week</td><td><a href="javascript:period1(17)">Week 17</a></td></tr>
<tr><td></td><td><a href="javascript:period1(18)">Week 18</a></td></tr>
<tr><td></td><td><a href="javascript:period1(19)">Week 19</a></td></tr>
<tr><td></td><td><a href="javascript:period1(20)">Week 20</a></td></tr>
<tr><td></td><td><a href="javascript:period1(21)">Week 21</a></td></tr>
<tr><td></td><td><a href="javascript:period1(22)">Week 22</a></td></tr>
<tr><td></td><td><a href="javascript:period1(23)">Week 23</a></td></tr>
<tr><td></td><td><a href="javascript:period1(24)">Week 24</a></td></tr>
<tr><td></td><td><a href="javascript:period1(25)">Week 25</a></td></tr>
<tr><td></td><td><a href="javascript:period1(26)">Week 26</a></td></tr>
<tr><td></td><td><a href="javascript:period1(27)">Week 27</a></td></tr>
<tr><td></td><td><a href="javascript:period1(28)">Week 28</a></td></tr>
<tr><td></td><td><a href="javascript:period1(29)">Week 29</a></td></tr>
<tr><td></td><td><a href="javascript:period1(30)">Week 30</a></td></tr>
<tr><td></td><td><a href="javascript:period1(31)">Week 31</a></td></tr>
<tr><td></td><td><a href="javascript:period1(32)">Week 32</a></td></tr>
</table></td>

<input id="year" type="text" size="6" value="2010">

<script type="text/javascript">
function period1(week) {
var year = document.getElementById('year').value
window.location.href=('report.html?='+week +'&'+year);
};

// Egel 060307 :)
// NEN 2772: (Nederlandse Norm)
// de eerste week van het jaar heeft 4 of meer dagen in dat jaar,
// een week begint op een maandag.
function weeknummer(terug) {
var vandaag = new Date();
var jaartal = vandaag.getFullYear() - (terug ? 1 : 0);
var nieuwjaarsdag = new Date(jaartal,0,1);
var dagen = Math.floor((vandaag.getTime() - nieuwjaarsdag.getTime()) / (24 * 60 * 60 * 1000));
var nen = [6,7,8,9,10,4,5][nieuwjaarsdag.getDay()];
var nummer = Math.floor((dagen + nen) / 7);
if (nummer == 0) nummer = weeknummer(true);
return nummer;
};

var nummer = weeknummer(), nr; // alert(nummer);
for (var i = 0; i < document.links.length; i++) {
nr = document.links.href.indexOf('period1(');
if (nr > -1) nr = parseInt(document.links.href.substring(nr + 8));
if (nr == nummer) document.links.className = 'red';
};
</script>[/js]
Dat kleurt 'Week 21' rood. :)
 
Egel zei:
Je hoeft niet voor alle weken een className toe te voegen, alleen voor de huidige:
[js]<style type="text/css">
a.red { color: red;}
</style>

<td><table class="week">
<tr><td>Week</td><td><a href="javascript:period1(17)">Week 17</a></td></tr>
<tr><td></td><td><a href="javascript:period1(18)">Week 18</a></td></tr>
<tr><td></td><td><a href="javascript:period1(19)">Week 19</a></td></tr>
<tr><td></td><td><a href="javascript:period1(20)">Week 20</a></td></tr>
<tr><td></td><td><a href="javascript:period1(21)">Week 21</a></td></tr>
<tr><td></td><td><a href="javascript:period1(22)">Week 22</a></td></tr>
<tr><td></td><td><a href="javascript:period1(23)">Week 23</a></td></tr>
<tr><td></td><td><a href="javascript:period1(24)">Week 24</a></td></tr>
<tr><td></td><td><a href="javascript:period1(25)">Week 25</a></td></tr>
<tr><td></td><td><a href="javascript:period1(26)">Week 26</a></td></tr>
<tr><td></td><td><a href="javascript:period1(27)">Week 27</a></td></tr>
<tr><td></td><td><a href="javascript:period1(28)">Week 28</a></td></tr>
<tr><td></td><td><a href="javascript:period1(29)">Week 29</a></td></tr>
<tr><td></td><td><a href="javascript:period1(30)">Week 30</a></td></tr>
<tr><td></td><td><a href="javascript:period1(31)">Week 31</a></td></tr>
<tr><td></td><td><a href="javascript:period1(32)">Week 32</a></td></tr>
</table></td>

<input id="year" type="text" size="6" value="2010">

<script type="text/javascript">
function period1(week) {
var year = document.getElementById('year').value
window.location.href=('report.html?='+week +'&'+year);
};

// Egel 060307 :)
// NEN 2772: (Nederlandse Norm)
// de eerste week van het jaar heeft 4 of meer dagen in dat jaar,
// een week begint op een maandag.
function weeknummer(terug) {
var vandaag = new Date();
var jaartal = vandaag.getFullYear() - (terug ? 1 : 0);
var nieuwjaarsdag = new Date(jaartal,0,1);
var dagen = Math.floor((vandaag.getTime() - nieuwjaarsdag.getTime()) / (24 * 60 * 60 * 1000));
var nen = [6,7,8,9,10,4,5][nieuwjaarsdag.getDay()];
var nummer = Math.floor((dagen + nen) / 7);
if (nummer == 0) nummer = weeknummer(true);
return nummer;
};

var nummer = weeknummer(), nr; // alert(nummer);
for (var i = 0; i < document.links.length; i++) {
nr = document.links.href.indexOf('period1(');
if (nr > -1) nr = parseInt(document.links.href.substring(nr + 8));
if (nr == nummer) document.links.className = 'red';
};
</script>[/js]
Dat kleurt 'Week 21' rood. :)
Klik om te vergroten...


Bedankt Egel.

Ik ga je voorbeeld gebruiken. In de tussentijd had ik namelijk iedere href een id gegeven het werkt wel maar echt fraai is het niet. Eigenlijk geldt dit voor de gehele reeks. Ik zal eens kijken hoe je zoiets netjes schrijft....

Code: 
	<tr><td></td><td> <a href="javascript:period1(19)"id = "w19">Week 19</a></td></tr>
en in het script:

Code: 
function init() {
//get actual week and highlite href
var vandaag = new Date();
var jaartal = vandaag.getFullYear()
var nieuwjaarsdag = new Date(jaartal,0,1);
var dagen = Math.floor((vandaag.getTime() - nieuwjaarsdag.getTime()) / (24 * 60 * 60 * 1000));
var nen = [6,7,8,9,10,4,5][nieuwjaarsdag.getDay()];
var nummer = Math.floor((dagen + nen) / 7);
if (nummer == 0) nummer = weeknummer(true); 
weeknumber = nummer;
document.getElementById('w'+weeknumber).style.color = '#ffffff';
	
}
window.onload = init;
 
Ok. :) Maar ...
peba25 zei:
en in het script:
Klik om te vergroten...
je moet de functie weeknummer() wel apart behouden, het is namelijk een recursieve functie.

Als in eerste instantie het weeknummer 0 wordt dan roept de functie zichzelf aan met de parameter true:
[js]if (nummer == 0) nummer = weeknummer(true);[/js]
daardoor wordt het weeknummer uitgerekend met het vorige jaar:
[js]var jaartal = vandaag.getFullYear() - (terug ? 1 : 0);[/js]
en dan krijg je weeknummer 52 of 53: :)
http://nl.wikipedia.org/wiki/NEN_2772
 
Bedankt Egel.
Ik heb de functie nu dus wel bestudeerd en zie inderdaad dat ik je functie verkeerd heb gebruikt.... weer wat geleerd over recursive functions..
:thumb:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan