falls hier nicht gewünscht, bitte verschieben. ich wusste nicht so recht, wo ich den Thread hinpacken soll..
Ich probiere mich mit VIS 2 aus und wollte einen Kalender im Apple Design erstellen. Ich bin schon recht weit. Die Daten hole ich mir über ICAL, zerhacke das ganze mit Blockly und lasse mir die gewünschten Ergebnisse in custom Datenpunkte bereitstellen.
Jedoch habe ich so gut wie keine Ahnung von HTML bzw. CSS und wollte fragen, ob mir da jemand ggf. das Widget bauen bzw. verbessern kann. Ich tu mich relativ schwer damit... leider. Wäre dafür echt dankbar.
Ich teile mal meinen bisherigen Code und die Bilder dazu.
Das "Montag" in der Farbe gelb und die "13", so wie der transparente Hintergrund sind derzeit in der VIS 2 extra positioniert. Außerdem Es fehlt ein weiteres "Ereignis" - es müssten 3 sein.
Sollte der Termin keinen Wert/Text für "location" oder "time" haben, wird dies ohne Wert/Text übermittelt und das "Ereignis" wird auf die sichtbaren Inhalte reduziert. Ziel ist es, wenn aus dem DP ein leerer Wert/Text in "event" gepackt wird, dass somit das Ereignis am Montag komplett ausgeblendet wird und nur noch das obere ein Ereignis verfügbar ist.
Im gesamten Code gibt es wahrscheinlich auch unnötige Punkte oder Punkte die nicht funktionieren und vllt kann man das ja noch komplett anders erstellen?
ich hab mein bestes gegeben
HTML Widget:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kalender Widget</title>
<style>
.widget {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.day {
display: flex;
flex-direction: column;
gap: 1px;
padding: 5px 15px;
}
.day .header {
font-size: 1.5rem;
font-weight: bold;
color: #aaa;
text-align: left;
}
.event {
background-color: rgba(58, 21, 33, 0.6);
border-radius: 8px;
padding: 5px;
color: white;
font-size: 0.9rem;
display: flex;
flex-direction: row; /* Zeilenlayout für Balken und Inhalte */
gap: 10px; /* Abstand zwischen Balken und Text */
width: 250px;
}
.event.hidden {
display: none;
}
.event .bar {
background-color: rgba(255, 0, 114, 1); /* Magentafarbener Balken */
width: 5px;
height: auto; /* Automatische Höhe */
min-height: 5px; /* Mindesthöhe, damit der Balken sichtbar ist */
border-radius: 3px; /* Optional: Abgerundete Ecken */
}
.event .content {
display: flex;
flex-direction: column;
gap: 0px; /* Abstand zwischen Titel, Ort und Zeit */
}
.event .title {
color: rgba(255, 00, 114, 1);
font-weight: bold;
font-size: 1.2rem;
margin: 0px;
}
.event .location {
font-size: 0.85rem;
color: #e6005c;
}
.event .time {
font-size: 0.85rem;
color: #e6005c;
}
.hidden {
display: none;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
// Alle Event-Elemente verarbeiten
const events = document.querySelectorAll(".event");
events.forEach(eventElement => {
const locationElement = eventElement.querySelector(".location");
const timeElement = eventElement.querySelector(".time");
// Beispiel: Wenn Ort leer ist, verstecke die Zeile für den Ort
const locationText = locationElement.textContent.trim();
if (!locationText) {
locationElement.classList.add("hidden"); // Versteckt den Ort
}
// Wenn sowohl der Ort als auch die Zeit fehlen, verstecke das gesamte Event
const timeText = timeElement.textContent.trim();
if (!locationText && !timeText) {
eventElement.classList.add("hidden"); // Versteckt das gesamte Ereignis
}
// Dynamisches Verkleinern des Events basierend auf sichtbaren Inhalten
const contentElements = eventElement.querySelectorAll(".content > div");
let visibleCount = 0;
contentElements.forEach(contentElement => {
if (!contentElement.classList.contains("hidden")) {
visibleCount++;
}
});
// Passe die Höhe dynamisch an
const barElement = eventElement.querySelector(".bar");
barElement.style.height = ${visibleCount * 20 + 20}px; // Dynamische Höhe basierend auf Anzahl der sichtbaren Elemente
});
});
</script>
</head>
<body>
<div id="widget1" class="widget">
<div class="day">
<div class="header">Datenpunkt 1, Datenpunkt 2</div>
<div class="event">
<div class="bar"></div>
<div class="content">
<div class="title">Datenpunkt 3</div>
<div class="location">Datenpunkt 4</div>
<div class="time">Datenpunkt 5</div>
</div>
</div>
</div>
<!-- Zweites Ereignis -->
<div class="day">
<div class="header">Datenpunkt 1, Datenpunkt 2</div>
<div class="event">
<div class="bar"></div>
<div class="content">
<div class="title">Datenpunkt 3</div>
<div class="location">Datenpunkt 4</div>
<div class="time">Datenpunkt 5</div>
</div>
</div>
</div>
</div>
</body>
</html>
