Stefan Fuchs: Kalender

Hallo,

hab mal für mich den Kalender, der in der SelfHTML-Dokumentation steht, modifiziert. Dabei hab ich einen Button für Monat vor und zurück eingebunden. Wenn ich nun auf zurück klicke, dann stellt der auch den letzten Monat einwandfrei dar, auch beim vor. Das Problem aber ist, das er das ganze immer in ein neues Fenster lädt. Hier mal der Quelltext der Form, wo die Buttons drin liegen, denn nur dort muss noch irgend etwas verändert werden.

Den Quelltext und Kalender siehe URL oben.

Ich hoffe, mir kann hier jemand helfen.

Mit freundlichen Grüßen Stefan Fuchs

  1. Hallo,

    hab mal für mich den Kalender, der in der SelfHTML-Dokumentation steht, modifiziert. Dabei hab ich einen Button für Monat vor und zurück eingebunden. Wenn ich nun auf zurück klicke, dann stellt der auch den letzten Monat einwandfrei dar, auch beim vor. Das Problem aber ist, das er das ganze immer in ein neues Fenster lädt.

    Verständlich, denn das Script bildet den Kalender mit document.write(). Diese Methode "schreibt" beim laden einer seite den Quellcode vor, so kann der Browser die Seite beim interpretieren des Quellcodes erstellen. Man kann mit document.write() nicht eine bestehende seite verändern, der _gesamte_ quellcode wird immer neu geschrieben.
    Dieses script ist nicht ohne besseres JS wissen für dein Vorhaben zu modifizieren, wobei eine Modifikation umständlicher wäre, als ein neues script zu schreiben.

    Wenn du JS lernen möchtest, kannst du dich dran ja versuchen. Ansonsten könnte ich für dich was zusammenbasteln.

    Grüße aus Düsseldorf,

    Aleksej

    1. Es wäre nett, wenn du mir einen Kalender zusammen basteln kannst, in dem man einzelne Monate bzw. zurück springen kann, der das aktuelle Datum hervorhebt.

      Etwas, was ich gerne noch hätte, wenns nich zu viel Ausfwand macht, wäre das Hervorheben von wichtigen Ereignissen.

      Mit freundlichen Grüßen Surkouf

      1. Hallo,

        Es wäre nett, wenn du mir einen Kalender zusammen basteln kannst, in dem man einzelne Monate bzw. zurück springen kann, der das aktuelle Datum hervorhebt.

        Klar, hier ist das Script:

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
        <html>
        <body onLoad="">
        <div style="border:#AAAAAA 2px solid; background-color:white; width:308px; height:350px;">
        <!-- gesamter kalender -->
        <div style="width:304px; border:#AAAAAA 2px solid; height:40px; text-align:center;" id="titel"></div>
        <!-- Monat und Jahr -->
        <script type="text/JavaScript">
         var tagarray = new Array('Mo','Di','Mi','Do','Fr','Sa','So');
         var monatarray = new Array('Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember');
         var besonders = new Array();
           besonders[0] = new Array(10,11,2002);
           besonders[1] = new Array(23,5,2002);
           besonders[2] = new Array(16,3,2003);
        ///////// ^^ besondere ereignisse eintragen: tag,monat,jahr
         var hinter1 = 'white' // hintergrundfarbe der fälder
         var hinter2 = 'blue'  // hintergrundfarbe für heute
         var hinter3 = 'yellow'// hintergrundfarbe für besonderes
         mache_grundgeruest();

        function mache_grundgeruest() {
          for(i=0;i!=7;i++) {
           document.write('<div style="width:40px; float:left; border:#AAAAAA 2px solid; height:40px;">'+tagarray[i]+'</div>');
        ////////// tage
          }
          for(i=1;i!=(7*6+1);i++) {
           if(i/7==Math.round(i/7)) {
            document.write('<div style="width:40px; float:left; border:#AAAAAA 2px solid; height:40px; color:red; background-color:'+hinter1+';" id="wochentag'+i+'"></div>');
        ///////// sonntage
           } else {
            document.write('<div style="width:40px; float:left; border:#AAAAAA 2px solid; height:40px; background-color:'+hinter1+';" id="wochentag'+i+'"></div>');
        //////// wochentage
           }
          }
         }

        var now = new Date();
         var jahr = now.getFullYear();
         var jahr1 = now.getFullYear();
         var monat = now.getMonth();
         var monat1 = now.getMonth();
         var datum = now.getDate();

        eintrag_machen(jahr,monat);
         var aktuell;

        function eintrag_machen(j,m) {
          var mydate = new Date(j,m,1);
          var myday = mydate.getDay();
          if (myday==0) myday=7
          document.getElementById('titel').innerHTML = j+' &nbsp '+monatarray[monat];
          var lord = 31;
          if (m==1) lord-2;
          if (m==0||m==2||m==4||m==6||m==7||m==9||m==11) lord++;
           for(i=1;i!=7*6+1;i++) document.getElementById('wochentag'+i).innerHTML = '';
           for(i=1;i!=7*6+1;i++) document.getElementById('wochentag'+i).style.backgroundColor = hinter1
           for(i=1;i!=lord;i++) document.getElementById('wochentag'+(myday+i-1)).innerHTML = i;
          if(monat==monat1&&jahr==jahr1) {
           aktuell=myday+datum-1;
           document.getElementById('wochentag'+aktuell).style.backgroundColor = hinter2;
          }
          for(i=0;i!=besonders.length;i++) {
           if(besonders[i][2]==jahr&&besonders[i][1]==monat+1) {
           document.getElementById('wochentag'+(myday-1+besonders[i][0])).style.backgroundColor = hinter3;
           }
          }
         }

        function zuruck() {
          if(monat==0) {
           monat = 11;
           jahr--;
          } else monat--;
          document.getElementById('wochentag'+aktuell).style.backgroundColor = hinter1;
          eintrag_machen(jahr,monat);
         }

        function vor() {
          if(monat==11) {
           monat = 0;
           jahr++;
          } else monat++;
          document.getElementById('wochentag'+aktuell).style.backgroundColor = hinter1;
          eintrag_machen(jahr,monat);
         }

        </script>
        </div>
        <button onClick="zuruck()">&lt&lt zurück</button> &nbsp
        <button onClick="vor()">vor &gt&gt</button>
        </body>
        </html>

        Das Design musst du selber anpassen, ich hab dir komentare mit hinweisen auf die formatierung hinterlassen.

        Etwas, was ich gerne noch hätte, wenns nich zu viel Ausfwand macht, wäre das Hervorheben von wichtigen Ereignissen.

        Das geht, das eintragen ist etwas umständlich, aber funktioniert.

        Grüße aus Düsseldorf,

        Aleksej

        1. Hallo,

          Es wäre nett, wenn du mir einen Kalender zusammen basteln kannst, in dem man einzelne Monate bzw. zurück springen kann, der das aktuelle Datum hervorhebt.
          Klar, hier ist das Script:

          Aleksej

          Das war aber schnell. (Hast du wohl schon länger in der Hinterhand gehabt.)

          Das is besser: http://home.arcor.de/pil/cal.html

          CU

        2. Hallo,

          Es wäre nett, wenn du mir einen Kalender zusammen basteln kannst, in dem man einzelne Monate bzw. zurück springen kann, der das aktuelle Datum hervorhebt.
          Klar, hier ist das Script:

          Der Februar hat jeweils 30 Tage. Man kann die Anzahl der Tage eines Monats direkt ueber das Datumsobjekt ermitteln. Die folgende Funktion uebernimmt die numerischen Parameter Monat und Jahr und liefert die Tagesanzahl zurueck:

          function TageImMonat(m,j)
          {
            /* by TM, Internet Professionell 11/2002 */

          var t=31;
            t=(new Date(j,m-1,t).getDate()==t)?t:30;
            t=(new Date(j,m-1,t).getDate()==t)?t:29;
            t=(new Date(j,m-1,t).getDate()==t)?t:28;
            return t;
          }

          TageImMonat(2,2003) liefert 28
          TageImMonat(2,2003) liefert 29

          MfG, Thomas

          1. Hallo,

            Der Februar hat jeweils 30 Tage. Man kann die Anzahl der Tage eines Monats direkt ueber das Datumsobjekt ermitteln. Die folgende Funktion uebernimmt die numerischen Parameter Monat und Jahr und liefert die Tagesanzahl zurueck:

            [...]
            Ok, hab's jetzt eingebunden, hab das mit dem Februar vergessen gehabt. Hab auch ein Sprungfenster reingebracht, obwohl es mehr oder weniger uninteressant ist, dass der 3000.01.01 ein Mittwoch sein wird.

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
            <html>
            <body onLoad="">
            <div style="border:#AAAAAA 2px solid; background-color:white; width:308px; height:350px;">
            <!-- gesamter kalender -->
            <div style="width:304px; border:#AAAAAA 2px solid; height:40px; text-align:center;" id="titel"></div>
            <!-- Monat und Jahr -->
            <script type="text/JavaScript">
             var tagarray = new Array('Mo','Di','Mi','Do','Fr','Sa','So');
             var monatarray = new Array('Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember');
             var besonders = new Array();
               besonders[0] = new Array(10,11,2002);
               besonders[1] = new Array(23,5,2002);
               besonders[2] = new Array(16,3,2003);
            ///////// ^^ besondere ereignisse eintragen: tag,monat,jahr
             var hinter1 = 'white' // hintergrundfarbe der fälder
             var hinter2 = 'blue'  // hintergrundfarbe für heute
             var hinter3 = 'yellow'// hintergrundfarbe für besonderes
             mache_grundgeruest();

            function mache_grundgeruest() {
              for(i=0;i!=7;i++) {
               document.write('<div style="width:40px; float:left; border:#AAAAAA 2px solid; height:40px;">'+tagarray[i]+'</div>');
            ////////// tage
              }
              for(i=1;i!=(7*6+1);i++) {
               if(i/7==Math.round(i/7)) {
                document.write('<div style="width:40px; float:left; border:#AAAAAA 2px solid; height:40px; color:red; background-color:'+hinter1+';" id="wochentag'+i+'"></div>');
            ///////// sonntage
               } else {
                document.write('<div style="width:40px; float:left; border:#AAAAAA 2px solid; height:40px; background-color:'+hinter1+';" id="wochentag'+i+'"></div>');
            //////// wochentage
               }
              }
             }

            var now = new Date();
             var jahr = now.getFullYear();
             var jahr1 = now.getFullYear();
             var monat = now.getMonth();
             var monat1 = now.getMonth();
             var datum = now.getDate();

            eintrag_machen(jahr,monat);
             var aktuell;

            function eintrag_machen(j,m) {
              var mydate = new Date(j,m,1);
              var myday = mydate.getDay();
              if (myday==0) myday=7;
              document.getElementById('titel').innerHTML = j+' &nbsp '+monatarray[monat];
              var lord = TageImMonat(monat,jahr)+1;
               for(i=1;i!=7*6+1;i++) document.getElementById('wochentag'+i).innerHTML = '';
               for(i=1;i!=7*6+1;i++) document.getElementById('wochentag'+i).style.backgroundColor = hinter1
               for(i=1;i!=lord;i++) document.getElementById('wochentag'+(myday+i-1)).innerHTML = i;
              if(monat==monat1&&jahr==jahr1) {
               aktuell=myday+datum-1;
               document.getElementById('wochentag'+aktuell).style.backgroundColor = hinter2;
              }
              for(i=0;i!=besonders.length;i++) {
               if(besonders[i][2]==jahr&&besonders[i][1]==monat+1) {
               document.getElementById('wochentag'+(myday-1+besonders[i][0])).style.backgroundColor = hinter3;
               }
              }
             }

            function zuruck() {
              if(monat==0) {
               monat = 11;
               jahr--;
              } else monat--;
              document.getElementById('wochentag'+aktuell).style.backgroundColor = hinter1;
              eintrag_machen(jahr,monat);
             }

            function vor() {
              if(monat==11) {
               monat = 0;
               jahr++;
              } else monat++;
              document.getElementById('wochentag'+aktuell).style.backgroundColor = hinter1;
              eintrag_machen(jahr,monat);
             }
             function jump_to() {

            jahr = document.form.jahre.value;
             parseInt(jahr);
             eintrag_machen(jahr,monat);
             }
             function TageImMonat(m,j) {
              /* by TM, Internet Professionell 11/2002 */
              var t=31;
              t=(new Date(j,m,t).getDate()==t)?t:30;
              t=(new Date(j,m,t).getDate()==t)?t:29;
              t=(new Date(j,m,t).getDate()==t)?t:28;
              return t;
             }

            </script>
            </div>
            <button onClick="zuruck()">&lt&lt zurück</button> &nbsp
            <button onClick="vor()">vor &gt&gt</button>
            <form name="form">
            <input type="text" name="jahre"><button onClick="jump_to()">zu Jahr springen</button>
            </form>
            </body>
            </html>

            Grüße aus Düsseldorf,

            Aleksej