Google Kalender (ICS) für Material Design & Mini-Kalender
-
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
Ich habe oben ergänzt.
Könntest du bitte es nochmal überfliegen ob alles Okay ist?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. -
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.@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
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. -
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.Das betrifft Termine, die ganztags angelegt sind.
Wenn ich einen Termin von Samstag 08:00 Uhr bis Sonntag 16:00 Uhr anlege, wird dies auch über beide Tage angezeigt. -
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.Das betrifft Termine, die ganztags angelegt sind.
Wenn ich einen Termin von Samstag 08:00 Uhr bis Sonntag 16:00 Uhr anlege, wird dies auch über beide Tage angezeigt.@Rudi-Ment ich schaue mir das an.
Ro75.
EDIT: Habe das Problem isoliert.
Somit sollte das dann passen. Das Script werde ich dann im Laufe des Tages aktualisieren. Melde mich wieder.
-
Super.
Dann teste ich das nachher mal.Ich habe festgestellt das die Geburtstage aus meinen Kalender nicht übernommen werden, wenn diese als Serie angelegt sind.
Ich habe festgestellt das die Geburtstage aus meinen Kalender nicht übernommen werden, wenn diese als Serie angelegt sind.
Wie sind diese denn konkret angelegt? Also hier und uch bei anderen Usern laufen die. Lese mal ein paar Posts weiter oben. Nashra hat dazu auch was geschrieben. Offensichtlich hat Google Probleme mit "alten" Einträgen.
Siehe Post #35 +-
Ro75.
Hey! Du scheinst an dieser Unterhaltung interessiert zu sein, hast aber noch kein Konto.
Hast du es satt, bei jedem Besuch durch die gleichen Beiträge zu scrollen? Wenn du dich für ein Konto anmeldest, kommst du immer genau dorthin zurück, wo du zuvor warst, und kannst dich über neue Antworten benachrichtigen lassen (entweder per E-Mail oder Push-Benachrichtigung). Du kannst auch Lesezeichen speichern und Beiträge positiv bewerten, um anderen Community-Mitgliedern deine Wertschätzung zu zeigen.
Mit deinem Input könnte dieser Beitrag noch besser werden 💗
Registrieren AnmeldenSupport us
436
Online33.0k
Benutzer83.4k
Themen1.3m
Beiträge