Kalender erstellen

minabowie · 28.07.2009, 21:44

Hallo

Ich habe etwas im Internet gesehen und ich möchte das gerne nachbauen.
Und zwar geht es um einen Kalender:
Mit einer Drop Down Liste möchte ich einen Datum auswählen können und wenn ich dieses dann ausgewählt habe soll ein Symbol (meiner Wahl) unten im Kalender an dem gewählten datum angezeigt werden. Wie kann ich das am besten hinbekommen.
Ich habe bis jetzt mal eine Auswahlliste erstellt, die alle meine gewünschten Infos enthält und ich habe einen Kalender eingefügt wo bis jetzt nur das Datum von von heute angezeigt wird, aber ich muß die 2 irgendwie miteinander verbinden habe keine Ahnung wie.

Kann mit jemand weiterhelfen

Vielen Dank

Sandy

thomasE · 28.07.2009, 23:28

dafür bräuchten wir definitiv mehr infos, einen Code, wenigstens ein Bild, irgendwas halt.
so kann ich nur raten.

thomas

minabowie · 28.07.2009, 23:36

Aber nicht lachen, da es sich um einen Eisprung Rechner handelt.

Also wo ich es gesehen habe ist hier

Und was ich gemacht habe hier

Schöne Grüße

nikosch · 28.07.2009, 23:48

Hihi. Sorry, kleines *grins*

Also, ich habe mal meinen Eisprung willkürlich berechnet (

) und mir die Tabelle angesehen. Das Prinzip ist an sich recht einfach - (also so würde ich es umsetzen): Die markierten Tage sind ja nach irgendwelchen Formeln berechnet. Für gleiche "Symbole/Typen" könntest Du bspw. die Werte in einem Array sammeln. Für jedes Bildchen würde ich ein CSS-Klassenbezeichner verwenden, den Du bspw. durch Vergleich mit If beim Durchlaufen der Schleife zum Erstellen der Kalendertage gleich ermittelst und dem Kalenderkästchen zuordnest. Über eine CSS Anweisung wie

.bluttest {background-image:url(images/bluttest.jpg)}

kannst Du dann ein Hintergrundbild setzen.

minabowie · 29.07.2009, 15:13

Kanns du mir ein bisschen helfen wie ich die funktion erstellen soll.

Was ich bis jetzt habe javascript code:

Code:

var d = new Date();
var dm = d.getMonth() + 1;
var dj = d.getYear();
if (dj < 999)
  dj += 1900;
Kalender(dm, dj);
NextKalender(dm, dj);

function Kalender (Monat, Jahr) {
  Monatsname = new Array("Januar", "Februar", "M&auml;rz", "April", "Mai", "Juni", "Juli",
                          "August", "September", "Oktober", "November", "Dezember");
  Tag = new Array("Mo", "Di", "Mi", "Do", "Fr", "Sa", "So");

  var KSchrArt = "Verdana,Arial"; /* Schriftart Kalenderkopf */
  var KSchrGroesse = 2;           /* Schriftgroesse 1-7 Kalenderkopf */
  var KSchrFarbe = "#FFFFFF";     /* Schriftfarbe Kalenderkopf */
  var Khgrund = "#800000";        /* Hintergrundfarbe Kalenderkopf */
  var TSchrArt = "Verdana,Arial"; /* Schriftart Tagesanzeige */
  var TSchrGroesse = 2;           /* Schriftgroesse 1-7 Tagesanzeige */
  var TSchrFarbe = "#000000";     /* Schriftfarbe Tagesanzeige */
  var Thgrund = "#D0F0F0";        /* Hintergrundfarbe Tagesanzeige */
  var SoFarbe = "#E00000";        /* Schriftfarbe f. Sonntage */
  var Ahgrund = "#FFFF00";        /* Hintergrundfarbe f. heutigen Tag */

  var jetzt = new Date();
  var DieserMonat = jetzt.getMonth() + 1;
  var DiesesJahr = jetzt.getYear();
  if (DiesesJahr < 999)
    DiesesJahr += 1900;
  var DieserTag = jetzt.getDate();
  var Zeit = new Date(Jahr, Monat - 1, 1);
  var Start = Zeit.getDay();
  if (Start > 0) {
    Start--;
  } else {
    Start = 6;
  }
  var Stop = 31;
  if (Monat == 4 || Monat == 6 || Monat == 9 || Monat == 11)
    --Stop;
  if (Monat == 2) {
    Stop = Stop - 3;
    if (Jahr % 4 == 0)
      Stop++;
    if (Jahr % 100 == 0)
      Stop--;
    if (Jahr % 400 == 0)
      Stop++;
  }
 var meinKalender = document.write('<div id="kalender"><table border="1" cellpadding="3" cellspacing="3" width="650" height="250">');
  var Monatskopf = Monatsname[Monat - 1] + " " + Jahr;
  SchreibeKopf(Monatskopf, Khgrund, KSchrFarbe, KSchrGroesse, KSchrArt);
  var Tageszahl = 1;
  for (var i = 0; i <= 5; i++) {
    document.write("<tr>");
    for (var j = 0; j <= 5; j++) {
      if ((i == 0) && (j < Start)) {
        SchreibeZelle(" ", Thgrund, TSchrFarbe, TSchrGroesse, TSchrArt);
      } else {
        if (Tageszahl > Stop) {
          SchreibeZelle(" ", Thgrund, TSchrFarbe, TSchrGroesse, TSchrArt);
        } else {
          if ((Jahr == DiesesJahr) && (Monat == DieserMonat) && (Tageszahl == DieserTag)) {
            SchreibeZelle(Tageszahl, Ahgrund, TSchrFarbe, TSchrGroesse, TSchrArt);
          } else {
            SchreibeZelle(Tageszahl, Thgrund, TSchrFarbe, TSchrGroesse, TSchrArt);
          }
          Tageszahl++;
        }
      }
    }
    if (Tageszahl > Stop) {
      SchreibeZelle(" ", Thgrund, SoFarbe, TSchrGroesse, TSchrArt);
    } else {
      if ((Jahr == DiesesJahr) && (Monat == DieserMonat) && (Tageszahl == DieserTag)) {
        SchreibeZelle(Tageszahl, Ahgrund, SoFarbe, TSchrGroesse, TSchrArt);
      } else {
        SchreibeZelle(Tageszahl, Thgrund, SoFarbe, TSchrGroesse, TSchrArt);
      }
      Tageszahl++;
    }
    document.write("<\/tr>");
  }
  document.write("<\/table></div>");
}


function SchreibeKopf (Monatstitel, HgFarbe, SchrFarbe, SchrGroesse, SchrArt) {
  document.write("<tr>");
  document.write('<td align="center" colspan="7" valign="middle" bgcolor="' + HgFarbe + '">');
  document.write('<font size="' + SchrGroesse + '" color="' + SchrFarbe + '" face="' + SchrArt + '"><b>');
  document.write(Monatstitel);
  document.write("<\/b><\/font><\/td><\/tr>");
  document.write("<tr>");
  for (var i = 0; i <= 6; i++)
    SchreibeZelle(Tag[i], HgFarbe, SchrFarbe, SchrGroesse, SchrArt);
  document.write("<\/tr>");
}

function SchreibeZelle (Inhalt, HgFarbe, SchrFarbe, SchrGroesse, SchrArt) {
  document.write('<td align="center" valign="middle" bgcolor="' + HgFarbe + '">');
  document.write('<font size="' + SchrGroesse + '" color="' + SchrFarbe + '" face="' + SchrArt + '"><b>');
  document.write(Inhalt);
  document.write("<\/b><\/font><\/td>");
}

index.htm

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="DC.Keywords" content="Test" />
<script type="text/javascript" src="js/kalender.js"></script>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<title>Test</title>

        <!--[if IE]>
                 <style type="text/css">
                 </style>
        <![endif]-->
        <!--[if IE 8]>
                 <style type="text/css">
                 </style>
        <![endif]-->
        <!--[if IE 6]>
                 <style type="text/css">
                 </style>
        <![endif]-->
</head>

<body>
<div id="main">
<!-- Anfang Eisprung Rechner Code -->
                        <form action="js/kalender.js" method="post">
        <table border="1" width="400" style="border-collapse: collapse" bordercolor="#800000">
                <tr>
                        <td bordercolor="#800000" bgcolor="#800000">
                        <p align="center"><b><font size="4" face="Tahoma" color="#FFFFFF">Eisprung
                        bestimmen</font></b></p>
                        </td>
                </tr>
                <tr>
                        <td>
                        <table border="0" width="400">
                                <tr>
                                        <td width="421" colspan="2">
                                        <p align="center">
                                        <font face="Tahoma" style="font-size: 9pt"> <br>
                                        Mein Eisprung Rechner.<br>
                                        </font></p>
                                        </td>
                                </tr>
                                <tr>
                                        <td width="156"><b>
                                        <font face="Tahoma" style="font-size: 9pt">Letzte Menstruation:</font></b></td>
                                        <td width="261"><font face="Tahoma">
                                        <span style="font-size: 9pt">

                                        <select size="1" name="tag" id="tag" >
                                                 <option value="1" selected>1</option>
                                                 <option value="2">2</option>
                                                 <option value="3">3</option>
                                                 <option value="4">4</option>
                                                 <option value="5">5</option>
                                                 <option value="6">6</option>
                                                 <option value="7">7</option>
                                                 <option value="8">8</option>
                                                 <option value="9">9</option>
                                                 <option value="10">10</option>
                                                 <option value="11">11</option>
                                                 <option value="12">12</option>
                                                 <option value="13">13</option>
                                                 <option value="14">14</option>
                                                 <option value="15">15</option>
                                                 <option value="16">16</option>
                                                 <option value="17">17</option>
                                                 <option value="18">18</option>
                                                 <option value="19">19</option>
                                                 <option value="20">20</option>
                                                 <option value="21">21</option>
                                                 <option value="22">22</option>
                                                 <option value="23">23</option>
                                                 <option value="24">24</option>
                                                 <option value="25">25</option>
                                                 <option value="26">26</option>
                                                 <option value="27">27</option>
                                                 <option value="28">28</option>
                                                 <option value="29">29</option>
                                                 <option value="30">30</option>
                                                 <option value="31">31</option>
                                        </select>

                                         <select size="1" name="monat" id="monat">
                                                 <option value="01" selected>Januar</option>
                                                 <option value="02">Februar</option>
                                                 <option value="03">März</option>
                                                 <option value="04">April</option>
                                                 <option value="05">Mai</option>
                                                 <option value="06">Juni</option>
                                                 <option value="07">Juli</option>
                                                 <option value="08">August</option>
                                                 <option value="09">September</option>
                                                 <option value="10">Oktober</option>
                                                 <option value="11">November</option>
                                                 <option value="12">Dezember</option>
                                        </select>

                                        <select size="1" name="jahr" id="jahr">
                                                 <option value="2008">2008</option>
                                                 <option value="2009" selected>2009</option>
                                                 <option value="2010">2010</option>
                                                 <option value="2011">2011</option>
                                                 <option value="2012">2012</option>
                                                 <option value="2013">2013</option>
                                                 <option value="2014">2014</option>
                                        </select> </span></font></td>
                                </tr>
                                <tr>
                                        <td width="156"><b>
                                        <font face="Tahoma" style="font-size: 9pt">Zyklus:</font></b></td>
                                        <td width="261"><font face="Tahoma">
                                        <span style="font-size: 9pt">

                                        <select size="1" name="zyklus" id="zyklus">
                                                 <option value="26">26</option>
                                                 <option value="27">27</option>
                                                 <option selected value="28">28</option>
                                                 <option value="29">29</option>
                                                 <option value="30">30</option>
                                                 <option value="31">31</option>
                                                 <option value="32">32</option>
                                                 <option value="33">33</option>
                                                 <option value="34">34</option>
                                                 <option value="35">35</option>
                                        </select> Tage</span></font></td>
                                </tr>
                                <tr>
                                        <td colspan="2">
                                        <p align="center">
                                        <button type="submit" value="Berechnen" name="Berechnen" style="font-family: Tahoma; font-size: 8pt">
                                        </p>
                                        </td>
                                </tr>
                        </table>
                        </td>
                </tr>
        </table>
</form>
<!-- Ende Eisprung Rechner Code -->

</div>
</body>
</html>

In der funktion Kalender habe ich einen Array der das Datum erstellt.

Wie sage ich ihm

Wenn in meiner Index.htm die beispiel option value "1" ausgewählt habe.
Zeige mir ein hintergrund bild im value 1
So:
funktion datumsWahl(){
if (document.getElementById('tag').value && document.getElementById('monat').value && document.getElementById('jahr').value){
document.write ('background-image: bild.jpg')

}

}

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] jpeg erstellen aus textstring erstellen	Psydl	PHP Tipps 2009	16	07.07.2009 18:54
[Erledigt] foreach schleife beim erstellen einer image_map schlägt fehl	litterauspirna	PHP Tipps 2009	8	25.05.2009 13:04
[Erledigt] Popup mit Kalender variable gestalten	Wortak	JavaScript, Ajax und mehr	0	10.05.2009 12:43
Ich möchte gerne eine Websitedatenbank erstellen oder wie?	curi0u5	PHP Tipps 2009	6	28.01.2009 23:23
Kalender ohne Neuladen der Seite PHP, Javascript, Ajax	Earl3000	JavaScript, Ajax und mehr	16	11.12.2008 22:07
Kalender Script	bbi_marcel	PHP Tipps 2008	4	26.10.2008 14:50
Kalender Problem	pPanther	PHP Tipps 2008	10	12.12.2007 18:32
darf keine Datenbank erstellen in phpMyAdmin		Datenbanken	2	20.10.2005 19:32
Stammbaum erstellen	Riot	PHP Tipps 2005	17	13.05.2005 16:32
[Erledigt] Rollenspiel Kalender		PHP Tipps 2005	4	29.01.2005 18:18
Ordner erstellen und Datei uploaden	Juuro	PHP Tipps 2005	6	20.01.2005 21:18
kalender in background einfügen	Sclot	PHP Tipps 2004	4	06.10.2004 16:04
[Erledigt] kalender in php		PHP Tipps 2004	1	02.08.2004 01:58
Ordner per Skript erstellen --> Rechte Problem		PHP Tipps 2004	2	06.07.2004 14:19
[Erledigt] Navigationsleiste mit Datenbank erstellen		Datenbanken	10	22.06.2004 20:30

28.07.2009, 21:44
minabowie Neuer Benutzer Registriert seit: 28.07.2009 Beiträge: 3 PHP-Kenntnisse: Anfänger	Kalender erstellen Hallo Ich habe etwas im Internet gesehen und ich möchte das gerne nachbauen. Und zwar geht es um einen Kalender: Mit einer Drop Down Liste möchte ich einen Datum auswählen können und wenn ich dieses dann ausgewählt habe soll ein Symbol (meiner Wahl) unten im Kalender an dem gewählten datum angezeigt werden. Wie kann ich das am besten hinbekommen. Ich habe bis jetzt mal eine Auswahlliste erstellt, die alle meine gewünschten Infos enthält und ich habe einen Kalender eingefügt wo bis jetzt nur das Datum von von heute angezeigt wird, aber ich muß die 2 irgendwie miteinander verbinden habe keine Ahnung wie. Kann mit jemand weiterhelfen Vielen Dank Sandy


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

28.07.2009, 23:28
thomasE Erfahrener Benutzer Registriert seit: 03.06.2009 Beiträge: 140 PHP-Kenntnisse: Anfänger	dafür bräuchten wir definitiv mehr infos, einen Code, wenigstens ein Bild, irgendwas halt. so kann ich nur raten. thomas

28.07.2009, 23:36
minabowie Neuer Benutzer Registriert seit: 28.07.2009 Beiträge: 3 PHP-Kenntnisse: Anfänger	Aber nicht lachen, da es sich um einen Eisprung Rechner handelt. Also wo ich es gesehen habe ist hier Und was ich gemacht habe hier Schöne Grüße

28.07.2009, 23:48
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Hihi. Sorry, kleines grins Also, ich habe mal meinen Eisprung willkürlich berechnet () und mir die Tabelle angesehen. Das Prinzip ist an sich recht einfach - (also so würde ich es umsetzen): Die markierten Tage sind ja nach irgendwelchen Formeln berechnet. Für gleiche "Symbole/Typen" könntest Du bspw. die Werte in einem Array sammeln. Für jedes Bildchen würde ich ein CSS-Klassenbezeichner verwenden, den Du bspw. durch Vergleich mit If beim Durchlaufen der Schleife zum Erstellen der Kalendertage gleich ermittelst und dem Kalenderkästchen zuordnest. Über eine CSS Anweisung wie .bluttest {background-image:url(images/bluttest.jpg)} kannst Du dann ein Hintergrundbild setzen. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --