html Widget programmieren mit Django Datenbank?

Hallo,

ich habe eine Django Datenbank erstellt, und möchte mein html Widget für meine Webseite damit verwalten. Die Datenbank funktioniert soweit, ich kann Datensätze hinzufügen, bearbeiten und entfernen. Wenn ich den Link in den Browser eingebe wird meine Tabelle im Browser auch mit allen Daten angezeigt und aktualisiert wenn ich in der Datenbank etwas ändere. Bette ich den html code nun aber in meine Webseite ein, wird die Tabelle angezeigt, aber ohne den Inhalten aus der Datenbank. Kann mir bei dem Problem vielleicht jemand helfen.

Vielen Dank schonmal im Voraus.

Das ist der html Code:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Stil für die gesamte Tabelle */
    table {
      border-collapse: collapse;
      width: 65%;
      margin: 20px auto;
      border: 1px solid #ccc;
      position: relative;
    }
    th, td {
      text-align: left;
      padding: 8px;
      border-right: 1px solid #ccc;
    }
    th {
      background-color: #8B0000;
      color: white;
      text-align: left;
    }
    tr:nth-child(even) {
      background-color: #f2f2f2;
    }
    tr:nth-child(odd) {
      background-color: #ffffff;
    }
    td:last-child {
      border-right: none;
    }
    th:nth-child(1), td:nth-child(1),
    th:nth-child(4), td:nth-child(4) {
      width: 100px;
    }
    td:nth-child(2), th:nth-child(2),
    td:nth-child(3), th:nth-child(3) {
      width: 85px;
    }
    h1 {
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Nächste Veranstaltungen</h1>
  <table>
    <tr>
      <th>Titel</th>
      <th>Datum</th>
      <th>Zeitraum</th>
      <th>Örtlichkeit</th>
    </tr>
    <!-- Schleife für die Anzeige der nächsten drei Veranstaltungen -->
    {% for event in upcoming_events %}
    <tr>
      <td>{{ event.Titel }}</td>
      <td>{{ event.Datum|date:"l, j. F Y" }}</td>
      <td>{{ event.Zeitraum }}</td>
      <td>{{ event.Örtlichkeit }}</td>
    </tr>
    {% endfor %}
  </table>
</body>
</html>

Bild zum Beitrag
HTML, Webseite, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung
Html und JavaScript Code?

Hallo zusammen,

ich möchte für eine Webseite ein Widget erstellen, das die nächsten Veranstaltungen anzeigen soll. Diese werden in dem Code dann hinzugefügt. Auf dem Widget welches auf der Webseite angezeigt wird dürfen aber immer nur zwei Veranstaltungen gleichzeitig dargestellt werden. Das Datum der Veranstaltungen soll immer mit dem aktuellen Datum verglichen werden. Ist das Datum der ganz oben also an erster Stelle stehenden Veranstaltung seit einem Tag überschritten soll diese gesamte Veranstaltung ausgeblendet werden. Die darunter stehende also an zweiter Stelle befindliche Veranstaltung rückt dann an erste Stelle und an Zweite Stelle rückt dann eine bisher noch nicht angezeigt Veranstaltung. Immer so das halt nur zwei Veranstaltungen gleichzeitig angezeigt werden. Das Datum vergleichen und ein/ausblenden und neu ordnen der Veranstaltungen funktioniert bei meinem Code noch nicht so ganz. Kann mir dabei bitte jemand helfen. Wenn das möglich ist am besten den Code so anpassen damit diese Funktionen so funktionieren.

Mit freundlichen Grüßen

Tim

Hier ist mein aktueller Code davon:

<!DOCTYPE html>

<html>

<head>

  <style>

    /* Stil für das Widget */

    .event-widget {

      border: 1px solid #ccc;

      padding: 6px;

      max-width: 215px; /* Breiteres Widget */

      background-color: #f7f7f7;

    }

    /* Stil für die Hellschwarze Hauptüberschrift */

    .event-widget h3 {

      color: #454545; /* Hellschwarz */

      font-size: 18px; /* Kleinere Schriftgröße für die Hauptüberschrift */

      text-align: center; /* Zentriert den Text */

      margin: 0; /* Entfernt den oberen und unteren Abstand der Überschrift */

    }

    /* Stil für die einzelnen Veranstaltungen */

    .event-widget ul li {

      margin-bottom: 10px; /* Fügt einen Abstand zwischen den Veranstaltungen hinzu */

      padding-bottom: 5px; /* Fügt zusätzlichen Abstand zwischen dem Trennungsstrich und dem Text hinzu */

    }

    /* Fügt einen Trennungsstrich zwischen den Veranstaltungen hinzu */

    .event-item + .event-item {

      border-top: 1px solid #ccc;

      margin-top: 10px;

      padding-top: 5px;

    }

    /* Stil für die übrigen Texte */

    .event-title {

      color: #8B0000; /* Weinrot */

      font-size: 15px; /* Kleinere Schriftgröße für den übrigen Text */

    }

    /* Stil für die Uhrzeit */

    .event-time {

      font-weight: bold;

      font-size: 12px; /* Kleinere Schriftgröße */

    }

  </style>

</head>

<body>

  <div class="event-widget">

    <h3>Nächste Veranstaltungen</h3>

    <ul id="event-list">

      <!-- Hier kannst du Veranstaltungen hinzufügen -->

      <li class="event-item">

        <strong class="event-title">Seniorentreff mit Kaffee und Kuchen:</strong>

        <br>

        Datum: 2023-11-09

        <br>

        Zeit: 14:30 - 16:00 Uhr

        <br>

        Ort: Feuerwehrhaus

      </li>

      <li class="event-item">

        <strong class="event-title">Volkstrauertag:</strong>

        <br>

        Datum: 2023-11-19

        <br>

        Zeit: 15:00 - 16:00 Uhr

        <br>

        Ort: Am Ehrenmal Ahrenshöft

      </li>

      <li class="event-item">

        <strong class="event-title">Seniorentreff mit Kaffee und Kuchen:</strong>

        <br>

        Datum: 2023-12-14

        <br>

        Zeit: 14:30 - 16:00 Uhr

        <br>

        Ort: Feuerwehrhaus

      </li>

      <!-- Weitere Veranstaltungen hier hinzufügen -->

    </ul>

  </div>

  <script>

    function updateEvents() {

      const eventList = document.getElementById("event-list");

      const events = eventList.getElementsByClassName("event-item");

      const currentDate = new Date();

      const displayedEvents = 2;

      for (let i = 0; i < events.length; i++) {

        const eventDateString = events[i].querySelector("br:nth-child(2)").textContent.replace("Datum: ", "");

        const eventDate = new Date(eventDateString);

        // Überprüfe, ob das Datum um einen Tag überschritten ist

        if (eventDate < currentDate) {

          events[i].style.display = "none"; // Verstecke vergangene Veranstaltungen

        } else {

          events[i].style.display = "block"; // Zeige zukünftige Veranstaltungen

        }

        // Überprüfe, ob die maximale Anzahl von angezeigten Veranstaltungen erreicht ist

        if (i >= displayedEvents) {

          events[i].style.display = "none";

        }

      }

    }

    // Aktualisiere die Veranstaltungen beim Laden der Seite

    document.addEventListener("DOMContentLoaded", updateEvents);

  </script>

</body>

</html>

HTML, Webseite, JavaScript, Code, Programmiersprache, Webentwicklung