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

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.9k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.2k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    3.4k

[Vorlage] MDCSS v2: ical Kalendar anzeigen

Scheduled Pinned Locked Moved Visualisierung
vismaterial uimaterial css
56 Posts 15 Posters 8.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.
  • dQeLseD Offline
    dQeLseD Offline
    dQeLse
    wrote on last edited by
    #8

    @Uhula super Arbeit!
    Ich bekomme allerdings die Filterleiste nicht angezeigt, egal ob ich List oder Tabelle mit dem basic string unescaped widget einbinde.
    Was mache ich da falsch?
    Könntest du auch ne Json Ausgabe implementieren? dann könnte man die Materialdesign Widgets benutzen :)

    UhulaU 1 Reply Last reply
    0
    • dQeLseD dQeLse

      @Uhula super Arbeit!
      Ich bekomme allerdings die Filterleiste nicht angezeigt, egal ob ich List oder Tabelle mit dem basic string unescaped widget einbinde.
      Was mache ich da falsch?
      Könntest du auch ne Json Ausgabe implementieren? dann könnte man die Materialdesign Widgets benutzen :)

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

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

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

      dQeLseD 1 Reply Last reply
      0
      • UhulaU Uhula

        @Tirador Optionales "Suchen" ist eine gute Idee. Stimmt, man sucht eher selten im Kalender. Du könntest die Filterfelder löschen, oder holst dir die neuen views.json von Github. Ich habe die beiden views so angepasst, dass die Filterfelder sich via Popup-Menu öffnen. SO bleibt auch mehr Platz für den Kalender.

        T Offline
        T Offline
        Tirador
        wrote on last edited by
        #10

        @Uhula Besten Dank für die Änderungen! :)

        1 Reply Last reply
        0
        • UhulaU Uhula

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

          dQeLseD Offline
          dQeLseD Offline
          dQeLse
          wrote on last edited by
          #11

          @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
          0
          • SWE1008S Offline
            SWE1008S Offline
            SWE1008
            wrote on last edited by
            #12

            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
            0
            • SWE1008S Offline
              SWE1008S Offline
              SWE1008
              wrote on last edited by
              #13

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

              1 Reply Last reply
              0
              • 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
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          722

                                          Online

                                          32.4k

                                          Users

                                          81.5k

                                          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