Maandkalender II: met weeknummers

Hiernaast zie je een maandkalender. De huidige maand wordt getoond. De weeknummers worden aangegeven. De datum van vandaag licht op doordat de kleur en de achtergrond contrasteren met de rest.
Als je op de pijltjes naar links en naar rechts klikt, verschijnt de vorige resp. de volgende maand. Als je op de maand klikt verschijnt de huidige maand weer.
Een klik op een datum brengt een alert op. Deze toont de gekozen datum, echter niet netjes geformatteerd. De tijd is op 00:00:00 ingesteld.

Op deze bladzijde staat beschreven hoe je de kalender in je eigen website kunt inbouwen en hoe je de reactie op een datum-click kunt aanpassen aan je eigen wensen.
De kleuren van de kalender kunnen ook worden aangepast.

De code staat onderaan deze bladzijde. Je kunt hem ook downloaden om zelf te gebruiken.

Deze kalender is een variant van de kalender die besproken wordt in het item Maandkalender. Het verschil is dat de weeknummers er aan zijn toegevoegd.
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.

• Er worden vier items besproken:
  1. Inbouwen in je eigen website
  2. Aanpassingen in de code om de kalender te gebruiken.
  3. Globale werking van het script dat de kalender genereert.
  4. Mogelijkheden om clicks op de kalender verder te gebruiken in je website.
   
• De code bestaat uit drie delen: Een Style-block en JavaScript (in de HEAD) en HTML in de BODY.
• De JavaScript-code waarmee de kalender wordt gemaakt staat in de file maandkalw.js. Dat bestand bevat ook de functions voor het berekenen van het weeknummer. Hetstyle-block wordt door dit JavaScript automatisch uitgeschreven. Je hoeft dus geen aparte <style>-tag in de HEAD op te nemen.
  De code in maandkalw.js moet worden aangepast om hem te gebruiken.
• De bijbehorende HTML-code moet meestal ook worden aangepast.
   
• Het style-block wordt gemaakt met behulp van document.write. Bijna alles kan worden aangepast. Namen van classes en tags moeten uiteraard ongewijzigd blijven. Dat geldt ook voor uitlijning (text-align) en cursor. Pas op met het veranderen van afmetingen (padding, margin) en van de fonts (font-weight, font-size).
• Voor de kleuren kun je hexadecimale codes en standaard kleurnamen gebruiken. Zie daarvoor het item "Kleurcodes voor tekst, links en achtergrond".
   
• Je zet de kalender in je web-pagina met behulp van een <div>-tag. Deze heeft id="KalenderBlad" en een style attribuut. Voor het overige is de <div>-tag leeg.
• Het id mag niet worden veranderd. De style kun je aanpassen. Met float kun je left of right gebruiken, of je kunt dit weg laten. De margins zijn handig om wat tussenruimte te maken met de rest van de pagina-inhoud. Verder zou je position, left, top, width en height kunnen toepassen. Dat is een kwestie van proberen.
• Direct na de <div>-tag wordt een de JavaScript function MaandKalender() aangeroepen. Deze genereert de HTML van het kalenderblad en maakt deze de innerHTML van de <div> met het id="KalenderBlad". Hierdoor verschijnt het kalenderblad op het scherm.
   
• Na een click op de kalender wordt de gekozen datum gecombineerd met de maand en het jaartal en in de datum-variabele GekozenDatum gezet. Er wordt niets aan geformatteerd, alleen wordt de tijd (uren:minuten:seconden) op 00:00:00 gezet.
• Vervolgens wordt de function KalenderResultaat() aangeroepen. Deze is bedoeld om GekozenDatum verder laten verwerken. Je kunt de gegevens bijvoorbeeld in een formulierveld opnemen. Op deze bladzijde verschijnt een alert, als voorbeeld.
  De function KalenderResultaat() staat in de file maandkalw.js. Deze function moet je aanpassen om de kalender zinvol te gebruiken.
• Als je de kalender alleen wilt gebruiken om je website mee te verfraaien, moet KalenderResultaat() er zo uit zien:
   
  function KalenderResultaat() {}
   
• Om de datum netjes op te maken kun je gebruik maken van het item "Systeem-datum tonen op een web-pagina".
   
• Het genereren van de kalender werkt -zonder in details te treden- als volgt:
  • Bij openen van de pagina wordt de datum van vandaag bepaald. Hiervoor wordt de systeemdatum gebruikt. De huidige maand en het jaartal zijn nu ook bekend. Eventuele correctie voor een schrikkeljaar wordt hier uitgevoerd. De function MaandKalender() doet de rest:
  • De dag (maandag, dinsdag, ...) waarop de eerste van de huidige maand valt wordt bepaald, waarna het weeknummer wordt berekend.
  • De bovenste twee regels worden in de tabel gezet.
  • De eerste tabel regel wordt gemaakt. Er worden zoveel lege cellen gemaakt als nodig is, daarna volgt 1, 2 enz.
  • De tweede, derde, vierde, vijfde en zesde regel worden gemaakt. Het weeknummer wordt steeds met 1 opgehoogd.
  • De zevende regel wordt gemaakt. Deze is meestal niet volledig. Lege cellen aan het einde van de regel worden niet meer toegevoegd. Dat is ook niet nodig. De browser zelf zorgt voor een nette rechthoekige tabel.
    Als het weeknummer 53 is wordt gekeken of het toch niet week 01 moet zijn.
• Het veranderen van maand gaat als volgt:
  • Merk op dat de maanden worden geteld van 0 tot en met 11. Dus januari = 0, februari = 1, enz.
  • Volgende maand: Het maandnummer wordt verhoogd. Als het groter wordt dan 11 wordt het op 0 gezet en wordt het jaartal verhoogd. Vervolgens wordt MaandKalender() aangeroepen die een nieuwe tabel maakt en op het scherm laat verschijnen.
  • Vorige maand: Het maandnummer wordt verlaagd. Als het kleiner wordt dan 0 wordt het op 11 gezet en wordt het jaartal verlaagd. Vervolgens wordt MaandKalender() aangeroepen die een nieuwe tabel maakt en op het scherm laat verschijnen.

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
• Voeg eventueel code toe om de gekozen datum te verwerken. Zie de tekst.

De code ziet er als volgt uit:
 
(Zet dit in de <HEAD>).

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

(Zet dit in de <BODY>, op de plaats waar de kalender moet verschijnen.).

<div id="KalenderBlad" style="float:right; margin-top:0px; margin-right:0px; margin-bottom:25px; margin-left:25px;">
</div>
<script>MaandKalender()</script>

Downloaden:
 
Druk op de knop:  File: voorb345.zip, 4206 bytes.