Javascript based kalender
Tijd voor een javascriptje. Waar voor ik te vaak onnodig PHP zie.
Soms loopt een website uit tot niets en blijf je zitten met een half werkende code. Zelf had ik in Januari een geweldig idee voor een meeting manager. Hellaas bleek de website toch iets in gewikkelder te zijn dan ik eerst dacht. En hij staat nu al 2 maanden op mijn "externe harde schrijf" te rusten. Maar ja wat er wel uit gekomen was een kleine oplossing waar veel webdesingers mee zitten te klooien en die deel ik even met jullie graag.
Datums
Iedereen kent die beruchte drie beruchte select boxen op een rijtje die een dag, maand en een jaar voor stellen. Waar de bezoeker een datum moet in vullen. Bijvoorbeeld een geboortje jaar.
Nu vind ik het voor 1 datum niet zo erg. Maar bij 3 wordt het toch ongemakkelijk. Daarom heb ik besloten om een input veld (type = "text") te gebruiken waar de gebruiker gewoon een datum in kan vullen. Ook kan hij gebruik maken van een kalender die doormiddel van Javascript genereed wordt.
Voor deze script is basis kennis van de WC3 DOM en javascript nodig. Hoewel het gebruik eenvoudig is dienen er 3 "config" waarden in te vullen. Deze versie is de eenvoudigste systeem. De script bevat aardig veel JS comments.
Voorbeeld
Browser ondersteuning
Deze script werkt alleen on "moderne" browsers. (IE 5.0 en nieuwer, Safari, Firefox 1.0 en nieuwer en al zijn cloontjes en Opera 9.0. Opera 8.0 werkt waarschijnlijk wel maar niet getest. Door de gebruik van geavenceerde WC3 Dom scripts kan ik niet garanderen of het werkt onder IE 5.x op de Mac. Maar ja wie gebruikt dat nog?
Installatie
Download hier
Unzip dit bestand en upload alle bestanden naar de webserver. Voeg nu in de html code de volgende codes toe.
Wanneer je gebruik wilt maken van de "standaard" style sheet kan je deze style sheet ook gewoon toevoegen. Uiteraard kan je ook je eigen style sheet gebruiken met een andere opmaak zolang de class namen maar gelijk blijven. (Zie calendar.css)
Maak nu een input veld aan waar de datum in moet te komen staan en geef deze een "id".
Instellingen
Om de kalender script in te stellen moet de volgende gegevens aanpassen
Regel: 27
2
3
4
5
6
7
8
//create a data object for the date now so we don't need to change it next year. (today.getFullYear() to get the current year) Offcourse you can set a "own" value
var today = new Date();
var start_year = today.getFullYear();
//end year
var end_year = today.getFullYear() + 5;
//location of the "close" cross
var delete_cross = '/images/scripts/calendar/delete.png';
In dit voorbeeld gebruiken wij de huidige jaar + 5 jaar. Dit kan je zelf uiteraard aanpassen. Met het de jaren die jij wilt.
Locatie van close cross moet je zelf even aangeven. In dit voorbeeld is het dit
2
3
4
5
6
7
var calendar = 'Calendar';
//month names
var month_names = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
//names of the days. 0 = sunday, 6 = saturday
//we don't care about "logic" values because the user will not see it. If they will see it he/she got enough knowlege about browsers and their quirks
var day_names = new Array('Sun','Mon','Tue','Wen','Thu','Fri','Sat');
Nu volgen er een paar taal settings die je gewoon zo kunt laten of natuurlijk aanpassen.
Nu komt het lastigste om deze script te activeren kan je kiezen uit mogelijkheden. Doormiddel van inline events en doormiddel van javascript.
Doormiddel van inline event moet je gebruik maken van onclick="show_calendar_inline(this)" aan de element waar jij de onclick event wilt toevoegen en in regel 111 de volgende aanpassen
Omdat ik zelf de onclick niet op de input element heb gedefineerd moet ik de id van de element vinden door een andere manier. Ik heb het gedaan door middel van de dom structuur 1 plaatsje naar voren schuiven. Omdat ik wou voorkomen dat ik voor alle input velden alles apart moest instellen. Jij kan als je gebruik wilt maken van 1 datum veld ook gewoon h = document.getElementById('idvandeveld'); gebruiken.
Wanneer je de javascript methode wilt gebruiken moet je nog een anders javascriptje toevoegen namelijk die er voor zorgt dat de text doorloopt en automatisch de onclick events toevoegt. Zelf doe ik het volgens de volgende script.
2
3
4
5
6
7
8
9
var images = document.getElementsByTagName('img');
for(i = 0; i < images.length; i++ ){
var img = images[i];
if(img.className == 'calendar'){
img.onclick = show_calendar;
}
}
}
Dit script zorgt er voor dat op images met de class calendar een onclick target wordt gegeven
Nu kan je doormiddel van 85 de juiste positie in de dom structuur op te geven.
Ook hier kan je gewoon h = document.getElementById('idvandeveld') ; gebruiken wanneer je een datum veld hebt.
Nu is het alleen nog de zaak om de return string op te geven in 313. Gebruik hier voor de juiste JS syntax.
Dat is alles
Gebruikte scripts van andere personen
Functies findPosY en findPosX. Geschreven door PPK. (Find position)
Voorbeeld: http://phphulp.phpclub.nl/969/
Gesponsorde koppelingen
PHP script bestanden
Er zijn 11 reacties op 'Javascript based kalender'
-0 
Hij is tussen me favorieten gezet:)
Mischien nog wel even mooi dat als je met je muis over close gaat dat hand cursor'tje getoont word:)
-0
Als het een tutorial was was het 4 keer langer...
-0
Niet aanstellen he. Een script is een script, of er nou uitleg bij staat of niet.
Het is echter wel een php forum... Weet niet of dat nog iets toevoegt.
Maar je kan nu toch nogsteeds foute datums invullen!?
Je hebt twee selectboxes en een paar 'knopjes'. Hoe is dit veel makkelijker? Het scheelt veel als het over vandaag of deze maand gaat, maar zo'n datum vul je nooit in. Dus je geboortedatum moet je toch op gaan zoeken in 2 selects en dan nog een 'knopje'.
-0
-0
> Bassed = Based
-0
Om te reageren heb je een account nodig en je moet ingelogd zijn.
PHP hulp
0 seconden vanaf nu