Adventskalender

von
Werner-Zenk.de

Adventskalender von
Werner-Zenk.de
Mit einigen Sprüchen zur Adventszeit
Hier noch als Beispiel in einem Modal als Popup-Fenster

Dieser Kalender wird zur Demo hier ganzjährig dargesetellt
und zeigt die jeweilige Anzahl der Monatstage mit Adventssprüchen.

Wähle das heutige Tagesdatum.
Heute ist der 14.12.2018

Ich wünsche allen eine schöne Weihnachtszeit

Unten findet Ihr das Skript vom Adventskalender

Zum Skript


Bitte stellt die Seite mit dem Einbau der Skripte von .html auf .php in den Seiteneinstellungen um.

Dieses PHP-Skript könnt Ihr mit Euren Sprüchen versehen und es gehört dann in die:

> Seiteneinstellungen > "Before <!DOCTYPE>"

<?php
    // Adventkalender
    // Peter Ortner / Werner Zenk
    // Monat
    // Zum testen auf den aktuellen Monat stellen
    $monat = 12;
    // Sprüche zu Weihnachten
    $spruch[1] = 'Spruch 1 ...';
    $spruch[2] = 'Spruch 2 ...';
    $spruch[3] = 'Spruch 3 ...';
    $spruch[4] = 'Spruch 4 ...';
    $spruch[5] = 'Spruch 5 ...';
    $spruch[6] = 'Spruch 6 ...';
    $spruch[7] = 'Spruch 7 ...';
    $spruch[8] = 'Spruch 8 ...';
    $spruch[9] = 'Spruch 9 ...';
    $spruch[10] = 'Spruch 10 ...';
    $spruch[11] = 'Spruch 11 ...';
    $spruch[12] = 'Spruch 12 ...';
    $spruch[13] = 'Spruch 13 ...';
    $spruch[14] = 'Spruch 14 ...';
    $spruch[15] = 'Spruch 15 ...';
    $spruch[16] = 'Spruch 16 ...';
    $spruch[17] = 'Spruch 17 ...';
    $spruch[18] = 'Spruch 18 ...';
    $spruch[19] = 'Spruch 19 ...';
    $spruch[20] = 'Spruch 20 ...';
    $spruch[21] = 'Spruch 21 ...';
    $spruch[22] = 'Spruch 22 ...';
    $spruch[23] = 'Spruch 23 ...';
    $spruch[24] = 'Spruch 24 ...';
    // Farben
    $tag_nein = 'bg-rot';
    $tag_ja = 'bg-gruen';
?>

Dieses JavaScript steht hier in die Seiteneinstellungen > "Inside <head> code", um nach dem Klick den Block mit dem Einbau aufzurufen. Dieser Block hat in meinem Fall die id="article6-3g" und mein Seitenname ist Adventskalender.php. Bitte passt das an.

<script> 
      function myPage(tag) {
      window.location.href = 'Adventskalender.php?tuerchen=' + tag + '#article6-3g';
      }
</script>

Das PHP-Skript für die Ausgabe, indem die Seite über die JavaScript-Funktion "myPage" (oben) aufgerufen wird. Dieses Skript habe ich hier in einen einfachen Textblock, anstelle des Beispieltextes, kopiert. Hier ohne das zufällige Blinken der Zahlen.

<section class="content">
    <?php
        $tage = range(1, 24);
        shuffle($tage);
        $weihnachtsTag = false;
        foreach ($tage as $tag) {
         echo ' <a href="javascript:myPage(\'' . sprintf("%02d", $tag) . '\')" class="'; 
         if (isset($_GET['tuerchen']) &&
          ($_GET['tuerchen'] . '.' . sprintf("%02d", $monat) . '.' . date('Y')) == date("d.m.Y") &&
           $_GET['tuerchen'] == $tag) {
          echo $tag_ja;
          $weihnachtsTag = true;
         }
         else {
          echo $tag_nein;
         }
         echo '">' . sprintf("%02d", $tag) . ' </a>';
        }
        if (isset($_GET['tuerchen'])) {
         if ($weihnachtsTag) {
          echo '<div class="ausgabe"><b>Heute ist der ' . (date('d') . '.' . sprintf("%02d", $monat) . '.' . date('Y')) .
          '</b><br>&bdquo;' . $spruch[floor($_GET['tuerchen'])] . '&rdquo;</div>';
         }
         else {
          echo '<div class="ausgabe">Du hast den falschen Tag gewählt, da heute nicht der ' . ($_GET['tuerchen'] . '.' . sprintf("%02d", $monat) . '.' . date('Y')) . ' ist.</div>';
         }
        }
    ?>
</section>

... und noch ein wenig CSS, die in den "Code Editor" in den Bereich "CSS Editor" gehört:

.content {
  display: block;
  text-align: center;
  background: #149dcc;
  width: 80%;
  margin: 50px auto 0 auto;
  padding: 50px;
  border-radius: 30px;
  border: 1px solid white;
}
.ausgabe {
  margin-top: 50px;
}
.footer {
  text-align: center;
  margin-top: 50px;
}
a {
  text-decoration: none;
}
.bg-rot {
  background: #800;
  color: #fff;
  margin: 2px;
  padding: 15px 25px;
  line-height: 60px;
  text-align: right;
}
.bg-rot:hover {
 box-shadow: inset 0px 0px 15px rgba(255, 6, 6,0.9);
}
.bg-gruen {
  background: #690;
  border: 1px solid white;
  color: #fff;
  margin: 2px;
  padding: 15px 25px;
  line-height: 60px;
}
@media (max-width: 767px) {
  .content {
    width: 100%;
  }
}



Das Spript für den Schneefall ist von go4u.de und Ihr könnt es hier mit der rechten Maustaste downloaden (Link/Ziel speichern unter).

Ich habe dieses Script hier "snowflakes.js" genannt und in ein Verzeichnis "winter" kopiert und in den Seiteneinstellungen "End of <body> code:" darauf verlinkt:

<script type="text/javascript" src="winter/snowflakes.js"></script>


Ein alternatives Script mit einem Feuerwerk ist auch von go4u.de und Ihr könnt es auch hier mit der rechten Maustaste downloaden. Eingebunden wird das ebenso, nur dann eben auf das Script "fireworks.js" verlinken:

<script type="text/javascript" src="winter/fireworks.js"></script>


Der Aufruf findet in beiden Fällen automatisch statt.

Bitte beachtet, dass die Skripte zum Schneefall und Feuerwerk nur für den privaten Gebrauch kostenfrei sind. Für den gewerblichen Gebrauch muss eine geringe Lizenzgebühr entrichtet werden, wendet Euch dafür an den Autor von go4u.de.