Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • 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

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

  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.2k

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

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

[Vorlage] MDCSS v2: ical Kalendar anzeigen

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vismaterial uimaterial css
56 Beiträge 15 Kommentatoren 8.2k Aufrufe 20 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • 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
    schrieb am zuletzt editiert von
    #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 Antwort Letzte Antwort
    0
    • arteckA arteck

      @Uhula

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

      ne leider nein

      UhulaU Offline
      UhulaU Offline
      Uhula
      schrieb am zuletzt editiert von
      #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 Antwort Letzte Antwort
      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
        schrieb am zuletzt editiert von
        #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 Antwort Letzte Antwort
        0
        • arteckA arteck

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

          UhulaU Offline
          UhulaU Offline
          Uhula
          schrieb am zuletzt editiert von
          #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 Antwort Letzte Antwort
          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
            schrieb am zuletzt editiert von
            #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 Antwort Letzte Antwort
            0
            • D Offline
              D Offline
              der-eine
              schrieb am zuletzt editiert von
              #22

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

              UhulaU 1 Antwort Letzte Antwort
              0
              • D der-eine

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

                UhulaU Offline
                UhulaU Offline
                Uhula
                schrieb am zuletzt editiert von
                #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 Antwort Letzte Antwort
                0
                • T Offline
                  T Offline
                  Tirador
                  schrieb am zuletzt editiert von
                  #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 Antwort Letzte Antwort
                  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
                    schrieb am zuletzt editiert von
                    #25

                    @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. :man-facepalming:
                    Danke für die Hilfe!

                    1 Antwort Letzte Antwort
                    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
                      schrieb am zuletzt editiert von
                      #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 Antwort Letzte Antwort
                      0
                      • T Offline
                        T Offline
                        Tirador
                        schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                        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
                          schrieb am zuletzt editiert von
                          #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 Antwort Letzte Antwort
                          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
                            schrieb am zuletzt editiert von
                            #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 Antwort Letzte Antwort
                            0
                            • 2 Offline
                              2 Offline
                              2hot4you
                              schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                              0
                              • UhulaU Offline
                                UhulaU Offline
                                Uhula
                                schrieb am zuletzt editiert von
                                #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 Antwort Letzte Antwort
                                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
                                  schrieb am zuletzt editiert von
                                  #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 Antworten Letzte Antwort
                                  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
                                    schrieb am zuletzt editiert von
                                    #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 Antwort Letzte Antwort
                                    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.

                                      UhulaU Offline
                                      UhulaU Offline
                                      Uhula
                                      schrieb am zuletzt editiert von
                                      #34

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

                                      Das wäre im Script ja konfigurierbar "fireEvent4MessageHandler" oder so, stört mich nicht.
                                      Aber.
                                      Das wird nicht viel bringen. Das Script reagiert auf jede Änderung im iCal-JSON und baut die List/Table erneut auf. Es würde dann auch jedesmal wieder alle Termine in deinen MessageHandler feuern. Denn das Script merkt sich ja nicht, für welchen Termin es das schon gemacht hat ...

                                      Generell halte ich es auch für besser, wenn dein MessageHandler ohne ein weiteres Aufbereitungs-Script wie dieses hier funktioniert. Dann bist du unabhängiger und universeller. Insofern müsstest du lediglich einen MessageCreator schreiben, der iCal-JSON überwacht, die Serientermine zerpflückt, die Messages feuert und sich die auch merkt.

                                      Das Zerpflücken kannst du aus meinem Script übernehmen, ist lediglich eine for-Schleife.

                                      Oder habe ich "in einzelne Datenpunkte" nicht korrekt verstanden?

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

                                      T 1 Antwort Letzte Antwort
                                      0
                                      • UhulaU Uhula

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

                                        Das wäre im Script ja konfigurierbar "fireEvent4MessageHandler" oder so, stört mich nicht.
                                        Aber.
                                        Das wird nicht viel bringen. Das Script reagiert auf jede Änderung im iCal-JSON und baut die List/Table erneut auf. Es würde dann auch jedesmal wieder alle Termine in deinen MessageHandler feuern. Denn das Script merkt sich ja nicht, für welchen Termin es das schon gemacht hat ...

                                        Generell halte ich es auch für besser, wenn dein MessageHandler ohne ein weiteres Aufbereitungs-Script wie dieses hier funktioniert. Dann bist du unabhängiger und universeller. Insofern müsstest du lediglich einen MessageCreator schreiben, der iCal-JSON überwacht, die Serientermine zerpflückt, die Messages feuert und sich die auch merkt.

                                        Das Zerpflücken kannst du aus meinem Script übernehmen, ist lediglich eine for-Schleife.

                                        Oder habe ich "in einzelne Datenpunkte" nicht korrekt verstanden?

                                        T Offline
                                        T Offline
                                        Tirador
                                        schrieb am zuletzt editiert von
                                        #35

                                        @Uhula den ical zu zerpflücken würde bedeuten, dass ich den MessageStateCreator erheblich aufrüsten müsste, um weiterhin generisch zu arbeiten. Selbst wenn ich Optionen integriere um json zu verarbeiten fehlt noch viel kalenderlogik. Die Logik aus deinem Skript zu übernehmen führt zur Redundanz. Daher die Idee die Aufbereitung aus deinem Skript direkt in Datenpunkten fortzuschreiben.die mehrfache Auslösung ist grundsätzlich nicht problematisch. Hier würde ich noch eine Option im MessageStateCreator vorsehen, dass der Datenpunkt nur bei Änderungen des Werts neu getriggert wird.

                                        1 Antwort Letzte Antwort
                                        0
                                        • G Offline
                                          G Offline
                                          G4l4h4d
                                          schrieb am zuletzt editiert von
                                          #36

                                          Ich habe das Script eingefügt und bekomme folgenden Fehler

                                          javascript.0	2020-05-09 22:09:19.604	error	(973) Function "setObject" is not allowed. Use adapter settings to allow it.
                                          javascript.0	2020-05-09 22:09:19.604	error	(973) Function "setObject" is not allowed. Use adapter settings to allow it.
                                          javascript.0	2020-05-09 22:09:19.603	error	(973) Function "setObject" is not allowed. Use adapter settings to allow it.
                                          javascript.0	2020-05-09 22:09:19.602	error	(973) Function "setObject" is not allowed. Use adapter settings to allow it.
                                          javascript.0	2020-05-09 22:09:19.601	error	(973) Function "setObject" is not allowed. Use adapter settings to allow it.
                                          

                                          Es wird in den Objekten auch kein Eintag in Userdata angelegt?

                                          UhulaU 1 Antwort Letzte Antwort
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          735

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden

                                          • Du hast noch kein Konto? Registrieren

                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Home
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe