Ben's Hobbyhoekje -- Jaarkalender III, versie met weeknummers

Jaarkalender III, versie met weeknummers

Op deze bladzijde wordt een code voorgesteld om een complete jaarkalender op je scherm te laten verschijnen. De kalender toont de algemeen erkende Christelijke feestdagen en andere belangrijke data zoals Koningsdag, Bevrijdingsdag, enz. De datum van vandaag wordt getoond op een rode achtergrond, daarnaast toont de kalender ook de weeknummers.

De weeknummers worden berekend op de manier die beschreven is in het item Het weeknummer berekenen.
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.

De kalender kan worden weergegeven voor de jaartallen 1583 t.m. 3000. Deze beperking komt door de rekenmethode en de vereiste nauwkeurigheid bij het berekenen van schrikkeljaren.
Vul het gewenste jaartal in en druk op de knop Toon Kalender. Vanwege de benodigde ruimte op het scherm verschijnt de kalender in een popup.

Besproken wordt hoe je dit in je eigen site kunt inbouwen.
De werking van het script is hetzelfde als in het item Jaarkalender, maar met de aanpassingen die genoemd zijn in Maandkalender II: met weeknummers.
De code van de kalender staat in de file jaarkal3.js. Hierin moet je inhoud van de <title>tag aanpassen voor je eigen doeleinden, in de regel:

var t = "<html><head><title>Ben's Hobbyhoekje -- Jaarkalender "+j+" met weeknummers</title>";
Met behulp van de variabele j zet je het jaartal van de kalender in te titelbalk of -tab van de browser. Verder hoeft er niets te worden veranderd, tenzij je feestdagen wilt toevoegen of verwijderen.
De kalender wordt op het scherm gezet door de functie jakw(j) aan te roepen. De parameter j is het jaartal waarvoor de kalender moet worden gemaakt. De kalender verschijnt in een popup.
De normale werkwijze op deze site is dat een popup door een bladzijde wordt gemaakt, waarna er een HTML-code in wordt gezet. Bij deze kalender wordt daar van af geweken: Het popup-window wordt eerst door de function jakw() zelf gemaakt, waarna jakw() de inhoud genereert.
Deze aanpak vereist dat jakw() door de gebruiker wordt geactiveerd. Dat kan met behulp van een button, zoals op deze bladzijde.
Het is mogelijk om jakw() zonder tussenkomst van de gebruiker, dus direct vanuit de HTML-code, aan te roepen. Als je dat doet, zal de popup-blocker de kalender tegenhouden. Ik raad dat dus niet aan.
Het is wel mogelijk om de hele jaarkalender direct in je document te plaatsen. Zie daarvoor het item Jaarkalender IV, versie met weeknummers.
Zonder in detail te treden is de werking van het script als volgt:
- Eerst wordt een popup van voldoende omvang geopend.
- Daarna wordt gekeken of het jaartal geldig is:
  
  1583 < jaartal < 3000.
  
  Vóór 1583 werden de schrikkeljaren anders bepaald dan nu, na 3000 wordt de berekening van de schrikkeljaren te onnauwkeurig. Zonodig wordt een foutmelding gegeven.
- Vervolgens schrijft het script het jaartal uit, met daaronder de kalender. De maanden worden in een table gezet van 3 rijen en 4 kolommen. Het algoritme dat daarvoor gebruikt wordt is een variant op het algoritme dat is gebruikt in het item "Maandkalender II: met weeknummers".
- Voor de gemarkeerde data worden aparte classes gebruikt, die door het script zelf worden ingesteld. Een apart style-sheet is dus niet nodig.
- De datum van Vandaag overschrijft de markering van een feestdag.
Een aantal van de feestdagen in deze kalender heeft een vaste datum, zoals Kerst. Andere zijn gerelateerd aan de zondag van Pasen. De datum van Pasen is dus heel belangrijk. Zie het item Jaarkalender.
Feestdagen aan de kalender toevoegen of verwijderen:
Je moet hiervoor de file jaarkal3.js wijzigen. Voor het overige verwijs is naar het item Jaarkalender.

Gebruik:

De code staat gedeeltelijk in de in de <HEAD> en gedeeltelijk in de <BODY>.

De code ziet er als volgt uit:

(Zet deze code in de <HEAD>)

<script src="jaarkal3.js"></script>

(Zet dit in de <BODY>, op de plaats waar je het nodig hebt).

<form
action="JavaScript:jakw(document.getElementById('MijnJaar').value);"
method="post" name="Formulier" id="Formulier">
<input type="text" name="MijnJaar" id="MijnJaar"
value="1" size="5" maxlength="4">
<input type="submit" value="Toon Kalender" style="font-weight: bold">
<input type="button" value="Overnieuw"
onclick="JavaScript:Overnieuw()">
</form>

<script>
var nu = new Date();
function Overnieuw() {
document.getElementById('MijnJaar').value = nu.getFullYear();
}
Overnieuw();
</script>

Downloaden:

Druk op de knop: File: voorb369.zip, 3400 bytes.

Opmerking:

Van deze kalender bestaat ook een 4-maands versie. Die toont de vorige maand, de huidige maand en de twee volgende maanden, in een horizontale of verticale opmaak.