CSS HTML Widget Kalender design

MarshmallowsLike

Hey zusammen,

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>

Widget:

Apple Widget:
Bildschirmfoto 2025-01-12 um 15.56.46.jpeg.png

Samson71

@marshmallowslike

ich wusste nicht so recht, wo ich den Thread hinpacken soll..

Ich habe das mal in "Visualisierung" verschoben. Geht ja um VIS-2 bzw. eine Darstellung.

OliverIO

@marshmallowslike

Ich habe mal ein Video gesehen wo eine ki eine Webseite nur auf Basis eines Screenshot nachgebaut hat.
Evtl wäre das eine Möglichkeit?
Du kannst mal die üblichen verdächtigen wie openai perplexity Claude Gemini durchprobieren

MarshmallowsLike

@samson71

danke dir!

MarshmallowsLike

@oliverio ich hab den code anfänglich mit ChatGPT erstellt und dann teils selber bearbeitet.
Nur führt das leider nicht zu dem Gewünschtem Ergebnis.

OliverIO

@marshmallowslike

Dann zeig was du hast.
Sag wo das detailproblem liegt.
Stell sources zur Verfügung, das man möglichst einfach helfen kann.
Oben sehe ich eine komplette Webseite, das wohl nicht direkt aus vis stammt.

Dann was ist die Datengrundlage?
Wie sehen beispielhaften aus die dann dynamisch gefüllt werden sollen?
Wie ist das Ziel Widget?
Das html Widget?

MarshmallowsLike

@oliverio habe doch oben im Spoiler den kompletten Code gepostet und geschrieben wie ich es haben möchte.

wenn du den code in vis ins html kopierst, siehste wie es aktuell ist.

ich stelle hier mal ein weiteren code zur Verfügung. Bei dem passen die Zeilenabstände zwischen den texten nicht. das ist das hauptproblem bei dem html code.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Event Schedule</title>
 <style>
   body {
     background-color: #1b2b44; /* Dark blue background */
     color: white;
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
   }

   .container {
     background-color: #274264; /* Slightly lighter blue */
     border-radius: 10px;
     padding: 20px;
     width: 700px;
     display: flex;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
   }

   .left-panel {
     margin-left: 20px;
   }

   .day {
     font-size: 24px;
     color: #d4ff00; /* Lime green for the day */
   }

   .date {
     font-size: 48px;
     color: #ff009d; /* Pink for the date */
   }

   .right-panel {
     flex-grow: 1;
     margin-left: 20px;
   }

   .event-section {
     margin-bottom: 20px;
   }

   .event-day {
     font-size: 25px;
     color: #d1d8e0; /* Light gray */
   }

   .event {
     background-color: #3a4960; /* Darker blue for event background */
     border-left: 4px solid #ff009d; /* Pink border */
     border-radius: 5px;

    }

   .event-title {
     font-weight: bold;
    font-size: 18px;
     color: #ff009d; /* Pink for the title */
   margin-left: 10px;
   margin-bottom: 1px; 
   }

   .event-location {
     font-size: 15px;
   margin-left: 10px;
    margin-bottom: 1px; 
   }

   .event-time {
     font-size: 15px;
     color: #d1d8e0; /* Light gray for time */
 	margin-left: 10px;
   
   }
 </style>
</head>
<body>
 <div class="container">
   <div class="left-panel">
     <div class="day">Dienstag</div>
     <div class="date">14</div>
     <div class="event-section">
       <div class="event-day">Mittwoch, 15.01.2025</div>
       <div class="event">
         <p class="event-title">test</p>
         <p class="event-location">Deutschland</p>
         <p class="event-time">08:00-09:00</p>
       </div>
     </div>
   </div>
   <div class="right-panel">
     <div class="event-section">
       <div class="event-day">Mittwoch, 15.01.2025</div>
       <div class="event">
         <p class="event-title">test</p>
         <p class="event-location">Deutschland</p>
         <p class="event-time">08:00-09:00</p>
       </div>

       <div class="event-day">Montag, 20.01.2025</div>
       <div class="event">
         <p class="event-title">Test</p>
         <p class="event-location">Göttingen</p>
         <p class="event-time">07:45-08:45</p>
       </div>
     </div>
   </div>
 </div>
</body>
</html>

OliverIO

@oliverio sagte in CSS HTML Widget Kalender design:

Oben sehe ich eine komplette Webseite, das wohl nicht direkt aus vis stammt.

du darfst kein html und body tag da drin haben
das darf es in einer seite nur einmal geben

die großen zeilenabstände werden durch den margin erzeugt, den der browser einem p element hinzufügt
sehen kannst du das über die webdeveloper tools die mit f12 im browser zu öffnen sind (hier chrome)

entfernen kannst diese bspw in dem du der klasse event-location und event.time noch
die anweisung

margin-top:0px;

hinzufügst
besser wäre es allerdings ein div-element zu nehmen. da sind nicht so viele vorbelegungen des browsers drauf

Vorbelegung des Browser für P Element

Vorbelegung des Browser für DIV Element

warum machst du hier linkes panel/rechtes panel?
das erfordert wahrscheinlich später für zuviel logik das aufzuteilen.
schau dir lieber mal die layoutoptionen einer flexbox an
da macht dir der browser das automatisch, bzw er füllt dann zeilen mit einem layoutblock solange auf bis die breite erreicht ist und bricht dann um. ein layoutblock wäre dann ein termin
so kann man flexibel dann nur durch bestimmung der breite 1-reihig,2-reihig,x-reihig formatieren, ohne noch irgendwas anderes anzugeben. flexbox ist für responsive layout das meist verwendete element
https://developer.mozilla.org/de/docs/Learn_web_development/Core/CSS_layout/Flexbox

MarshmallowsLike

@oliverio ich hab jetzt mal versucht mit grid das ganze durchzuführen. allerdings kriege ich mit display grid und dessen formatierung eine fehlerhafte darstellung in css.. wird vermutlich nicht unterstützt?

gerne einmal ausprobieren, Code im Spoiler


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Grid Layout</title>
</head>
<body>

 <style>

 body {
    
 }

 .grid-container {
     display: grid;
     grid-template-columns: 250px 250px;
     grid-template-rows: 100px 100px;
     height: 200px; /* Feste Höhe */
     width: 500px; /* Feste Höhe */
     overflow: hidden;
     grid-template-areas: 
     "a c" 
     "b c"; 
     background-color: rgba(30, 30, 30, 1);
     box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
     border-radius: 6px;
     
 }

 .item-1, .item-2, .item-3, .item-4, .item-5, .item-6 {
   font-family: Arial, sans-serif;
   font-size: 14px;
   display: flex;
   font-family: '.SFNSDisplay-Regular', sans-serif;
   border: 1px solid;
   color: red;
   
 }

 .item-1 { grid-area: a; }
 .item-2 { grid-area: b; }
 .item-3 { grid-area: c; }

       .header {
           padding: 15px 15px;
           font-size: 1rem;
   	        font-weight: bold;
           color: #aaa;
       }

        .header2 {
           gap: 0px;
           padding: 5px 0px;
           //margin-top: px;
           font-size: 1rem;
   	        font-weight: bold;
           color: #aaa;
       }

       .header3 {
           gap: 0px;
           padding: 5px 0px;
           font-size: 1rem;
   	        font-weight: bold;
           color: #aaa;
       }

       .header4 {
           gap: 0px;
           padding: 10px 15px;
           font-size: 1rem;
   	        font-weight: bold;
           color: #aaa;
       }
     
       .event {
           background-color: rgba(58, 21, 33, 0.6);
           border-radius: 8px;
           padding: 5px;
           display: flex;
           flex-direction: row; /* Zeilenlayout für Balken und Inhalte */
           gap:  10px; /* Abstand zwischen Balken und Text */
           width: 200px;
       }


       .event .bar {
           background-color: rgba(218, 56, 83, 1);
           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 {
           flex-direction: column;
           gap: 0px; /* Abstand zwischen Titel, Ort und Zeit */
       }

       .event .title {
           color: rgba(218, 56, 83, 1);
           font-weight: bold;
           font-size: 1rem;
           margin: 0px;
       }

       .event .location {
           font-size: 0.85rem;
           color: rgba(218, 56, 83, 0.68);
       }

       .event .time {
           font-size: 0.85rem;
           color: rgba(218, 56, 83, 0.68);
       }

       .eventDay {
    		  font-size: 1rem;
    		  color: rgba(182, 69, 31, 1);
     		margin-left: 20px;
     		margin-bottom: 25px;
     		font-weight: bold;
         padding: 15px 0px;
  		}
  		.eventDayDate {
    		  font-size: 2.5em;
    		  color: rgba(235, 235, 235, 1);
     		font-weight: 100;
  		}      

 </style>
 <div class="grid-container">
    <div class="item-1">
     	<div class="eventDay">MITTWOCH
    	<div class="eventDayDate">15</div>
     </div>
     </div>     
        <div class="item-4">
        	<div class="header4">4. Ereignis
    		    <div class="event">
               <div class="bar"></div>
                 <div class="content">
                   <div class="title">Ereignis</div>
                   <div class="location">Ort</div>
                   <div class="time">time</div>
                </div>
           </div>
          </div>
       </div>

       <div class="item-3">
        	<div class="header">1. Ereignis    		   
           <div class="event">
               <div class="bar"></div>
                 <div class="content">
                   <div class="title">Ereignis</div>
                   <div class="location">Ort</div>
                   <div class="time">time</div>
                </div>
            </div>
                   <div class="header2">2. Ereignis
                     <div class="event">
                         <div class="bar"></div>
                           <div class="content">
                             <div class="title">Ereignis</div>
                             <div class="location">Ort</div>
                             <div class="time">time</div>
                         </div>
                     </div>
                       <div class="header3">3. Ereignis
                         <div class="event">
                             <div class="bar"></div>
                               <div class="content">
                                 <div class="title">Ereignis</div>
                                 <div class="location">Ort</div>
                                 <div class="time">time</div>
                             </div>
                         </div>
                       </div>
                   </div>
          </div>
       </div>
 </div>

<script>
 // Funktion, um die Header basierend auf dem Inhalt der Titel zu prüfen
 document.addEventListener("DOMContentLoaded", function() {
   const headers = document.querySelectorAll(".header, .header2, .header3, .header4");
   
   headers.forEach(header => {
     const title = header.querySelector(".title");
     if (!title || title.textContent.trim() === "") {
       // Wenn keine .title oder der Text leer ist, blende den Header aus
       header.style.display = "none";
     }
   });
 });
</script>

</body>
</html>

VIS 2 - HTML Widget

Darstellung internet:

OliverIO

@marshmallowslike

ich meinte flex-box nicht irgendwas mit grid

hier mein Vorschlag

html

<div class="eventcal">
  <div class="day">
    <div class="bar"></div>
      <div class="daycontent">
        <div class="dayheader">
          <div class="weekday">
            Mittwoch
          </div>
          <div class="weekdaynumber">
            12
          </div>
        </div>
        
        <div class="event">
          <div class="date">
            Mittwoch, 15. Jan.
          </div>
          <div class="location">
            Location
          </div>
          <div class="time">
            12:00-13:00
          </div>        
        </div>

        <div class="event">
          <div class="date">
            Mittwoch, 15. Jan.
          </div>
          <div class="location">
            Location
          </div>
          <div class="time">
            12:00-13:00
          </div>        
        </div>

        <div class="event">
          <div class="date">
            Mittwoch, 15. Jan.
          </div>
          <div class="location">
            Location
          </div>
          <div class="time">
            12:00-13:00
          </div>        
        </div>    
    </div>
  </div>
</div>

css

.eventcal {
 width: 30em;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 color:white;
}
.day {  
 background-color: #1c1c1e;
 border-radius: 10px;
 margin: 1em;
 padding: 1em;
 padding-left: 0.2em;
 display: flex;
 flex-direction: row;
 max-height:15em;
}
.dayheader .weekday {
 color: #a92727;
 font-weight: bold;
 font-size: 1.2rem;
 text-transform: uppercase;
}
.dayheader .weekdaynumber {
 color: #fdfdfd;
 font-size: 2rem;
}
.event .date {
 color: #9898a0;
 font-weight: bold;
 font-size: 1rem;
 text-transform: uppercase;
}
.event {
 margin: 0.5em 0;
}
.bar{
 background-color: rgba(255, 0, 114, 1); /*   width: 5px;
 height: auto; /* Automatische Höhe */
 min-width: 0.3em; /* Mindesthöhe, damit der Balken sichtbar ist */
 border-radius: 3px; /* Optional: Abgerundete Ecken */
}
.daycontent {
   padding-left: 0.5em;
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   column-gap: 2em;
}

https://codepen.io/oweitman/pen/KwPBwGb

OliverIO

@marshmallowslike sagte in CSS HTML Widget Kalender design:

ich hab jetzt mal versucht mit grid das ganze durchzuführen. allerdings kriege ich mit display grid und dessen formatierung eine fehlerhafte darstellung in css.. wird vermutlich nicht unterstützt?

CSS-Anweisungen sind immer global.
d.h. egal wo sie im html oder in eingebundenen css dateien stehen.
die css-anweiungen/klassen wirken immer auf alle elemente entsprechend den css-selektoren

wenn nun in vis irgendwas nicht so aussieht wie es woanders aussieht, dann wirken da meist noch andere klassen darauf.
in vis gibt es immer wieder mal probleme, weil entwickler ihre css-anweisungen nicht genug kapseln. wer die klassennamen bspw block paragraph absatz oder ähnliche generische anweisungen verwendet, braucht sich dann nicht wundern, wenn sich das mit anderen elementen überschneidet, die ihre elemente ebeneso genannt haben.
in vis hast du dann 1 bis viele adapter, die ihr eigenes css mitbringen, dann noch css anweisungen im css reiter, die von den benutzern wild zusammenkopiert werden ohne zu verstehen was das genau macht. meistens klappt es auch, aber manchmal ist die fehlsersuche dann auch schwierig (es gibt da ja auch noch die vererbung von css-anweisungen an die kind elemente)

wenn du herausfinden willst, woran es liegt, musst du mit den web developer tools deines browser das anschauen, woher die abweichende anweisung kommt.

NEWS

CSS HTML Widget Kalender design

Support us

799
Online

31.7k
Users

79.8k
Topics

1.3m
Posts

NEWS

CSS HTML Widget Kalender design

Support us

799Online

31.7kUsers

79.8kTopics

1.3mPosts

799
Online

31.7k
Users

79.8k
Topics

1.3m
Posts