Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. [Vorlage] MDCSS v2: ical Kalendar anzeigen

NEWS

  • Monatsrückblick Januar/Februar 2026 ist online!
    BluefoxB
    Bluefox
    15
    1
    209

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    17
    1
    4.4k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    1.3k

[Vorlage] MDCSS v2: ical Kalendar anzeigen

Scheduled Pinned Locked Moved Visualisierung
vismaterial uimaterial css
56 Posts 15 Posters 9.4k Views 20 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • F Offline
    F Offline
    FrenkyIO
    wrote on last edited by
    #14

    @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
    0
    • arteckA Offline
      arteckA Offline
      arteck
      Developer Most Active
      wrote on last edited by
      #15

      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>`
          }
      

      zigbee hab ich, zwave auch, nuc's genauso und HA auch

      UhulaU 1 Reply Last reply
      0
      • arteckA arteck

        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>`
            }
        
        UhulaU Offline
        UhulaU Offline
        Uhula
        wrote on last edited by
        #16

        @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>";
        

        Uhula - Leise und Weise
        Ex: ioBroker on Gigabyte NUC Proxmox

        arteckA 1 Reply Last reply
        0
        • UhulaU Uhula

          @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>";
          
          arteckA Offline
          arteckA Offline
          arteck
          Developer Most Active
          wrote on last edited by
          #17

          @Uhula

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

          ne leider nein

          zigbee hab ich, zwave auch, nuc's genauso und HA auch

          UhulaU 1 Reply Last reply
          0
          • arteckA arteck

            @Uhula

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

            ne leider nein

            UhulaU Offline
            UhulaU Offline
            Uhula
            wrote on last edited by
            #18

            @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.

            Uhula - Leise und Weise
            Ex: ioBroker on Gigabyte NUC Proxmox

            arteckA 1 Reply Last reply
            0
            • UhulaU Uhula

              @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.

              arteckA Offline
              arteckA Offline
              arteck
              Developer Most Active
              wrote on last edited by
              #19

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

              zigbee hab ich, zwave auch, nuc's genauso und HA auch

              UhulaU 1 Reply Last reply
              0
              • arteckA arteck

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

                UhulaU Offline
                UhulaU Offline
                Uhula
                wrote on last edited by
                #20

                @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.

                Uhula - Leise und Weise
                Ex: ioBroker on Gigabyte NUC Proxmox

                arteckA 1 Reply Last reply
                0
                • UhulaU Uhula

                  @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.

                  arteckA Offline
                  arteckA Offline
                  arteck
                  Developer Most Active
                  wrote on last edited by
                  #21

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

                  MDCSS v2.x

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

                  zigbee hab ich, zwave auch, nuc's genauso und HA auch

                  1 Reply Last reply
                  0
                  • D Offline
                    D Offline
                    der-eine
                    wrote on last edited by
                    #22

                    @Uhula danle für die Vorlage! Wie immer top und gefällt mir sehr gut! :+1:
                    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?

                    UhulaU 1 Reply Last reply
                    0
                    • D der-eine

                      @Uhula danle für die Vorlage! Wie immer top und gefällt mir sehr gut! :+1:
                      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?

                      UhulaU Offline
                      UhulaU Offline
                      Uhula
                      wrote on last edited by
                      #23

                      @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.

                      Uhula - Leise und Weise
                      Ex: ioBroker on Gigabyte NUC Proxmox

                      D 1 Reply Last reply
                      0
                      • T Offline
                        T Offline
                        Tirador
                        wrote on last edited by
                        #24

                        @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.

                        UhulaU 1 Reply Last reply
                        0
                        • UhulaU Uhula

                          @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 Offline
                          D Offline
                          der-eine
                          wrote on last edited by
                          #25

                          @Uhula das wars. :thinking_face: Hab eigentlich nur den View-Export von Dir importiert und nichts geändert.
                          Hab den Export erneut importiert aber da passt es. :man-facepalming:
                          Danke für die Hilfe!

                          1 Reply Last reply
                          0
                          • T Tirador

                            @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.

                            UhulaU Offline
                            UhulaU Offline
                            Uhula
                            wrote on last edited by
                            #26

                            @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

                            Uhula - Leise und Weise
                            Ex: ioBroker on Gigabyte NUC Proxmox

                            1 Reply Last reply
                            0
                            • T Offline
                              T Offline
                              Tirador
                              wrote on last edited by Tirador
                              #27

                              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?

                              UhulaU 1 Reply Last reply
                              1
                              • T 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?

                                UhulaU Offline
                                UhulaU Offline
                                Uhula
                                wrote on last edited by
                                #28

                                @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.

                                Uhula - Leise und Weise
                                Ex: ioBroker on Gigabyte NUC Proxmox

                                T 1 Reply Last reply
                                0
                                • UhulaU Uhula

                                  @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 Offline
                                  T Offline
                                  Tirador
                                  wrote on last edited by
                                  #29

                                  @Uhula OK, ich hatte schon den ical Adapter ins Visier genommen. Das Splitting der Termine ist super. Wenn vergangene Termine entfernt werden wäre es optimal.

                                  1 Reply Last reply
                                  0
                                  • 2 Offline
                                    2 Offline
                                    2hot4you
                                    wrote on last edited by 2hot4you
                                    #30

                                    Hallo,

                                    wo/wie kann ich es einstellen das der aktive Tag eine andere Farbe hat ? , bei mir wird der Tag nur etwas heller dargestellt,
                                    ist aber die gleiche farbe

                                    ical.PNG

                                    weiter hin noch ne Frage zu den möglichen "icons", wie bekomme ich die hin, ich werde aus
                                    dem Skripte nicht schlau, ab Zeile 257 steht

                                                               // Farben angegeben werden (diese überschreiben jene aus iCal)
                                                               // 'icon'     : 'Icon-Name' (MDCSS/Google WebFont)
                                                               // 'calColor' : *#rrggbb' abweichende Kalendarfarbe 
                                                               // 'ignore'   : true|false Kalendar komplett ignorieren
                                          this.CALENDAR        = {'xxGWA'      : {'icon':'room', 'calcolor':'orange' },
                                                                  'xxGeburstag' : {'icon':'cake'},
                                                                  'Familie'          : {'ignore':true}
                                    

                                    (MDCSS/Google WebFont), verstehe ich nicht

                                    Gruß Michael

                                    1 Reply Last reply
                                    0
                                    • UhulaU Offline
                                      UhulaU Offline
                                      Uhula
                                      wrote on last edited by
                                      #31

                                      Update 2020.05.01

                                      • Anpassung an neues MduiBase (intern)
                                      • Anpassung an MDCSS 2.5
                                      • Serientermine vor dem aktuellem Datum werden nicht mehr angezeigt

                                      Update auf GitHub, siehe 1.Beitrag

                                      Um ein Feedback zu erhalten wäre es schön, wenn jeder, der diese Vorlagen nutzt, den 1.Beitrag des Themas positiv bewertet (Pfeil nach oben oder unten ;-) ). Ich kann dann auch abschätzen, ob sich die weitere Pflege lohnt. Thx!

                                      Uhula - Leise und Weise
                                      Ex: ioBroker on Gigabyte NUC Proxmox

                                      T 1 Reply Last reply
                                      0
                                      • UhulaU Uhula

                                        Update 2020.05.01

                                        • Anpassung an neues MduiBase (intern)
                                        • Anpassung an MDCSS 2.5
                                        • Serientermine vor dem aktuellem Datum werden nicht mehr angezeigt

                                        Update auf GitHub, siehe 1.Beitrag

                                        Um ein Feedback zu erhalten wäre es schön, wenn jeder, der diese Vorlagen nutzt, den 1.Beitrag des Themas positiv bewertet (Pfeil nach oben oder unten ;-) ). Ich kann dann auch abschätzen, ob sich die weitere Pflege lohnt. Thx!
                                        T Offline
                                        T Offline
                                        Tirador
                                        wrote on last edited by
                                        #32

                                        @Uhula super, dass mit den Serienterminen. Würde es dir etwas ausmachen, dass Skript etwas zubauen, so dass die Termine von x Tagen auch in einzelne Datenpunkte geschrieben werden. Das könnte man dann auch direkt im MessageHandler anzapfen. Ich würde das Skript erweitern und dir die Version senden.

                                        D UhulaU 2 Replies Last reply
                                        0
                                        • T Tirador

                                          @Uhula super, dass mit den Serienterminen. Würde es dir etwas ausmachen, dass Skript etwas zubauen, so dass die Termine von x Tagen auch in einzelne Datenpunkte geschrieben werden. Das könnte man dann auch direkt im MessageHandler anzapfen. Ich würde das Skript erweitern und dir die Version senden.

                                          D Offline
                                          D Offline
                                          der-eine
                                          wrote on last edited by
                                          #33

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

                                          @Uhula super, dass mit den Serienterminen. Würde es dir etwas ausmachen, dass Skript etwas zubauen, so dass die Termine von x Tagen auch in einzelne Datenpunkte geschrieben werden. Das könnte man dann auch direkt im MessageHandler anzapfen. Ich würde das Skript erweitern und dir die Version senden.

                                          @Uhula das wäre super wenn Du das umsetzen könntest! :+1:

                                          1 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          490

                                          Online

                                          32.7k

                                          Users

                                          82.4k

                                          Topics

                                          1.3m

                                          Posts
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Home
                                          • Recent
                                          • Tags
                                          • Unread 0
                                          • Categories
                                          • Unreplied
                                          • Popular
                                          • GitHub
                                          • Docu
                                          • Hilfe