Ben's Hobbyhoekje -- Jaarkalender

Jaarkalender

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.

Deze code is een aangepaste en gemoderniseerde versie van de code van F. Abbing. Zijn website is helaas verdwenen.

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.

De volgende items worden besproken:
1. Inbouwen in je eigen site
2. Werking van het script
3. Berekening van de Paaszondag
4. Feestdagen aan de kalender toevoegen
De code van de kalender staat in de file jaarkal.js. Hierin moet je inhoud van de <title> tag aanpassen voor je eigen doeleinden, in regel 31 van het script:

var t = "<html><head><title>Ben's Hobbyhoekje -- Jaarkalender "+j+"</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 jak(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 jak() zelf gemaakt, waarna jak() de inhoud genereert.
Deze aanpak vereist dat jak() door de gebruiker wordt geactiveerd. Dat kan met behulp van een button, zoals op deze bladzijde.
Het is mogelijk om jak() 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 II.
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. Zo nodig 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".
- 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:
- De berekening van de datum waarop paaszondag valt is gebaseerd op het algoritme van Lilius/Clavius. Dat gaat als volgt:
  Pasen is op de eerste zondag ná de eerste volle maan ná de lente equinox. De equinox is het etmaal waarin de dag en de nacht precies 12 uur lang zijn. Dat gebeurt twee maal per jaar. In de berekening wordt aangenomen dat de lente equinox (de dag waarop de lente begint) altijd op 21 maart valt. Dat is niet helemaal juist, maar voor deze toepassing is het voldoende nauwkeurig.
  Pas na het jaar 3000 wordt de afwijking zo groot dat de kalender onbetrouwbaar wordt.
- Carnaval is een feest dat alleen wordt gevierd in de Rooms-Katholieke traditie. Het begint op de zondag, 7 weken voor pasen (en niet op de zaterdag ervoor zoals sommigen schijnen te denken). De woensdag erna is Aswoensdag. Deze dag markeert het begin van de Vastentijd.
  Aswoensdag staat niet in de Kalender, maar kan daar eenvoudig in worden opgenomen. Zie verderop in dit betoog.
  In de Protestantse traditie wordt Carnaval niet gevierd. De zondag van Carnaval markeert het begin van de lijdenstijd.
- Goede Vrijdag is altijd de vrijdag vóór Pasen.
- Pinksteren wordt 7 weken ná Pasen gevierd, Hemelvaartsdag is tien dagen daarvoor en valt dus altijd op donderdag.
- Het Kerstfeest valt altijd op een vaste datum. Dat geldt ook voor de andere erkende feestdagen.
  Ook andere feestdagen op een vaste datum kunnen eenvoudig in de kalender worden opgenomen. Zie verderop in dit betoog.
Feestdagen aan de kalender toevoegen of verwijderen:
- Je moet hiervoor de file jaarkal.js wijzigen. Waar je dit kunt doen staat duidelijk in de file aangegeven en wordt hieronder nog toegelicht. Wijzigingen op andere plaatsen kunnen de kalender onbruikbaar maken.
- Om het uiterlijk van de markeringen te wijzigen moet je classes in het style-block veranderen. Dit wordt uitgeschreven door de function jak(). De toepassing van de gebruikte classes is genoemd in de file. Je kunt hier ook classes toevoegen en verwijderen.
- Als je een feestdag wilt toevoegen die niet aan Pasen is gerelateerd, moet je een conditie toevoegen aan de function mndkal(). Dit gaat als volgt:
  Stel: we voegen een markering toe op 17 oktober (mijn verjaardag).
  De markering wordt lichtblauw, #00BFFF.
  * Voeg een class toe aan het style-block in jak(). De code daarvoor is:
  
  t += ".lbl{color:#ffffff; background:#00bfff;}"; // Lichtblauw: Verjaardag
  
  * In het blok Markeringen in de Kalender voeg je de regel toe:
  
  if (m == 9 && dag == 17) t += "<b class='lbl'>"; // Hoera, Ben is jarig
- Voor de maanden wordt de variabele m gebruikt. Hiervoor geldt de standaard-nummering in JavaScript. Dat wil zeggen:
  Januari: m == 0; Februari: m == 1; Maart: m == 2; ..... ; December m == 11;
- Voor de dagen van de maand wordt de variabele dag gebruikt; deze bevat het dagnummer.
- Als je een feestdag wilt toevoegen die wel aan Pasen is gerelateerd, moet je twee condities toevoegen aan de function mndkal(). Dit gaat als volgt:
  Stel: we voegen Aswoensdag toe (op de dag na Carnaval).
  De markering wordt grijs, #696969.
  * Voeg een class toe aan het style-block in jak(). De code daarvoor is:
  
  t += ".dgr{color:#ffffff; background:#696969;}"; // Grijs: Aswoensdag
  
  * Voeg een variabele toe aan het blok Berekening feestdagen die afhangen van de datum van Pasen, in de function mndkal(). Noem deze bijvoorbeeld aw.
  * Omdat Aswoensdag de dag ná de derde dag van Carnaval is, zou de code kunnen zijn:
  
  aw = c3 + 1;
  
  Andere oplossingen zijn ook mogelijk, bijv. aw = p1 - 46.
  
  * In het blok Markeringen in de Kalender voeg je de regel toe:
  
  if (dag == aw) t += "<b class='dgr'>"; // Aswoensdag
- Om een feestdag uit de kalender te verwijderen haal verwijder je de betreffende regels uit de code.
- De manier waarop de markeringen in de kalender worden aangebracht ziet er op het eerste gezicht wat vreemd uit
  In de cell wordt de tag <b> (voor bold) geopend, met een class om de kleuren van tekst en achtergrond in te stellen. De <b>-tag wordt niet meer gesloten. Dat is ook niet nodig, omdat de <b>-tag gelijk met de table-cell wordt gesloten.
  
  Een werkwijze waarbij de table-cell een class meekrijgt die behalve de kleurinstellingen ook de tekst vet zet, lijkt meer voor de hand liggend. Het zou in elk geval consequenter gebruik van style zijn. Om een-of-andere vage reden werkte dit niet vroeger met Internet Explorer (t.m. versie 6). Daarom is destijds voor de aanpak met de <b>-tag gekozen en tot op heden gehandhaafd.

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="jaarkal.js"></script>
<script>
function ToonJaarKalender(){
var HetJaar = document.getElementById('MijnJaar').value;
if (HetJaar.length > 0) jak(HetJaar);
}
</script>

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

<form
action="JavaScript:jak(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: voorb192.zip, 2863 bytes.

Opmerking:

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

Van deze kalender bestaat ook een versie met weeknummers.