4-maands kalender IVb: Verticaal: versie met weeknummers
De bedoeling van deze pagina is zonder toelichting wel duidelijk. Op deze bladzijde wordt beschreven hoe je deze 4-maands kalender maakt.
In het volgende wordt besproken wordt hoe je dit in een web-pagina opneemt.
- Dit is een variant van het script 4-maands kalender. Het gaat
hier om de verticale variant, dus met 4 maanden onder elkaar.
Bij het oorspronkelijke script wordt de kalender in een popup getoond. Hier verschijnt de kalender direct in de pagina.
- De kalender wordt gegenereerd door JavaScript en wordt naar keuze links of rechts gepositioneerd in het document.
De weeknummers worden berekend op basis van de norm ISO 8601. Daarom begint de week in deze kalender op maandag en eindigt de week op zondag.
- Het JavaScript staat in de file maandenkal4vwk.js. Dat link je vanuit de <HEAD>.
- De kalender wordt getoond binnen de tag
<div id="VierMaandsWkVerticaal"> </div>.
Die staat op de plaats in de <BODY> waar de kalender moet komen. - Aan het eind van het HTML-document, vlak vóór de </body>-tag staat een JavaScript dat de function
ma4k2v(LR) aanroept. Deze function vervangt de binnen de tag
<div id="VierMaandsWkVerticaal"> </div> door de kalender. - De parameter LR heeft de waarde 'left' of 'right', om de kalender aan de linker- of rechterzijde van de
pagina te laten verschijnen. Als LR een andere waarde heeft of ontbreekt wordt de kalender niet getoond!
- De kalender wordt opgemaakt met CSS, dat je in de <HEAD> van het document zet. Ik raad niet aan om de class .ri
te wijzigen.
- Uitgebreide aanwijzingen voor het aanpassen van de kalender vind je in het item 4-maands kalender. Merk op dat de CSS en het javascript hier gescheiden zijn. In 4-maands kalender staat alles in één document
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code ziet er als volgt uit:
(Zet dit in de <HEAD>).
<style>
table, td {font-family:verdana, sans-serif; font-size:95%;
vertical-align:top;}
.onderschrift { font-size:8pt; }
.ri {text-align:right;}
.wknrs {color:red;}
/* - Classes voor markeringen in de kalender - */
/* Rood: Vandaag */ .rd {color:#fff; background:#ff0000;}
/* Groen: Christelijke feestdagen */
.gr {color:#fff; background:#00aa00;}
/* Donker Blauw : Carnaval */
.dbl {color:#ffffff; background:#000080;}
/* Oranje: Andere Feest- en Gedenkdagen */
.or {color:#ffffff; background:#ff8000;}
/* - Einde van de Classes voor markeringen in de kalender - */
</style>
<script src="maandenkal4vwk.js"></script>
(Zet dit in de <BODY>, op de plaats waar de kalender moet verschijnen).
<div id="VierMaandsWkVerticaal"> </div>
(Zet dit in de <BODY>, bij voorkeur net vóór de </BODY>-tag).
<script>
ma4k4v('left')
</script>
Downloaden:
Druk op de knop:
File: voorb374.zip, 3057 bytes.
Opmerking:
Van deze kalender is ook een versie beschikbaar in een horizontale opmaak. Behalve
dat is er ook een versie beschikbaar die een heel jaar beslaat.
Er is ook een versie van deze 4-maands kalender zonder weeknummers. Zie 4-maands
kalender IIb: Verticaal.
