Eventkalender

Moderator: HTML-Laie

Antworten
Benutzeravatar
Hape
Administrator
Beiträge: 334
Registriert: Fr 22. Mai 2020, 00:33

Eventkalender

Beitrag von Hape »

Hier der CSS-Abschnitt:

Code: Alles auswählen

<style type="text/css">
body {
   background-color : powderblue;
   }
div.hol {
   background-color : yellow;
   }
td.outer {
   cellpadding : 1em;
   border : double black;
   }
table.inner {
   background-color : #A9A9A9;
   font-size : 12pt;
   }
</style>
Hier das Script:

Code: Alles auswählen

<script type="text/javascript">

var months = ["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"];

var daycounts = [31,28,31,30,31,30,31,31,30,31,30,31]; //for leap years, remember to set february to 29 days

//var firstdays = [4,0,0,3,5,1,3,6,2,4,0,2]; //1.Tag im Monat(2010);

var firstdays = [2,5,6,2,4,0,2,5,1,3,6,1];//2020

//var firstdays = [3,6,7,3,5,1,3,6,2,4,0,2];





// This is where you put in the appointments. follow pattern [fromday,frommonth,today,tomonth,message]

var apps = [

[11,1,11,1,"Bingo 19:30 Uhr Schützenhaus"],

[20,1,20,1,"Jahreshauptversammlung Siedlergemeinschaft 15:00 Uhr Schützenhaus"],

[23,1,23,1,"Jahreshauptversammlung Schützen 15:00 Uhr Schützenhaus"],

[4,2,4,2,"Jahreshauptversammlung Bürgerverein 19:30 Uhr Schützenhaus"],

[5,2,5,2,"Wintervergnügen Siedlergemeinschaft 15:00 Uhr Schützenhaus"],

[8,2,8,2,"Bingo 19:30 Uhr Schützenhaus"],

[13,2,13,2,"Besen werfen Schützenverein 14:30 Uhr Schützenhaus, Kinderkarneval Bürgerverein 15:00 Uhr Rosenburg"],

[19,2,19,2,"Skat 19:30 Uhr Schützenhaus "],

[20,2,20,2,"Dorfgemeinschaftspokal 09:30 Uhr Schützenhaus"],

[26,2,26,2,"Boßeln gegen Golzwarden 14:00 Uhr Schützenhaus"],

[5,3,5,3,"Beafsteakball 19:30 Uhr Rosenburg"],

[8,3,8,3,"Bingo 19:30 Uhr Schützenhaus"],

[17,3,17,3,"Maibaumsitzung 19:30 Uhr Schützenhaus"],

[27,3,27,3,"Marathonschießen 14:00 Uhr Schützenhaus"],

[9,4,9,4,"Boitwarden räumt auf 09:00 Uhr Schützenhaus"],

[12,4,12,4,"Bingo 19:30 Uhr Schützenhaus"],

[22,4,22,4,"Osterschießen 15:00 Uhr Schützenhaus"],

[28,4,28,4,"Maibaum binden 18:00 Uhr Schützenhaus"],

[30,4,30,4,"Maibaum setzen 18:00 Uhr Schützenhaus"],

[1,5,1,5,"Maibaumplatz aufräumen 09:00 Uhr Maibaumplatz"],

[7,5,7,5,"Schützenfestball 20:00 Uhr Festzelt"],

[8,5,8,5,"Teilnahme am Umzug Schützenverein Boitwarden 14:00 Uhr Festzelt"],

[20,5,20,5,"Maibaumabnahme 18:00 Uhr Maibaumplatz, anschl. gemütliche Feier im Schützenhaus"],

[11,6,13,6,"Jugendschützenfahrt nach Wüstewohlede"],

[26,6,26,6,"Ausflug Dorfgemeinschaft"],

[9,7,16,7,"Jugendzeltlager Siedlergemeinschaft"],

[28,8,28,8,"Vogelschießen 14:00 Uhr Schützenhaus"],

[1,10,1,10,"Staudenmarkt 14:00 Uhr Schützenhaus"],

[2,10,2,10,"LZO-Pokalschießen 10:00 Uhr Schützenhaus"],

[11,10,11,10,"Bingo 19:30 Uhr Schützenhaus"],

[29,10,29,10,"Königsball 19:30 Uhr Schützenhaus"],

[8,11,8,11,"Bingo 19:30 Uhr Schützenhaus"],

[19,11,19,11,"Skat 19:30 Uhr Schützenhaus"],

[3,12,3,12,"Weihnachtsfeier Bürgerverein & Siedlergemeinschaft 15:00 Uhr "],

[11,12,11,12,"Weihnachtsfeier Schützen 15:00 Uhr Schützenhaus"],

[13,12,13,12,"Bingo 19:30 Uhr Schützenhaus"],

[18,12,18,12,"Weihnachtsmarkt Bürgerverein 16:00 - 19:00 Uhr Maibaumplatz"]

];


function CheckDate(month,dayno)

{

   var retval = new String(dayno);

   var m = month + 1;



   for(var app = 0; app < apps.length; app++)

   {

      if(m == apps[app][1] ) //first month

      {

         if(apps[app][3] - apps[app][1] > 0)

         {

            if(dayno >= apps[app][0])

            {

               retval = "<div class='hol' title='" + apps[app][4] + "'>" + dayno + "</div>";

            }

         }

         else

         {

            if(dayno >= apps[app][0] && dayno <= apps[app][2])

            {

               retval = "<div class='hol' title='" + apps[app][4] + "'>" + dayno + "</div>";

            }

         }

      }

      else if(m == apps[app][3]) // second month

      {

         if(dayno <= apps[app][2])

         {

            retval = "<div class='hol' title='" + apps[app][4] + "'>" + dayno + "</div>";

         }

      }

      else if( m > apps[app][1] && m < apps[app][3] )

      {

         retval = "<div class='hol' title='" + apps[app][4] + "'>" + dayno + "</div>";

      }

   }



   return retval;

}



function PrintMonth(month)

{

   var done = false;

   var day = 0;



   document.write("<table class='inner'><caption><b>" + months[month] + "</b></caption><thead>");

   document.write("<th>Mo</th><th>Di</th><th>Mi</th><th>Do</th><th>Fr</th><th>Sa</th><th>So</th></thead>");

   while(!done)

   {

      document.write("<tr>");

      PrintWeek(month,day, firstdays[month], daycounts[month]);

      document.write("</tr>");

      day = day + 7;

      if( day > daycounts[month] + firstdays[month])

      {

         done = true;

      }

   }

   document.write("</tbody></table><p>");

}





function PrintWeek(monthno,start,min,max)

{

   var d;

   var desc;

   for(var j = 0; j < 7; j++)

   {

      document.write("<td>");

      d = start + j;

      if(d >= min && d < max + min)

      {

         desc = CheckDate(monthno,d - min + 1);

         document.write(desc);

      }

      document.write("</td>");

   }

}

</script>     
  
  
  <div align="center">
        <h1>
          <font size="+2">Jahresübersicht:</font>
        </h1>
      </div>
      <div align="center">
        <h2>
          <font size="2">Mit der Maus über ein markiertes Datum gehen,<br>dann wird die entsprechende Veranstaltung angezeigt.</font>
        </h2>
      </div>


      <table id="hpage_table_zsrzyxw" align="center">
        <tbody>
          <tr>

            <td class="outer">

              <script type="text/javascript">
                PrintMonth(0);
              </script>

            </td>

            <td class="outer">

              <script type="text/javascript">
                PrintMonth(1);
              </script>

            </td>

            <td class="outer">

              <script type="text/javascript">
                PrintMonth(2);
              </script>

            </td>

          </tr>

          <tr>

            <td class="outer">

              <script type="text/javascript">
                PrintMonth(3);
              </script>

            </td>

            <td class="outer">

              <script type="text/javascript">
                PrintMonth(4);
              </script>

            </td>

            <td class="outer">

              <script type="text/javascript">
                PrintMonth(5);
              </script>

            </td>

          </tr>

          <tr>

            <td class="outer">

              <script type="text/javascript">
                PrintMonth(6);
              </script>

            </td>

            <td class="outer">

              <script type="text/javascript">
                PrintMonth(7);
              </script>

            </td>

            <td class="outer">

              <script type="text/javascript">
                PrintMonth(8);
              </script>

            </td>

          </tr>

          <tr>

            <td class="outer">

              <script type="text/javascript">
                PrintMonth(9);
              </script>
            </td>

            <td class="outer">

              <script type="text/javascript">
                PrintMonth(10);
              </script>

            </td>

            <td class="outer">

              <script type="text/javascript">
                PrintMonth(11);
              </script>

            </td>
          </tr>
        </tbody>
      </table>
In dem Script müssen noch Anpassungen vorgenommen werden.

Im folgendem Abschnitt muss der Februar bzw.die Anzahl Tage auf 29 geändert werden falls es ein Schaltjahr ist:

Code: Alles auswählen

var daycounts = [31,28,31,30,31,30,31,31,30,31,30,31]; //for leap years, remember to set february to 29 days
Im nächsten Abschnitt muss jeweils der 1. Tag eines Monats angegeben werden. Beispiel: der 1. Januar ist ein Mittwoch. Der Montag wird mit 0 bezeichnet, der Dienstag mit 1, der Mittwoch dann also 2. Der 1. Februar, ein Sonnabend wäre demnach 5. Für die restlichen Monate wird ebenso verfahren.

Code: Alles auswählen

var firstdays = [2,5,6,2,4,0,2,5,1,3,6,1]; //1. Tag im Monat (2020)
Hier dazu eine Demoseite: https://hapes-javascript-demo-page.hpag ... ender.html

Antworten