CSS HTML Widget Kalender design

Samson71

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

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.

Community Forum

NEWS

CSS HTML Widget Kalender design

Support us

695

32.4k

81.4k

1.3m