Opdracht: Een mooiere kalender
Deze opdracht is bijna hetzelfde als de opdracht met de kalendertabel
maar met een paar kleine uitbreidingen. Om te beginnen een form waarin je
enkele waarden kunt instellen, in de tabel zelf wordt de maand afgedrukt
en er komt een controle in op het aantal dagen: als het aantal dagen
kleiner is dan 28 of groter dan 31 dan moet de gebruiker verteld worden
dat dat niet mag.
De opdracht luidt nu als volgt:
Maak een kalender waarbij je kunt instellen welke maand het is, het aantal
dagen en op welke weekdag de eerste van de maand is.
Geef het vakje van de huidige dag een afwijkende kleur.
Hulp
- Probeer eerst mijn voorbeeld eens uit
- Een JavaScript pop-up hoeft niet maar is wel leuk. Je kunt afkijken
in de source
- Begin met de eerste rij, dat is alleen een stukje tekst en een
variabele afdrukken.
- Dan de tweede rij. Die hoef je niet in een 'loopje' te schrijven
- Maak dan een 'loopje' dat lege vakjes maakt
- Vul daarna pas de rest van de tabel
- Met de % operator kun je aangeven wanneer een nieuwe rij begint
maar misschien vind je het makkelijker om met een 'if'
uit te zoeken wanneer je een nieuwe regel moet beginnen
- Om het vakje van de huidige dag een andere kleur te geven kun je
de funktie getdate() gebruiken, zie hieronder een voorbeeld. Voor
deze ene keer mag je zonder een stylesheet de achtergrondkleur
in de td tag instellen met <td bgcolor='yellow'>
Hoe vraag je de huidige dag in de maand op:
$current_date=getdate();
$today=$current_date["mday"];
Hoe kun je automagisch het aantal lege vakjes aan het begin van de
tabel laten bepalen ?
$now=getdate();
$today=$now["mday"]; // 1-31
$dayofweek=($now["wday"]+6)%7; // omgebouwd tot 0-ma 1-di ... 6-zo
$legevakjes= ($dayofweek+8 - ($today%7))%7;
Hieronder staat een voorbeeld van hoe het er ongeveer uit kan zien:
Juli 2024
| Ma |
Di |
Wo |
Do |
Vr |
Za |
Zo |
| 1 |
2 |
3 |
4 |
5 |
6 |
7 |
| 8 |
9 |
10 |
11 |
12 |
13 |
14 |
| 15 |
16 |
17 |
18 |
19 |
20 |
21 |
| 22 |
23 |
24 |
25 |
26 |
27 |
28 |
| 29 |
30 |