Termin Countdown

Einen Countdown wie diesen könnt ihr auch auf eurer Website verwenden. Der Countdown funktioniert mit der Mida Integration und der „Veranstaltungen“ Modul in WordPress. Um einen solchen Countdown auf einer Website zu verwenden, müsst ihr, wenn ihr die Seite bearbeitet einen neuen „Individuelles HTML“ Block an der Stelle einfügen, wo ihr den Countdown haben möchtet. In diesen fügt ihr jetzt folgenden Code ein:

Für die Mida:

<!-- Nächste Aktion: -->

<style>
  .kjg-countdown {
    display: flex;
    justify-content: center;
    align-items: baseline;
  }

  @media (max-width: 767px) {
    .kjg-countdown {
      flex-wrap: wrap;
    }
  }

  .kjg-countdown-days,
  .kjg-countdown-hours,
  .kjg-countdown-minutes,
  .kjg-countdown-seconds,
  .kjg-countdown-message {
    text-align: center;
    line-height: 1.5;
    background-color: #51b3bc;
    color: #f1f1f1;
    font-size: 48px;
    padding: 0.4em 1em 0.6em 1em;
    border-radius: 0.2em;
    margin: 0 5px 16px 5px;
  }
  .kjg-countdown-message {
    padding: 0.4em 1em 0.4em 1em;
  }

  .kjg-countdown-number,
  .kjg-countdown-label {
    display: block;
  }

  .kjg-countdown-label {
    font-size: 0.25em;
    letter-spacing: 1px;
  }
</style>

<div class="kjg-countdown-single-out-of-list">
  [vereinonline_termine(,,zukunft,5,)]
  <div class="kjg-countdown-container">
    <h2 class="wp-block-heading">
      <span>Nächste Aktion: </span>
      [vereinonline_if(key_intern_hide_link)]
      <span>[vereinonline:titel]</span>
      [vereinonline_elseif(key_intern_link)]
      <a
        href="[vereinonline:key_intern_link]"
        target="_blank"
        rel="noopener"
        >[vereinonline:titel]</a
      >
      [vereinonline_else]
      <a
        href="[vereinonline:url]?veranstaltung=[vereinonline:id]"
        target="_blank"
        rel="noopener"
        >[vereinonline:titel]</a
      >
      [vereinonline_endif]
    </h2>
    <div
      class="kjg-countdown"
      data-countdown-due-date="[vereinonline:datum] [vereinonline:zeit]"
    >
      <div class="kjg-countdown-days">
        <span class="kjg-countdown-number"></span
        ><span class="kjg-countdown-label">Tage</span>
      </div>
      <div class="kjg-countdown-hours">
        <span class="kjg-countdown-number"></span
        ><span class="kjg-countdown-label">Stunden</span>
      </div>
      <div class="kjg-countdown-minutes">
        <span class="kjg-countdown-number"></span
        ><span class="kjg-countdown-label">Minuten</span>
      </div>
      <div class="kjg-countdown-seconds">
        <span class="kjg-countdown-number"></span
        ><span class="kjg-countdown-label">Sekunden</span>
      </div>
    </div>
  </div>
  [/vereinonline_termine]
</div>

<script>
  // Function to format time units (add leading zero if needed)
  function formatTime(time) {
    return time < 10 ? "0" + time : time;
  }

  function convertDateFormat(dateString) {
    // Use regular expressions to extract date and time components
    const dateRegex = /(\d{1,2})\.(\d{1,2})\.(\d{4})/; // Regex for date
    const timeRegex = /(\d{1,2}):(\d{1,2})/; // Regex for time

    // Search for dates and times separately in the input string
    const dateMatch = dateString.match(dateRegex);
    const timeMatch = dateString.match(timeRegex);

    // Check if valid date and time matches are found
    if (!dateMatch) return null; // No valid date found, return null
    let [, day, month, year] = dateMatch;

    let [, startTimeHours, startTimeMinutes] = timeMatch
      ? timeMatch
      : [null, 0, 0]; // Default time to "00:00" if not found

    // Format date components with leading zeros if necessary
    day = formatTime(parseInt(day));
    month = formatTime(parseInt(month));
    year = formatTime(parseInt(year));

    // Format time components with leading zeros if necessary
    startTimeHours = formatTime(parseInt(startTimeHours));
    startTimeMinutes = formatTime(parseInt(startTimeMinutes));

    // Construct the ISO format date string
    const isoDateString = `${year}-${month}-${day}T${startTimeHours}:${startTimeMinutes}:00`;
    return isoDateString;
  }

  document.addEventListener("DOMContentLoaded", function () {
    const lists = document.querySelectorAll(".kjg-countdown-single-out-of-list");
    lists.forEach(function (l) {
      const containers = l.querySelectorAll(".kjg-countdown-container");

      let nextContainer = null;
      let nextDueDate = null;
      let toRemove = [];
      containers.forEach(function (c) {
        // Get the countdown container element
        const countdown = c.querySelector(".kjg-countdown");

        // Get the countdown due date and seconds
        dueDateString = convertDateFormat(countdown.dataset.countdownDueDate);
        if (!dueDateString) {
          toRemove.push(c);
          return;
        }
        const dueDate = new Date(dueDateString).getTime();

        // Get the current date and time
        const currentDate = new Date().getTime();
        const isInFuture = dueDate > currentDate;
        const isToday =
          new Date(dueDate).toDateString() ===
          new Date(currentDate).toDateString();

        if (!isInFuture && isToday) {
          // Keep the countdown but adjust the text
          countdown.innerHTML =
            '<div class="kjg-countdown-message">Die Aktion findet oder fand heute statt!</div>';
        } else if (isInFuture && (!nextContainer || dueDate < nextDueDate)) {
          // If it's the next action or no next action found yet, update nextContainer and nextDueDate
          nextContainer = c;
          nextDueDate = dueDate;
        } else {
          // Otherwise, add the container to the list of containers to remove
          toRemove.push(c);
        }
      });

      // Remove all containers except the next action
      toRemove.forEach(function (container) {
        container.remove();
      });

      if (!nextContainer) {
        // No next action
        return;
      }

      // Get the countdown elements
      const daysElement = nextContainer.querySelector(
        ".kjg-countdown-days .kjg-countdown-number"
      );
      const hoursElement = nextContainer.querySelector(
        ".kjg-countdown-hours .kjg-countdown-number"
      );
      const minutesElement = nextContainer.querySelector(
        ".kjg-countdown-minutes .kjg-countdown-number"
      );
      const secondsElement = nextContainer.querySelector(
        ".kjg-countdown-seconds .kjg-countdown-number"
      );

      // Update the countdown every second
      const countdownInterval = setInterval(updateCountdown, 1000);

      // Function to update the countdown
      function updateCountdown() {
        // Get the current date and time
        const currentDate = new Date().getTime();

        // Calculate the remaining time
        let timeDifference = nextDueDate - currentDate;

        // If the countdown is over, clear the interval
        if (timeDifference < 0) {
          clearInterval(countdownInterval);
          timeDifference = 0;
          nextContainer.innerHTML =
            '<div class="kjg-countdown-message">Die Aktion findet oder fand heute statt!</div>';
        }

        // Calculate days, hours, minutes, and seconds
        const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
        const hours = Math.floor(
          (timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
        );
        const minutes = Math.floor(
          (timeDifference % (1000 * 60 * 60)) / (1000 * 60)
        );
        const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);

        // Update the countdown elements
        daysElement.textContent = formatTime(days);
        hoursElement.textContent = formatTime(hours);
        minutesElement.textContent = formatTime(minutes);
        secondsElement.textContent = formatTime(seconds);
      }

      // Initial update of the countdown
      updateCountdown();
    });
  });
</script>

Um nur Termine aus einer speziellen Mida Einheit oder Gruppe anzuzeigen, guckt euch gerne Mal diesen Abschnitt an: https://kjg.de/service/homepage/faq-pfarreien/mida-integration/#mandant

Für „Veranstaltungen“ in WordPress:

<!-- Nächste Aktion: -->

<style>
  .kjg-countdown {
    display: flex;
    justify-content: center;
    align-items: baseline;
  }

  @media (max-width: 767px) {
    .kjg-countdown {
      flex-wrap: wrap;
    }
  }

  .kjg-countdown-days,
  .kjg-countdown-hours,
  .kjg-countdown-minutes,
  .kjg-countdown-seconds,
  .kjg-countdown-message {
    text-align: center;
    line-height: 1.5;
    background-color: #51b3bc;
    color: #f1f1f1;
    font-size: 48px;
    padding: 0.4em 1em 0.6em 1em;
    border-radius: 0.2em;
    margin: 0 5px 16px 5px;
  }
  .kjg-countdown-message {
    padding: 0.4em 1em 0.4em 1em;
  }

  .kjg-countdown-number,
  .kjg-countdown-label {
    display: block;
  }

  .kjg-countdown-label {
    font-size: 0.25em;
    letter-spacing: 1px;
  }
</style>

<div class="kjg-countdown-single-out-of-list">
  [events_list limit="5"]
  <div class="kjg-countdown-container">
    <h2 class="wp-block-heading">
      <span>Nächste Aktion: </span>
      #_EVENTLINK
    </h2>
    <div
      class="kjg-countdown"
      data-countdown-due-date="#_EVENTDATES #_EVENTTIMES"
    >
      <div class="kjg-countdown-days">
        <span class="kjg-countdown-number"></span
        ><span class="kjg-countdown-label">Tage</span>
      </div>
      <div class="kjg-countdown-hours">
        <span class="kjg-countdown-number"></span
        ><span class="kjg-countdown-label">Stunden</span>
      </div>
      <div class="kjg-countdown-minutes">
        <span class="kjg-countdown-number"></span
        ><span class="kjg-countdown-label">Minuten</span>
      </div>
      <div class="kjg-countdown-seconds">
        <span class="kjg-countdown-number"></span
        ><span class="kjg-countdown-label">Sekunden</span>
      </div>
    </div>
  </div>
  [/events_list]
</div>

<script>
  // Function to format time units (add leading zero if needed)
  function formatTime(time) {
    return time < 10 ? "0" + time : time;
  }

  function convertDateFormat(dateString) {
    // Use regular expressions to extract date and time components
    const dateRegex = /(\d{1,2})\.(\d{1,2})\.(\d{4})/; // Regex for date
    const timeRegex = /(\d{1,2}):(\d{1,2})/; // Regex for time

    // Search for dates and times separately in the input string
    const dateMatch = dateString.match(dateRegex);
    const timeMatch = dateString.match(timeRegex);

    // Check if valid date and time matches are found
    if (!dateMatch) return null; // No valid date found, return null
    let [, day, month, year] = dateMatch;

    let [, startTimeHours, startTimeMinutes] = timeMatch
      ? timeMatch
      : [null, 0, 0]; // Default time to "00:00" if not found

    // Format date components with leading zeros if necessary
    day = formatTime(parseInt(day));
    month = formatTime(parseInt(month));
    year = formatTime(parseInt(year));

    // Format time components with leading zeros if necessary
    startTimeHours = formatTime(parseInt(startTimeHours));
    startTimeMinutes = formatTime(parseInt(startTimeMinutes));

    // Construct the ISO format date string
    const isoDateString = `${year}-${month}-${day}T${startTimeHours}:${startTimeMinutes}:00`;
    return isoDateString;
  }

  document.addEventListener("DOMContentLoaded", function () {
    const lists = document.querySelectorAll(".kjg-countdown-single-out-of-list");
    lists.forEach(function (l) {
      const containers = l.querySelectorAll(".kjg-countdown-container");

      let nextContainer = null;
      let nextDueDate = null;
      let toRemove = [];
      containers.forEach(function (c) {
        // Get the countdown container element
        const countdown = c.querySelector(".kjg-countdown");

        // Get the countdown due date and seconds
        dueDateString = convertDateFormat(countdown.dataset.countdownDueDate);
        if (!dueDateString) {
          toRemove.push(c);
          return;
        }
        const dueDate = new Date(dueDateString).getTime();

        // Get the current date and time
        const currentDate = new Date().getTime();
        const isInFuture = dueDate > currentDate;
        const isToday =
          new Date(dueDate).toDateString() ===
          new Date(currentDate).toDateString();

        if (!isInFuture && isToday) {
          // Keep the countdown but adjust the text
          countdown.innerHTML =
            '<div class="kjg-countdown-message">Die Aktion findet oder fand heute statt!</div>';
        } else if (isInFuture && (!nextContainer || dueDate < nextDueDate)) {
          // If it's the next action or no next action found yet, update nextContainer and nextDueDate
          nextContainer = c;
          nextDueDate = dueDate;
        } else {
          // Otherwise, add the container to the list of containers to remove
          toRemove.push(c);
        }
      });

      // Remove all containers except the next action
      toRemove.forEach(function (container) {
        container.remove();
      });

      if (!nextContainer) {
        // No next action
        return;
      }

      // Get the countdown elements
      const daysElement = nextContainer.querySelector(
        ".kjg-countdown-days .kjg-countdown-number"
      );
      const hoursElement = nextContainer.querySelector(
        ".kjg-countdown-hours .kjg-countdown-number"
      );
      const minutesElement = nextContainer.querySelector(
        ".kjg-countdown-minutes .kjg-countdown-number"
      );
      const secondsElement = nextContainer.querySelector(
        ".kjg-countdown-seconds .kjg-countdown-number"
      );

      // Update the countdown every second
      const countdownInterval = setInterval(updateCountdown, 1000);

      // Function to update the countdown
      function updateCountdown() {
        // Get the current date and time
        const currentDate = new Date().getTime();

        // Calculate the remaining time
        let timeDifference = nextDueDate - currentDate;

        // If the countdown is over, clear the interval
        if (timeDifference < 0) {
          clearInterval(countdownInterval);
          timeDifference = 0;
          nextContainer.innerHTML =
            '<div class="kjg-countdown-message">Die Aktion findet oder fand heute statt!</div>';
        }

        // Calculate days, hours, minutes, and seconds
        const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
        const hours = Math.floor(
          (timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
        );
        const minutes = Math.floor(
          (timeDifference % (1000 * 60 * 60)) / (1000 * 60)
        );
        const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);

        // Update the countdown elements
        daysElement.textContent = formatTime(days);
        hoursElement.textContent = formatTime(hours);
        minutesElement.textContent = formatTime(minutes);
        secondsElement.textContent = formatTime(seconds);
      }

      // Initial update of the countdown
      updateCountdown();
    });
  });
</script>