Javascript based kalender

Door Eris -, 15 jaar geleden, 6.981x bekeken

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.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<script src="calendar.js" type="text/javascript"></script>

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
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
/*Config setting*/
//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

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
//language settings.
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

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
  h = element.previousSibling;


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.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
window.onload = function(){
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

  1. javascript-based-kalender

 

Er zijn 11 reacties op 'Javascript based kalender'

PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Mebus  Hackintosh
Mebus Hackintosh
15 jaar geleden
 
0 +1 -0 -1
Lijkt meer op een tutorial:p Maar mooi script:D Vooral handig dat het ook gewoon met JavaScript kan:) Geef de bezoeker ook maar wat verwerkings processen:p En niet alleen je eigen server:)

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:)
Eris -
Eris -
15 jaar geleden
 
0 +1 -0 -1
Nee zo hoort een script hier gepost uit te zien. Niets meer niets minder. Zo kan een gebruiker dit script direct kopieren uitleg lezen en testen maar..

Als het een tutorial was was het 4 keer langer...
PHP Newbie
PHP Newbie
15 jaar geleden
 
0 +1 -0 -1
Upload ff delete.png naar je site ;-)
GaMer B
GaMer B
15 jaar geleden
 
0 +1 -0 -1
Erg mooi script en tevens goed uitgelegd. Nice job.
Eris -
Eris -
15 jaar geleden
 
0 +1 -0 -1
even de link aan gepast :)
Joeri
Joeri
15 jaar geleden
 
0 +1 -0 -1
Mooi script, handig en idd nice dat het niets van je server vergt.

Grtz
Rudie dirkx
rudie dirkx
15 jaar geleden
 
0 +1 -0 -1
Quote:
Nee zo hoort een script hier gepost uit te zien. Niets meer niets minder. Zo kan een gebruiker dit script direct kopieren uitleg lezen en testen maar..

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'.
PHP erik
PHP erik
15 jaar geleden
 
0 +1 -0 -1
Misschien een domme vraag hoor, maar wat betekent "bassed" in "Javascript bassed calendar"? Moet dat gewoon "based" zijn of heeft het een betekenis? Verder ziet het er niet slecht uit. Alleen of het echt kan concurreren met de bestaande scripts op internet zoals phpMyAdmin gebruikt dat weet ik niet.
Basbox112
Basbox112
15 jaar geleden
 
0 +1 -0 -1
Prachtig script! Alleen even voor het nette de titel aan (laten?) passen ;)
> Bassed = Based
Marvin S
Marvin S
15 jaar geleden
 
0 +1 -0 -1
+ datums = data
PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
PHP Newbie
PHP Newbie
15 jaar geleden
 
0 +1 -0 -1
ik zie hier in IE7 alleen maar 4 regels met cijfers. Dus wel op de goede plek, maar deze maand (april 2007) heeft maar 28 dagen. Die laatste rij laat hij niet zien..

Om te reageren heb je een account nodig en je moet ingelogd zijn.

Inhoudsopgave

  1. javascript-based-kalender

Labels

  • Geen tags toegevoegd.

Navigatie

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.