Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. [Vorlage] MDCSS v2: ical Kalendar anzeigen

    NEWS

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    [Vorlage] MDCSS v2: ical Kalendar anzeigen

    This topic has been deleted. Only users with topic management privileges can see it.
    • Uhula
      Uhula @dQeLse last edited by

      @dQeLse Die Filterleiste ist weg 😉 nicht ganz, aber in einem Popup-Menu verschwunden. Klick mal die more_vert (drei Punkte) an ... war @Tirador s (guter) Wunsch

      Eine JSON Ausgabe? Im Prinzip ja, aber ich habe keine Ahnung, welche Formatierungen da für die MDW enthalten sein müssten, damit es "schön" aussieht (habe die MDW nicht installiert). Laufen denn MDCSS und MDW parallel friedfertig? Wenn ja, könntest du mir mal eine Beispiel-JSON kurz posten.

      dQeLse 1 Reply Last reply Reply Quote 0
      • T
        Tirador @Uhula last edited by

        @Uhula Besten Dank für die Änderungen! 🙂

        1 Reply Last reply Reply Quote 0
        • dQeLse
          dQeLse @Uhula last edited by

          @Uhula sehr cool, anbei ein Beispiel aus der Anleitung von MaterialDesignTable:

          [
          	{
          		"img": "/vis.0/myImages/erlebnis_50.png",
          		"name": "Empire",
          		"betriebszeit": "4h 06m",
          		"funk": "5G",
          		"ip": "10.0.0.1"
          	},
          	{
          		"img": "/vis.0/myImages/erlebnis_100.png",
          		"name": "Handy",
          		"betriebszeit": "13m",
          		"funk": "5G",
          		"ip": "10.0.0.2"
          	},
          	{
          		"img": "/vis.0/myImages/erlebnis_100.png",
          		"name": "Harmony Hub - Wohnzimmer",
          		"betriebszeit": "18T 07h 21m",
          		"funk": "2G",
          		"ip": "10.0.0.3"
          	},
          	{
          		"img": "/vis.0/myImages/erlebnis_25.png",
          		"name": "MusicCast - Esszimmer (WX-030)",
          		"betriebszeit": "1h 57m",
          		"funk": "2G",
          		"ip": "10.0.0.4"
          	},
          	{
          		"img": "/vis.0/myImages/erlebnis_75.png",
          		"name": "MusicCast - K�che (ISX-18D)",
          		"betriebszeit": "4h 10m",
          		"funk": "2G",
          		"ip": "10.0.0.5"
          	}
          ]
          

          dank dir!

          1 Reply Last reply Reply Quote 0
          • SWE1008
            SWE1008 last edited by

            Hallo,

            vielen Dank für die Vorlage.
            Wie bekomme ich denn die Schriftfarbe in weis? Bei mir ist alles komplett schwarz und ich habe ein recht dunklen Hintergrund so das man nicht viel erkennen kann.

            1 Reply Last reply Reply Quote 0
            • SWE1008
              SWE1008 last edited by

              Oh, wer lesen kann ist im Vorteil. Steht ja ein paar Beiträge oben drüber... 😊

              1 Reply Last reply Reply Quote 0
              • F
                FrenkyIO last edited by

                @Uhula

                Echt Klasse die Vorlage. Ist integriert und funktioniert super. Dankeschön 🙂

                Siehst du vielleicht eine Möglichkeit im Kalender einen Eintrag mit "Heute", welcher sich dann täglich aktualisiert? Fände es dann noch übersichtlicher.

                ---So siehts aktuell bei mir aus---

                20200402_130259.jpg

                1 Reply Last reply Reply Quote 0
                • arteck
                  arteck Developer Most Active last edited by

                  super aber... ich habe nur wenig platz in der darstellung
                  fb699037-ed85-47c9-8f32-30396e625d69-grafik.png

                  ich habe mir schon das ganze eingestampft aber bekomme den Zeilenabstand nicht kleiner
                  12b5cb7a-62c4-4de9-976c-e818de2affc3-grafik.png

                  das ist der Source zu

                  const tmpTable = {
                      header : 
                      `<tr>
                      <th style="text-align:left;"></th>
                      <th style="text-align:left;"></th>
                      <th style="text-align:left;"></th>
                      <th style="text-align:left;"></th>
                      <th style="text-align:left;"></th>
                      <th style="text-align:left;"></th>
                      <th style="text-align:left;"></th>
                      <th style="text-align:left;"></th>
                      </tr>`,
                      row : 
                      `<tr style="line-height: 2px">
                      <td style="text-align:right;">
                         <span style="display:{showDay}; color:{dayColor}; font-size:1em; opacity:1; font-weight:bold;">{currDay}</span>
                      </td>
                      <td>
                         <span style="display:{showDay}; font-size:0.7em; margin-top:0.3em; margin-left:2px; opacity:.8;">{currMonthName}</span>
                      </td>
                      <td>
                         <span style="display:{showDay}; font-size:0.7em; margin-top:0.3em; opacity:.8;">{currWeekDayName}</span>
                      </td>
                      <td>
                        <span style="display:inline-block; width:0.6em; height:0.6em; margin-top:0.3em; background:{calColor}; border-radius:50%;">&nbsp;</span>
                      </td>
                      <td>
                        <i class='material-icons mdui-center {color}' style='font-size:0.5em;'>{icon}</i>
                      </td>
                      <td><span style="font-size:0.9em; opacity:0.8;font-weight:bold">{event}</span></td>
                      <td><span style="font-size:0.6em; opacity:0.8;">{timeSpan} {hint}</span></td>
                     
                      </tr>`
                      }
                  
                  Uhula 1 Reply Last reply Reply Quote 0
                  • Uhula
                    Uhula @arteck last edited by

                    @arteck Du nutzt das normale basic HTML-Widget, ohne MDCSS Unterbau? Dann gibt es in der vis CSS eigentlich nur die table-CSS Klasse, die einen 2px Abstand (border) um jedes Feld zieht.

                    table {
                        border-collapse: separate;
                        border-spacing: 2px;
                    }
                    

                    Vielleicht hilft es diesen im Script beim

                    let htmlTable  = "<table><thead>"+tmpTable.header+"</thead><tbody>";
                    

                    border-collapse auf "collapse" zu setzen (oder spacing auf 0px).

                    let htmlTable  = "<table style='border-collapse:collapse;'><thead>"+tmpTable.header+"</thead><tbody>";
                    
                    arteck 1 Reply Last reply Reply Quote 0
                    • arteck
                      arteck Developer Most Active @Uhula last edited by

                      @Uhula

                      let htmlTable = "<table style='border-collapse:collapse;'><thead>"+tmpTable.header+"</thead><tbody>";
                      

                      ne leider nein

                      Uhula 1 Reply Last reply Reply Quote 0
                      • Uhula
                        Uhula @arteck last edited by

                        @arteck Hmm, dann kannst du noch 'border-spacing: 0px;' hinzufügen. Wenn das auch nichts hilft, musst du im Browser die Tabelle "untersuchen" und dir dort ansehen, warum welches <td> zu hoch ist.

                        arteck 1 Reply Last reply Reply Quote 0
                        • arteck
                          arteck Developer Most Active @Uhula last edited by

                          @Uhula auf die idee bin ich auch schon gekommen.. leider auch ..negativ

                          Uhula 1 Reply Last reply Reply Quote 0
                          • Uhula
                            Uhula @arteck last edited by

                            @arteck Ich habe das mal bei mir nachgestellt. Wenn ich das row-Template so ändere

                            row : 
                            `<tr style="line-height: 0;">
                            

                            und keine anderen Änderungen vornehme, dann sieht meine Tabelle zur Laufzeit so aus:

                            (Ohne mdui-table-Zuweisung für das Widget)
                            54f9f144-3997-4b25-9de8-7832a8555df0-image.png

                            (Mit mdui-table Zuweisung für das Widget)
                            6d056aef-0340-4431-a4a5-171bb675b108-image.png
                            Wobei ich nicht weiß, ob du das MDCSS v2.x nutzt oder nicht.

                            Wo der Extra-Abstand in deinem Beispiel herkommt, kann ich leider nicht erkennen und habe auch keine Lösung dafür.

                            arteck 1 Reply Last reply Reply Quote 0
                            • arteck
                              arteck Developer Most Active @Uhula last edited by

                              @Uhula sagte in [Vorlage] MDCSS v2: ical Kalendar anzeigen:

                              MDCSS v2.x

                              gutes stichwort das hab ich überlesen.. ich schau mal

                              1 Reply Last reply Reply Quote 0
                              • D
                                der-eine last edited by

                                @Uhula danle für die Vorlage! Wie immer top und gefällt mir sehr gut! 👍
                                Leider funktionieren bei mir die Filter nicht. Wenn ich die vordefinierten benutze wie z. B. Abfall den es bei mir auch gibt wird nicht danach gefiltert.
                                Es ändert sich die Zeilenanzahl (korrekt zu den Einträgen) wenn ich einen Filter einstelle aber die Einträge nicht. Weder am MAC noch mit der iOS App.
                                Hast Du da evtl eine Idee woran es liegen könnte?

                                Uhula 1 Reply Last reply Reply Quote 0
                                • Uhula
                                  Uhula @der-eine last edited by

                                  @der-eine Bist du dir sicher, dass Filter, die Anzeige der Anzahl und die Anzeige selbst (List oder Tabelle) auf den gleichen Unterordner logX verweisen? Wenn der Filter die Anzahl korrekt beeinflusst, aber die Anzeige nicht, scheint das nicht so zu sein und Filter / Anzahl zB .log0. und die Anzeige .log1. zu nutzen.

                                  D 1 Reply Last reply Reply Quote 0
                                  • T
                                    Tirador last edited by

                                    @Uhula : Der versteckte Filter ist super.
                                    Ein Userhandlingsproblem habe ich noch. Wenn jemand filtert ist dies nun nicht mehr erkennbar im Hauptwidget.
                                    Ein Filtersymbol wäre toll oder farbliche Markierung der drei Punkte wären meine Ideen.

                                    Uhula 1 Reply Last reply Reply Quote 0
                                    • D
                                      der-eine @Uhula last edited by

                                      @Uhula das wars. 🤔 Hab eigentlich nur den View-Export von Dir importiert und nichts geändert.
                                      Hab den Export erneut importiert aber da passt es. 🤦‍♂️
                                      Danke für die Hilfe!

                                      1 Reply Last reply Reply Quote 0
                                      • Uhula
                                        Uhula @Tirador last edited by

                                        @Tirador Das Script "kennt" leider den View gar nicht und kann deswegen auch nichts einfärben. Es gibt eine Lösung, die du selbst in der vis nutzen kannst: Du überprüfst in der CSS Klasse des Zeilenanzahl-Widgets, ob der Filtertext leer ist und wenn nicht, setzt du "mdui-red" als Schriftfarbe. (Im Beispiel nutze ich log1 - kann bei dir anders sein).

                                        CSS Klasse: mdui-subtitle {v:0_userdata.0.mdui.showIcal.log1.filter;v==''?'':'mdui-red'}
                                        

                                        703c18af-a19a-4aee-b726-ce5d5ef6794a-image.png

                                        1 Reply Last reply Reply Quote 0
                                        • T
                                          Tirador last edited by Tirador

                                          Bei mir werden dauerhaft noch alte Termine angezeigt:

                                          Beispiel:
                                          9f92f3f3-5042-4d54-81dc-355998e2465b-grafik.png

                                          Kann es daran liegen, dass dies ein Serientermin ist, der bis zum 18.4. (also heute) geht?

                                          Uhula 1 Reply Last reply Reply Quote 1
                                          • Uhula
                                            Uhula @Tirador last edited by

                                            @Tirador Ja, der ical-Adapter holt auch solche Termine, die noch andauern. Mein Script teilt die dann auf die einzelnen Tage auf, ohne Berücksichtigung des aktuellen Tages; was man aber abgrenzen könnte. Erkennen kann man diese Tage daran, dass sie leicht transparent dargestellt werden.

                                            T 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            820
                                            Online

                                            31.7k
                                            Users

                                            79.6k
                                            Topics

                                            1.3m
                                            Posts

                                            material css material ui vis
                                            15
                                            56
                                            5695
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo