[JS] Kalender maken met changeable background p/dag *

[Verwijderd]

Jo daar,
ik heb ff gekeken naar verschillende scripts maar heb niet iets kunnen vinden wat er dichtbij kwam, dus hier is m'n laatste attempt (flamen kan elders )

anyway, ik heb net een kalender gemaakt ( http://animism.insidegamer.nl/mx/kal.php ) waarbij met een function (waarin de naam en lengte van de maand wordt meegegeven) de maanden worden gemaakt.
nu wil ik zegmaar dat als je op een dag van een maand klikt dat de achtergrond van die individuele cell van kleur verandert (waarmee ik kan aangeven of een dag "bezet" is).

ik dacht dit zelf te doen met mysql maar het lijkt me nogal database abuse als ik voor elke dag een query ga maken van if result found dan achtergrond is balblabla.

is er een effectievere manier ?

thanks in advance,
preatorian.

[PromWarMachine]

Voor het visuele gedeelte volstaat javascript gewoon. Als je de dagen die 'bezet' zijn, moet opslaan, dan moet je als men klaar is met selecteren een query bouwen die alle geselecteerde dagen op bezet zet. De achtergrond kleur van een cel via een database omzetten is nogal omslachtig ja.

Voor het technische gedeelte daarvan kun je terecht op Google voor een javascript tutorial en in W&G als het niet mocht lukken. Succes!

[Verwijderd]

1. hoe zou je in javascript zoiets opbouwen naast de draaiende php ? (ik weet nml heeleemaaaaal neits van javascript )

2. en kan ik trouwens niet eventueel via een array uit de database de achtergrondkleuren instellen ?

[Johnny]

Geef iedere aanklikbar cel een uniek id attribuut en een onclick eventhandler:

code:

<td id="cell31" onclick="toggleCell(31)"></td>
<td id="cell32" onclick="toggleCell(32)"></td>
<td id="cell33" onclick="toggleCell(33)"></td>

Vervolgens maak je een simpele javascript functie die de achtergrondafbeelding van een element veranderd:

code:

<script type="text/javascript">
function toggleCell(id) {

document.getElementById('cell' + id).style.backgroundImage = "url('mijnplaatje.png')";

}
</script>

Als je ook nog de mogelijkheid wilt hebben om on klik-actie ongedaan te maken door er nog een keer op te klikken heb je nog een paar regels extra code nodig. Het handigst is om in javascript een globale array te maken met booleans waarin je bijhoud welke cellen zijn aangeklikt (true) en en welke nog niet (false/null) waardoor je zoiets krijgt:

code:

<scipt type="text/javascript">
var toggleList = new Array();

function toggleCell(id) {
    
    if(toggleList[id]) {
        document.getElementById('cell'+id).style.backgroundImage = "url('mijnplaatje.png')";
        toggleList[id] = false;
    } else {
        document.getElementById('cell'+id).style.backgroundImage = 'none';
        toggleList[id] = true;
    }
}
</script>

[ Voor 77% gewijzigd door Johnny op 26-12-2004 20:08 ]

[Verwijderd]

Johnny bedankt voor je reactie.

ik heb 'm nu staan op http://animism.insidegamer.nl/mx/kal.php maar er gebeurt niets (staat op alle maanden met 31 dagen, dus probeer maar 'ns op een dag in januari te klikken)

en volgens mij wordt met het script trouwens ook niet opgeslagen welke dag een andere achtergrond hebben (als je refreshed is alles weg) of heb ik dat mis?

[Johnny]

In HTML mag een ID niet uit alleen nummers bestaan, in mijn voorbeeld heten ze dan ook cell32 bij jou 32 en in het javascript dat je gebruikt cell32, je moet dus zorgen dat de ID in je HTMl klopt.

Verder moet je ID uniek zijn, je mag dus niet meerdere malen dezelfde op een pagina gebruiken, anders weet je browser niet welke ID je bedoeld. In dit geval is het dus het handigst om met de dag van het jaar te werken, dus van 1 t/m 356.

Het script slaat inderdaad niet de geslecteerde datums op. Hier zijn trouwens twee mogelijkheden: bij de client of bij de server.

Als je het bij de client wilt doen kun je het via javascript direct in een cookie zetten, als je het op de server wil, heb je weer een heleboel manieren, bijvoorbeeld met een formulier, dat eerst een aantal datums geselecteerd worden en daarna wordt verstuurd, of via een verborgen iframe dat bij iedere klik een waarde doorstuurt, of via xmlhttp als je echt moeilijk wilt doen...

[Verwijderd]

in je javascript gebruik je het id " 'cell' + id " waarbij id een nummertje is, maar in je html zelf is het id alleen het nummertje.. Dat moet overeenkomen. Verder kun je niet meerdere td's hebben met dezelfde id.

edit:
/me is een beetje spuit elf

[ Voor 35% gewijzigd door Verwijderd op 26-12-2004 22:28 ]

[gorgi_19]

Ondertussen zie ik weinig meer aan de kant van serverside programmeren; alleen clientside zaken komen aan bot

>> Webdesign & Graphics