Der neue Monatsrückblick für Mai und Juni 2026 ist online!

[Ro75]

@Nashra sagte:

Die Hintergrundfarbe für "In Memory", wo finde ich die?

Wenn das jetzt keine separater Kalender ist, dann:

function renderEventC1(norm) {
    if (isInMemoryEvent(norm)) {
        norm.calColor = "#808080";
        norm.event   += " 🕯️";
    }

Wenn eigenständiger Kalender: dann auch in der Kalender-Konfig

        color: "#a71b1b", // Standardfarbe des Kalenders - großer Kalender (materialdesign - Scrounger)
        img: BASE_URL + "Mama.png" // Icon für Darstellung - kleiner Kalender
    },

schauen.

Ro75.

[sigi234]

@Ro75
Habe jetzt nicht alles gelesen, was ist der Fehler?

[Ro75]

Die Google Kalender hatten ein Problem. Bei @nashra hat die Neuanlage geholfen.

Ro75.

[Nashra]

@sigi234 sagte:

@Ro75
Habe jetzt nicht alles gelesen, was ist der Fehler?

Google ist der Fehler.
Geh mal hin und lösche einen Eintrag in dem Kalender der nicht angezeigt wird,
dann legst du den Eintrag neu an und schon taucht er im Kalender auf bzw. wird angezeigt.

[Eduard77]

Ich konnte jetzt mit hilfe von KI für Vis2 Vis-jsontemplate 2 Widget erstellen.

Für kleinen Kalender:

Code Vorlage:

<style>
  .mini-calendar-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: Arial, sans-serif;
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
  }

  .mini-calendar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    color: #ffffff;
  }

  .mini-calendar-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
  }

  .mini-calendar-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  .mini-calendar-time {
    font-size: 0.8em;
    opacity: 0.85;
    font-weight: bold;
    color: #dddddd;
  }

  .mini-calendar-event {
    font-size: 0.95em;
    font-weight: 600;
  }

  .mini-calendar-ort {
    font-size: 0.8em;
    opacity: 0.7;
    font-style: italic;
  }
</style>

<div class="mini-calendar-container">
  <% 
    var items = [];
    var rawData = (typeof data !== 'undefined' && data) ? data : ((typeof dp1 !== 'undefined' && dp1) ? dp1 : ((typeof val !== 'undefined' && val) ? val : null));

    try {
      if (typeof rawData === 'string') {
        items = JSON.parse(rawData);
      } else if (Array.isArray(rawData)) {
        items = rawData;
      }
    } catch(e) {
      items = [];
    }

    if (Array.isArray(items) && items.length > 0) {
      for (var i = 0; i < items.length; i++) { 
        var item = items[i];
        if (!item) continue;

        var imgUrl = item.img || '';
        var zeit = item.zeit || '';
        var ereignis = item.ereignis || '';
        var ort = item.ort || '';
  %>
    <div class="mini-calendar-item">
      <% if (imgUrl) { %>
        <img class="mini-calendar-img" src="<%= imgUrl %>" alt="User">
      <% } %>

      <div class="mini-calendar-content">
        <div class="mini-calendar-time"><%= zeit %></div>
        <div class="mini-calendar-event"><%= ereignis %></div>
        <% if (ort) { %>
          <div class="mini-calendar-ort">📍 <%= ort %></div>
        <% } %>
      </div>
    </div>
  <% 
      } 
    } else { 
  %>
    <div style="color: white; opacity: 0.7; padding: 5px; font-size: 0.9em;">Keine Einträge vorhanden</div>
  <% } %>
</div>

Und grossen Kalender:

Code Vorlage:

<style>
  .calendar-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: Arial, sans-serif;
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
  }
  .calendar-item {
    padding: 8px 12px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }
  .calendar-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.85em;
    opacity: 0.9;
    margin-bottom: 4px;
    font-weight: bold;
  }
  .calendar-title {
    font-size: 1em;
    font-weight: 600;
    line-height: 1.3;
  }
  .calendar-details {
    margin-top: 6px;
    font-size: 0.85em;
  }
  .calendar-details summary {
    cursor: pointer;
    opacity: 0.8;
  }
  .calendar-details pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: inherit;
    margin: 6px 0 0 0;
    padding: 6px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
  }
</style>

<div class="calendar-container">
  <% 
    var items = [];
    var rawData = (typeof data !== 'undefined' && data) ? data : ((typeof dp1 !== 'undefined' && dp1) ? dp1 : ((typeof val !== 'undefined' && val) ? val : null));

    try {
      if (typeof rawData === 'string') {
        items = JSON.parse(rawData);
      } else if (Array.isArray(rawData)) {
        items = rawData;
      }
    } catch(e) {
      items = [];
    }

    function formatDate(dateStr) {
      if (!dateStr || dateStr.length < 10) return dateStr;
      var parts = dateStr.substring(0, 10).split('-');
      return parts.length === 3 ? parts[2] + '.' + parts[1] + '.' + parts[0] : dateStr;
    }

    if (Array.isArray(items) && items.length > 0) {
      for (var i = 0; i < items.length; i++) { 
        var item = items[i];
        if (!item) continue;

        var rawName = item.name || '';
        var title = rawName;
        var details = '';

        // Trennung nach "Hallo" (auch ohne Leerzeichen davor)
        var halloIndex = rawName.search(/hallo/i);
        if (halloIndex > 0) {
          title = rawName.substring(0, halloIndex).trim();
          details = rawName.substring(halloIndex).trim();
        } else if (rawName.indexOf('\n') !== -1) {
          var nameLines = rawName.split('\n');
          title = nameLines[0].trim();
          details = nameLines.slice(1).join('\n').trim();
        }

        var startStr = item.start || '';
        var endStr = item.end || '';
        var isFullDay = startStr.length === 10;
        var startDateFormatted = formatDate(startStr);
        var startTime = isFullDay ? '' : startStr.substring(11, 16);
        var endTime = isFullDay ? '' : (endStr ? endStr.substring(11, 16) : '');
        var bgColor = item.color || 'rgba(100,100,100,0.3)';
        var textColor = item.colorText || '#ffffff';
  %>
    <div class="calendar-item" style="background-color: <%= bgColor %>; color: <%= textColor %>; border-left: 4px solid <%= textColor %>;">
      <div class="calendar-header">
        <span class="calendar-date"><%= startDateFormatted %></span>
        <% if (!isFullDay && startTime) { %>
          <span class="calendar-time"><%= startTime %> - <%= endTime %> Uhr</span>
        <% } else { %>
          <span class="calendar-time-fullday">Ganztägig</span>
        <% } %>
      </div>

      <div class="calendar-title"><%= title %></div>

      <% if (details) { %>
        <details class="calendar-details">
          <summary>Details anzeigen</summary>
          <pre><%= details %></pre>
        </details>
      <% } %>
    </div>
  <% 
      } 
    } 
  %>
</div>

@ro75 Danke nochmal für das Skript.

[OliverIO]

@Eduard77

Teilen?

[Eduard77]

@OliverIO
Ich habe oben ergänzt.
Könntest du bitte es nochmal überfliegen ob alles Okay ist?

[OliverIO]

@Eduard77

Sieht gut aus.
Was hat es mit dem Hallo im grossen Kalender auf sich?
Welches prompt für die ki hast du eingegeben?
Welche Informationen hast du mitgegeben.
Wollte da mal für die Dokumentation mal noch was ergänzen.

[Eduard77]

@OliverIO
Was für Hallo, keine Ahnung, vielleicht weil man zb. bei ATU Termin noch Details anzeigen kann?

Ich habe Gemini benutzt und ihr dann erklärt, dass ich möchte für dein Widget in VIS2 eine Vorlage haben. Und habe links zur deiner GitHub Seite und von Skript erstellte Json DP gegeben.
Dann ein paar mal die Code von Gemini probiert und weitere änderungen von ihr gebeten, bis ich mit den Ergäbnis zufrieden war.

[OliverIO]

@Eduard77

Wenn im Namen hallo auftaucht formatiert er den Eintrag etwas anders.

[Eduard77]

@OliverIO
Das ist der Termin ATU wo man Details anzeigen kann.
Ist wahrscheinlich nicht optimal gelöst, wiel nicht jeder Hallo schreibt.

[Rudi-Ment]

Hallo.
Ich teste gerade ebenfalls das Skript und bin soweit auch sehr zufrieden.
Aber: die Termine über mehrere Tage werden gar nicht über mehrere Tage angezeigt.