Kalender aus Tabellen mit Javascript....
0 0 0 
Felix Riesterer
0
0 
Auge
Kalender aus Tabellen mit Javascript....
Ich habe mir für meine Website einen Kalender gebastelt, der aus ein paar Tabellen besteht. Oben soll ein Bild sein, dann untendrunter der Monat und das Jahr und ganz unten die Tage (die Anzahl der Tage je nach Monat).
Alles habe ich soweit hinbekommen, aber ich würde jetzt noch gerne das Ganze so haben, dass die Tageszahl mit einem farbigen Hintergrund hinterlegt ist.
Doch wie mache ich das?
Ich habe es bereits mit
document.getElementById("tabelle").style.color: green;
probiert. Zuvor hatte ich der Tabelle mit den Zahlen noch die ID="tabelle" gegeben. Doch warum funktioniert das nicht?
Hier ist einmal der Quellcode, vielleicht habe ich ja auch nur einen Fehler geschrieben, den ich jetzt nicht mehr finden kann...
<html>
<head>
<title>Kalender</title>
<script type="text/javascript">
<!--
function aktuellerTag()
{
document.getElementById("tabelle").style.color: green;
}
//-->
</script>
</head>
<body OnLoad="aktuellerTag()">
<table widht="240px"; border="1"; bordercolor="black";>
<tr>
<td>
<table border="1"; bordercolor="green"; bgcolor="black"; width="100%";>
<tr>
<td><img src="Bild.jpg" alt="Bildbeschreibung"></td>
</tr>
</table>
<script type="text/javascript">
var aktuellesDatum = new Date();
var monat = aktuellesDatum.getMonth();
var tag = aktuellesDatum.getDate();
var jahr = aktuellesDatum.getFullYear();
var monate = monat+1;
document.write("<table border='1'; width='100%'; bordercolor='red'>");
document.write("<tr>");
document.write("<td><center>"+monate+"."+jahr+"</center></td>");
document.write("</tr>");
document.write("</table>");
</script>
<table border="1"; width="239px"; id="tabelle";>
<tr>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
<script type="text/javascript">
<!--
if(monat =="0")
{
document.write("<tr>");
document.write("<td>31</td>");
document.write("</tr>");
}
else if(monat =="2")
{
document.write("<tr>");
document.write("<td>31</td>");
document.write("</tr>");
}
else if(monat =="4")
{
document.write("<tr>");
document.write("<td>31</td>");
document.write("</tr>");
}
else if(monat =="6")
{
document.write("<tr>");
document.write("<td>31</td>");
document.write("</tr>");
}
else if(monat =="8")
{
document.write("<tr>");
document.write("<td>31</td>");
document.write("</tr>");
}
else if(monat =="10")
{
document.write("<tr>");
document.write("<td>31</td>");
document.write("</tr>");
}
//-->
</script>
</table>
</td>
</tr>
</table>
</body>
</html>
Wäre klasse, wenn mir jemand weiterhelfen könnte, ich habe heute schon sehr viel gegooglet und hier in Selfhtml gesucht, aber nichts gefunden :(
Gruß,
Pizzatoni
-
Hi there,
document.getElementById("tabelle").style.color: green;
Javascriptanweisung werden nicht wie stylesheetanweisungen geschrieben; was Du möchtest, würde zB:
document.getElementById("tabelle").style.color='#00ff00';
lauten, wenn Du meinst, daß Du eine grüne Schrift möchtest, der Hintergrund wäre nicht color sondern (genauso geschrieben) backgroundColor...
-
document.getElementById("tabelle").style.color='#00ff00';
lauten, wenn Du meinst, daß Du eine grüne Schrift möchtest, der Hintergrund wäre nicht color sondern (genauso geschrieben) backgroundColor...
Hi,
danke für deine Antwort, aber jetzt ist der ganze Hintergrund hinter den Zahlen farbig (oder die Zahlen sind farbig), aber ich wollte eigentlich, dass nur der aktuelle Tag farbig gekennzeichnet wird ;)Vielleicht können mir noch ein paar mehr Leute weiterhelfen :)
Gruß,
Pizzatoni-
Lieber Pizzatoni,
aber ich wollte eigentlich, dass nur der aktuelle Tag farbig gekennzeichnet wird ;)
dann verwende eine Klasse oder ID für diesen Zweck. Vielleicht so?
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Lieber Pizzatoni,
dann verwende eine Klasse oder ID für diesen Zweck. Vielleicht so?
Liebe Grüße,
Felix Riesterer.
Genau das mein ich mit dem Hintergrund, danke für den Link :)
Gruß,
Pizzatoni
-
-
Hi there,
danke für deine Antwort, aber jetzt ist der ganze Hintergrund hinter den Zahlen farbig (oder die Zahlen sind farbig), aber ich wollte eigentlich, dass nur der aktuelle Tag farbig gekennzeichnet wird ;)
Nja, was erwartest Du, wenn Du der ganzenTabelle einen Hintergrund verpasst? Das Beispiel war ja von Dir, nicht von mir. Wenn Du einzelnen Zellen eine entsprechende Farbe zuweisen möchtest, dann gib einfach den einzelnen Zellen (td-Tags) eine Id und sprich sie über diese Id wie zuvor beschrieben an; dann hast Du halt eine Javascript-Anweisung wie document.getElementById('TAG02').style.backgroundColor='#00ff00' oder so ähnlich...
-
Nja, was erwartest Du, wenn Du der ganzenTabelle einen Hintergrund verpasst? Das Beispiel war ja von Dir, nicht von mir. Wenn Du einzelnen Zellen eine entsprechende Farbe zuweisen möchtest, dann gib einfach den einzelnen Zellen (td-Tags) eine Id und sprich sie über diese Id wie zuvor beschrieben an; dann hast Du halt eine Javascript-Anweisung wie document.getElementById('TAG02').style.backgroundColor='#00ff00' oder so ähnlich...
Stimmt, ich habe ja mit dem "tabelle" die ganze Tabelle angesprochen. Ich werde es mir mal morgen/heute anschauen und den Quellcode ausbessern :)
Gruß,
Pizzatoni
-
-
-
-
Hallo
Wie du einem Element eine Style-Eigenschaft zuweist, hat dir Klawischnigg schon geschrieben. Deshalb von mir nur eine allegemeine Manöverkritik.
Hier ist einmal der Quellcode, vielleicht habe ich ja auch nur einen Fehler geschrieben, den ich jetzt nicht mehr finden kann...
<script type="text/javascript">
<!--
[code lang=javascript]function aktuellerTag()
{
document.getElementById("tabelle").style.color: green;
}> //--> > </script>[/code] Du weist, wenn auch falsch, \_der\_ganzen\_Tabelle\_ die Schriftfarbe zu, nicht, wie zumindest ich erwarten würde, dem betreffenden Tag. Zudem ist die Kapselung des JavaScript-Codes in einem HTML-Kommentar heutzutage unnötig. Das war mal anders, aber heutzutage kommen alle Browser mit JavaScript-Code zurecht, auch wenn sie ihn nicht ausführen. > ~~~html </head> > <body OnLoad="aktuellerTag()"> > <table widht="240px"; border="1"; bordercolor="black";>Hier, wie auch bei allen anderen HTML-Attributen gilt, dass es *keine* abschließenden Semikola gibt.
<table widht="240px" border="1" bordercolor="black">wäre also richtig, auch wenn Angaben zum Aussehen mit CSS und nicht mit HTML-Attributen gesetzt werden sollten.<tr>
<td>
<table border="1"; bordercolor="green"; bgcolor="black"; width="100%";>
<tr>
<td><img src="Bild.jpg" alt="Bildbeschreibung"></td>
</tr>
</table>
<script type="text/javascript">
[code lang=javascript] var aktuellesDatum = new Date();
var monat = aktuellesDatum.getMonth();
var tag = aktuellesDatum.getDate();
var jahr = aktuellesDatum.getFullYear();
var monate = monat+1;
document.write("<table border='1'; width='100%'; bordercolor='red'>");
document.write("<tr>");
document.write("<td><center>"+monate+"."+jahr+"</center></td>");
document.write("</tr>");
document.write("</table>");> </script>[/code] Es wäre konsistenter, alle Tabellen, die zum Kalender gehören, mit JavaScript zu erzeugen, wenn man den Kalender schon mit JavaScript aufbaut. So wird ein Benutzer, dem kein JavaScript zur Verfügung steht, die Tabelle für das Bild und deine Aufzählung von 1 bis 30 sehen, aber nicht den Kalenderkopf und auch nicht die 31. Würdest du alles mit JavaScript ausgeben, würde diesem Benutzer zwar der Kalender fehlen, er würde aber keine zusammenhangslosen Fragmente desselben zu Gesicht bekommen. Ich würde, im Gegensatz dazu, einen Aufbau des Kalenders mit einer serverseitigen Programmiersprache (z.B. Perl, PHP, Python ...) bevorzugen. Damit wäre sichergestellt, dass der Kalender überall dort angezeigt wird kann, wo HTML angezeigt werden kann. > ~~~html <table border="1"; width="239px"; id="tabelle";> > <tr> > </tr> > <tr> > <td>1</td> > <td>2</td> > <td>3</td> > <td>4</td> > <td>5</td> > <td>6</td> > <td>7</td> > <td>8</td> > <td>9</td> > <td>10</td> > </tr> > <tr> > <td>11</td> > <td>12</td> > <td>13</td> > <td>14</td> > <td>15</td> > <td>16</td> > <td>17</td> > <td>18</td> > <td>19</td> > <td>20</td> > </tr> > <tr> > <td>21</td> > <td>22</td> > <td>23</td> > <td>24</td> > <td>25</td> > <td>26</td> > <td>27</td> > <td>28</td> > <td>29</td> > <td>30</td> > </tr>Fürwahr, ein ungewohnter Aufbau eines Kalenders.
<script type="text/javascript">
<!--
[code lang=javascript] if(monat =="0")
{
document.write("<tr>");
document.write("<td>31</td>");
document.write("</tr>");
}
else if(monat =="2")
{
document.write("<tr>");
document.write("<td>31</td>");
document.write("</tr>");
}
else if(monat =="4")
{
document.write("<tr>");
document.write("<td>31</td>");
document.write("</tr>");
}
else if(monat =="6")
{
document.write("<tr>");
document.write("<td>31</td>");
document.write("</tr>");
}
else if(monat =="8")
{
document.write("<tr>");
document.write("<td>31</td>");
document.write("</tr>");
}
else if(monat =="10")
{
document.write("<tr>");
document.write("<td>31</td>");
document.write("</tr>");
}> //--> > </script> > </table> > [/code] Wie gesagt, der 31-er-Block fehlt dem Benutzer ohne JavaScript. Zudem fehlen der Tabelle die in den anderen Zeilen existierenden weiteren neun Tabellenzellen (es fehlt eine folgende Zelle `<td colspan="9">`{:.language-html} zum auffüllen). Davon abgesehen ist die Zählung nicht korrekt. Wenn ich recht sehe, entspricht der Januar `monat=0`{:.language-javascript}. Nach Juli (monat=6) stimmt die Zählung nicht mehr, da der römische Kaiser Augustus, nach dem der Monat August benannt ist, nicht verknusen konnte, dass der vorausgehende Monat Juli, nach Gaius Julius Caesar, 31 Tage hatte, sein Monat jedoch nicht. Ab dem Monat August (monat=7) befinden sich die 31-Tage-Monate (nach deiner Zählung) auf den ungeraden Monaten (Oktober=9, Dezember=11). Grundsätzlich ist dein Kalender, wie schon sinngemäß angemerkt, ungünstig aufgebaut. SELFHTML hat bei den Anwendungsbeispielen für JavaScript ein <http://de.selfhtml.org/javascript/beispiele/monatskalender.htm@title=Beispielskript für einen Kalender>. Der entspricht zwar auch nicht mehr dem Stand der Technik und moderner Methodik (das Skript ist schon recht alt), aber es hat pro Woche eine eigene Zeile, eine Markierung des aktuellen Tages, die Zuweisung der Daten zu den Wochentagen (siehe: <http://de.selfhtml.org/javascript/beispiele/anzeige/monatskalender.htm@title=Anzeige des Beispiels>; Javascript muss natürlich aktiviert sein) und im Archiv des Forums gibt es Diskussionen um das Skript und Erweiterungen desselben. Probiers mal über die [Forumssuche](http://suche.de.selfhtml.org/cgi-bin/such.pl?suchausdruck=Selfhtml+javaScript+kalender&feld=alle&index_1=on&index_2=on&index_4=on&index_5=on&hits=alle), eventuell mit Variationen der Schreibweisen. Tschö, Auge -- Die deutschen Interessen werden am Liechtenstein verteidigt. [Veranstaltungsdatenbank Vdb 0.2](http://termindbase.auge8472.de/)-
Hi Auge,
Es wäre konsistenter, alle Tabellen, die zum Kalender gehören, mit JavaScript zu erzeugen, wenn man den Kalender schon mit JavaScript aufbaut. So wird ein Benutzer, dem kein JavaScript zur Verfügung steht, die Tabelle für das Bild und deine Aufzählung von 1 bis 30 sehen, aber nicht den Kalenderkopf und auch nicht die 31.
Würdest du alles mit JavaScript ausgeben, würde diesem Benutzer zwar der Kalender fehlen, er würde aber keine zusammenhangslosen Fragmente desselben zu Gesicht bekommen.
Daran habe ich jetzt gar nicht gedacht, danke für den guten Tipp. Ich werde dann den Kalender ganz in Javascript aufbauen. :)
Davon abgesehen ist die Zählung nicht korrekt. Wenn ich recht sehe, entspricht der Januar
monat=0. Nach Juli (monat=6) stimmt die Zählung nicht mehr, da der römische Kaiser Augustus, nach dem der Monat August benannt ist, nicht verknusen konnte, dass der vorausgehende Monat Juli, nach Gaius Julius Caesar, 31 Tage hatte, sein Monat jedoch nicht. Ab dem Monat August (monat=7) befinden sich die 31-Tage-Monate (nach deiner Zählung) auf den ungeraden Monaten (Oktober=9, Dezember=11).Ich wollte den Kalender jetzt ersteinmal allgemein haben, dass das "Design" stimmt und hatte mir nicht besonders viele Gedanken darüber gemacht, dadurch ist anscheinend auch der Fehler entstanden :(
Gruß,
Pizzatoni -
Hier, wie auch bei allen anderen HTML-Attributen gilt, dass es *keine* abschließenden Semikola gibt.
<table widht="240px" border="1" bordercolor="black">wäre also richtig, auch wenn Angaben zum Aussehen mit CSS und nicht mit HTML-Attributen gesetzt werden sollten.Ich wollte das alles in eine Datei schreiben, da ich den Kalender offline nutzen will, wenn ich zum Beispiel den Browser starte, und da nicht so viele Dateien haben möchte.
Gruß,
Pizzatoni
-