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] Lovelace: ical Kalender Karte

NEWS

  • Neuer ioBroker-Blog online: Monatsrückblick März/April 2026
    BluefoxB
    Bluefox
    5
    1
    115

  • Verwendung von KI bitte immer deutlich kennzeichnen
    HomoranH
    Homoran
    8
    1
    159

  • Monatsrückblick Januar/Februar 2026 ist online!
    BluefoxB
    Bluefox
    18
    1
    865

[Vorlage] Lovelace: ical Kalender Karte

Scheduled Pinned Locked Moved Visualisierung
own projecttemplate
14 Posts 6 Posters 3.3k Views 7 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.
  • T Tirador

    Dieses Skript (am Ende des Beitrags) ermöglicht aus dem ICAL-Adapter eine Kalenderanzeige in Lovelace:

    b039eec7-df6c-4b37-bed0-7341657d53eb-grafik.png

    Das Skript basiert auf der Vorlage von Uhula:
    MDCSS v2: ical Kalendar anzeigen

    Das Script überwacht den ical-Adapter und erzeugt bei Änderungen an dessen States

    • HTML-List States für die Anzeige als Kalender in Listform mit
    • Markdown Datenpunkt für die Anzeige der Kalender in Lovelace

    Das Skript bietet im einzelnen folgende Funktionen:

    • Tagesauflösung von "von/bis"-Terminen, inkl. Berücksichtigung der Uhrzeiten
    • Tagesdatum, Kalendarfarben aus ical oder optional aus dem Script
    • Termintext und -ort
    • optionalem Icon je Kalendar
    • optionalem "ignore", wenn ein Kalendar unberücksichtigt bleiben soll

    Installation

    Einfach als serverseitiges Script installieren und starten-5 Sek warten-stoppen-starten. Beim 1.Start werden
    die notwendigen States unter STATE_PATH = '0_userdata.0.lovelace.showIcal.' erzeugt. Erst beim 2.Start
    instanziiert das Script die Event-Handler und läuft dann.

    In Lovelace ist eine "Markdown-Karte" einzufügen mit folgendem Code:

    f41b1297-dfca-4594-953c-fcede17fb59c-grafik.png

    YAML-Code

    type: markdown
    content: '{0_userdata.0.lovelace.showIcal.log0.markdown}'
    title: Kalender
    
    

    Konfiguration

    Eigentlich ist keine notwendig.
    Optional in der Funktion MduiShowIcal|doInit() eine Anpassung der KONFIGURATION vornehmen
    Optional Anpassung der tmpList.

    States

    Es werden States für n-Logs erzeugt, jedem, Log kann ein Standardfilter mitgegeben werden. In jedem Log-Ordner
    befindet sich ein list-HTML State, welcher direkt in der vis angezeigt werden kann (jeweils im basic-string (unescaped) Widget).
    Über optionale Filter als string (Bsp:':Abfall:') oder als RegExp (Bsp:'/Feiertag|Geburtstag/') kann festgelegt werden,
    welche Einträge beim Aufbau der list-HTML States berücksichtigt werden.
    Bsp.:
    log0 Filter: "abfall" oder ":Abfall:" (=Kalendarname) -> Zeigt nur Abfalltermine
    log0 Filter: "ferien" oder ":Ferien:" (=Kalendarname) -> Zeigt nur Ferientermine

    Unter dem STATE_PATH (Standardpfad: 0_userdata.0.lovelace.showIcal) werden die folgenden States erzeugt:
    version : Script-Version, wird verwendet um Script-Updates zu erkennen
    updatePressed : auf true setzen, wenn ein table/list update außerhalb des Intervals erfolgen soll

    Weiterhin werden MAX_LOG_FOLDER Unterordner im STATE_PATH erzeugt (N=0-9):

    LogN.markdown : enthält die table-Markdown für die Nutzung in Lovelace
    LogN.table : enthält die table-HTML für ein basic-string (unescaped) Widget
    LogN.list : enthält die list-HTML für ein basic-string (unescaped) Widget
    LogN.count : Anzahl der Log-Zeilen (wenn das Log mit '/:error:|:warn:/' gefiltert ist, dann ist es die Anzahl der Fehler/Warnungen)
    LogN.filter : Filter, der auch die logCache angewendet wurde im .table/.list zu erzeugen (siehe Filter)
    LogN.lastUpdate : Timestamp des letzten Updates
    

    Skript

    LovelaceShowIcal.js

    N Offline
    N Offline
    nachon
    wrote on last edited by
    #4

    @Tirador
    Sehr coole Idee. Kann man das auch mit dem Adapter „calender“ verbinden?

    Der kann nämlich auf den Kalender meiner Nextcloud zugreifen, was iCal glaub ich nicht kann.

    GarfonsoG 1 Reply Last reply
    0
    • N nachon

      @Tirador
      Sehr coole Idee. Kann man das auch mit dem Adapter „calender“ verbinden?

      Der kann nämlich auf den Kalender meiner Nextcloud zugreifen, was iCal glaub ich nicht kann.

      GarfonsoG Offline
      GarfonsoG Offline
      Garfonso
      Developer
      wrote on last edited by
      #5

      @nachon said in [Vorlage] Lovelace: ical Kalender Karte:

      @Tirador
      Sehr coole Idee. Kann man das auch mit dem Adapter „calender“ verbinden?

      Der kann nämlich auf den Kalender meiner Nextcloud zugreifen, was iCal glaub ich nicht kann.

      ical geht für Anzeige von Nextcloud ohne Probleme. Einfach die Kalender-URLs aus Nextcloud in iCal als einzelne Kalender einfügen und Nutzer/Passwort eintragen.

      Ultimativer Lovelace Leitfaden: https://forum.iobroker.net/topic/35937/der-ultimative-iobroker-lovelace-leitfaden-dokumentation

      Lovelace UI Beispiele: https://forum.iobroker.net/topic/35950/zeigt-her-eure-lovelace-visualisierung

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

        Hallo Zusammen,

        ich habe das obere Skript nochmal aktualisiert. In der neuesten Lovelace Version gab es ein Problem mit dem Zeilenumbruch. Jetzt sieht die Struktur wieder wie eine Tabelle aus ;)

        1 Reply Last reply
        2
        • System 9S Offline
          System 9S Offline
          System 9
          wrote on last edited by System 9
          #7

          @tirador Hallo,

          bekommt man irgendwie diese Ansicht von MDCSS hin ?
          MduiShowIcal_Listview.gif

          D 1 Reply Last reply
          0
          • T Tirador

            Dieses Skript (am Ende des Beitrags) ermöglicht aus dem ICAL-Adapter eine Kalenderanzeige in Lovelace:

            b039eec7-df6c-4b37-bed0-7341657d53eb-grafik.png

            Das Skript basiert auf der Vorlage von Uhula:
            MDCSS v2: ical Kalendar anzeigen

            Das Script überwacht den ical-Adapter und erzeugt bei Änderungen an dessen States

            • HTML-List States für die Anzeige als Kalender in Listform mit
            • Markdown Datenpunkt für die Anzeige der Kalender in Lovelace

            Das Skript bietet im einzelnen folgende Funktionen:

            • Tagesauflösung von "von/bis"-Terminen, inkl. Berücksichtigung der Uhrzeiten
            • Tagesdatum, Kalendarfarben aus ical oder optional aus dem Script
            • Termintext und -ort
            • optionalem Icon je Kalendar
            • optionalem "ignore", wenn ein Kalendar unberücksichtigt bleiben soll

            Installation

            Einfach als serverseitiges Script installieren und starten-5 Sek warten-stoppen-starten. Beim 1.Start werden
            die notwendigen States unter STATE_PATH = '0_userdata.0.lovelace.showIcal.' erzeugt. Erst beim 2.Start
            instanziiert das Script die Event-Handler und läuft dann.

            In Lovelace ist eine "Markdown-Karte" einzufügen mit folgendem Code:

            f41b1297-dfca-4594-953c-fcede17fb59c-grafik.png

            YAML-Code

            type: markdown
            content: '{0_userdata.0.lovelace.showIcal.log0.markdown}'
            title: Kalender
            
            

            Konfiguration

            Eigentlich ist keine notwendig.
            Optional in der Funktion MduiShowIcal|doInit() eine Anpassung der KONFIGURATION vornehmen
            Optional Anpassung der tmpList.

            States

            Es werden States für n-Logs erzeugt, jedem, Log kann ein Standardfilter mitgegeben werden. In jedem Log-Ordner
            befindet sich ein list-HTML State, welcher direkt in der vis angezeigt werden kann (jeweils im basic-string (unescaped) Widget).
            Über optionale Filter als string (Bsp:':Abfall:') oder als RegExp (Bsp:'/Feiertag|Geburtstag/') kann festgelegt werden,
            welche Einträge beim Aufbau der list-HTML States berücksichtigt werden.
            Bsp.:
            log0 Filter: "abfall" oder ":Abfall:" (=Kalendarname) -> Zeigt nur Abfalltermine
            log0 Filter: "ferien" oder ":Ferien:" (=Kalendarname) -> Zeigt nur Ferientermine

            Unter dem STATE_PATH (Standardpfad: 0_userdata.0.lovelace.showIcal) werden die folgenden States erzeugt:
            version : Script-Version, wird verwendet um Script-Updates zu erkennen
            updatePressed : auf true setzen, wenn ein table/list update außerhalb des Intervals erfolgen soll

            Weiterhin werden MAX_LOG_FOLDER Unterordner im STATE_PATH erzeugt (N=0-9):

            LogN.markdown : enthält die table-Markdown für die Nutzung in Lovelace
            LogN.table : enthält die table-HTML für ein basic-string (unescaped) Widget
            LogN.list : enthält die list-HTML für ein basic-string (unescaped) Widget
            LogN.count : Anzahl der Log-Zeilen (wenn das Log mit '/:error:|:warn:/' gefiltert ist, dann ist es die Anzahl der Fehler/Warnungen)
            LogN.filter : Filter, der auch die logCache angewendet wurde im .table/.list zu erzeugen (siehe Filter)
            LogN.lastUpdate : Timestamp des letzten Updates
            

            Skript

            LovelaceShowIcal.js

            GarfonsoG Offline
            GarfonsoG Offline
            Garfonso
            Developer
            wrote on last edited by
            #8

            Zu dem Thema gibt es auch ein Update vom lovelace-adapter: man kann den Datenpunkt ical.0.data.table manuell als calendar entity definieren, dann funktioniert mit der aktuellen stable Version die in lovelace eingebaute Kalender-Karte.

            Aber die Karte/das Skript hier kann schon nochmal mehr, lovelace selber zeigt quasi nur an.

            Ultimativer Lovelace Leitfaden: https://forum.iobroker.net/topic/35937/der-ultimative-iobroker-lovelace-leitfaden-dokumentation

            Lovelace UI Beispiele: https://forum.iobroker.net/topic/35950/zeigt-her-eure-lovelace-visualisierung

            D 1 Reply Last reply
            0
            • T Tirador

              Dieses Skript (am Ende des Beitrags) ermöglicht aus dem ICAL-Adapter eine Kalenderanzeige in Lovelace:

              b039eec7-df6c-4b37-bed0-7341657d53eb-grafik.png

              Das Skript basiert auf der Vorlage von Uhula:
              MDCSS v2: ical Kalendar anzeigen

              Das Script überwacht den ical-Adapter und erzeugt bei Änderungen an dessen States

              • HTML-List States für die Anzeige als Kalender in Listform mit
              • Markdown Datenpunkt für die Anzeige der Kalender in Lovelace

              Das Skript bietet im einzelnen folgende Funktionen:

              • Tagesauflösung von "von/bis"-Terminen, inkl. Berücksichtigung der Uhrzeiten
              • Tagesdatum, Kalendarfarben aus ical oder optional aus dem Script
              • Termintext und -ort
              • optionalem Icon je Kalendar
              • optionalem "ignore", wenn ein Kalendar unberücksichtigt bleiben soll

              Installation

              Einfach als serverseitiges Script installieren und starten-5 Sek warten-stoppen-starten. Beim 1.Start werden
              die notwendigen States unter STATE_PATH = '0_userdata.0.lovelace.showIcal.' erzeugt. Erst beim 2.Start
              instanziiert das Script die Event-Handler und läuft dann.

              In Lovelace ist eine "Markdown-Karte" einzufügen mit folgendem Code:

              f41b1297-dfca-4594-953c-fcede17fb59c-grafik.png

              YAML-Code

              type: markdown
              content: '{0_userdata.0.lovelace.showIcal.log0.markdown}'
              title: Kalender
              
              

              Konfiguration

              Eigentlich ist keine notwendig.
              Optional in der Funktion MduiShowIcal|doInit() eine Anpassung der KONFIGURATION vornehmen
              Optional Anpassung der tmpList.

              States

              Es werden States für n-Logs erzeugt, jedem, Log kann ein Standardfilter mitgegeben werden. In jedem Log-Ordner
              befindet sich ein list-HTML State, welcher direkt in der vis angezeigt werden kann (jeweils im basic-string (unescaped) Widget).
              Über optionale Filter als string (Bsp:':Abfall:') oder als RegExp (Bsp:'/Feiertag|Geburtstag/') kann festgelegt werden,
              welche Einträge beim Aufbau der list-HTML States berücksichtigt werden.
              Bsp.:
              log0 Filter: "abfall" oder ":Abfall:" (=Kalendarname) -> Zeigt nur Abfalltermine
              log0 Filter: "ferien" oder ":Ferien:" (=Kalendarname) -> Zeigt nur Ferientermine

              Unter dem STATE_PATH (Standardpfad: 0_userdata.0.lovelace.showIcal) werden die folgenden States erzeugt:
              version : Script-Version, wird verwendet um Script-Updates zu erkennen
              updatePressed : auf true setzen, wenn ein table/list update außerhalb des Intervals erfolgen soll

              Weiterhin werden MAX_LOG_FOLDER Unterordner im STATE_PATH erzeugt (N=0-9):

              LogN.markdown : enthält die table-Markdown für die Nutzung in Lovelace
              LogN.table : enthält die table-HTML für ein basic-string (unescaped) Widget
              LogN.list : enthält die list-HTML für ein basic-string (unescaped) Widget
              LogN.count : Anzahl der Log-Zeilen (wenn das Log mit '/:error:|:warn:/' gefiltert ist, dann ist es die Anzahl der Fehler/Warnungen)
              LogN.filter : Filter, der auch die logCache angewendet wurde im .table/.list zu erzeugen (siehe Filter)
              LogN.lastUpdate : Timestamp des letzten Updates
              

              Skript

              LovelaceShowIcal.js

              D Offline
              D Offline
              Der Nordmann
              wrote on last edited by
              #9

              @tirador sagte in [Vorlage] Lovelace: ical Kalender Karte:

              Installation
              Einfach als serverseitiges Script installieren ....

              Hallo zusammen!
              Auf die Gefahr, dass ich mich vollkommen blamiere, aber wie mache ich das "ein serverseitiges Script installieren"?
              Gebt einem Newbie mal bitte ein paar Tipps, so Schritt für Schritt 😧

              GarfonsoG 1 Reply Last reply
              0
              • D Der Nordmann

                @tirador sagte in [Vorlage] Lovelace: ical Kalender Karte:

                Installation
                Einfach als serverseitiges Script installieren ....

                Hallo zusammen!
                Auf die Gefahr, dass ich mich vollkommen blamiere, aber wie mache ich das "ein serverseitiges Script installieren"?
                Gebt einem Newbie mal bitte ein paar Tipps, so Schritt für Schritt 😧

                GarfonsoG Offline
                GarfonsoG Offline
                Garfonso
                Developer
                wrote on last edited by
                #10

                @der-nordmann said in [Vorlage] Lovelace: ical Kalender Karte:

                Auf die Gefahr, dass ich mich vollkommen blamiere, aber wie mache ich das "ein serverseitiges Script installieren"?
                Gebt einem Newbie mal bitte ein paar Tipps, so Schritt für Schritt

                Du hast den Javascript Adapter installiert (sollte) und siehst im Admin links den Punkt "Javascript", da klicken, mit dem "+" oben ein neues Skript anlegen, Namen eingeben, Javascript auswählen, dann alles was oben in der angehängten ".js"-Datei steht da reinkopieren, speichern, noch starten (falls das drum herum alles passt, i.e. states da sind und skript angepasst usw.).

                (ggf. vor dem Anlegen des Skripts im Javascript Adapter ne Struktur bauen, sonst findest du irgendwann nix mehr wieder ;-) )

                Ultimativer Lovelace Leitfaden: https://forum.iobroker.net/topic/35937/der-ultimative-iobroker-lovelace-leitfaden-dokumentation

                Lovelace UI Beispiele: https://forum.iobroker.net/topic/35950/zeigt-her-eure-lovelace-visualisierung

                D 1 Reply Last reply
                0
                • GarfonsoG Garfonso

                  @der-nordmann said in [Vorlage] Lovelace: ical Kalender Karte:

                  Auf die Gefahr, dass ich mich vollkommen blamiere, aber wie mache ich das "ein serverseitiges Script installieren"?
                  Gebt einem Newbie mal bitte ein paar Tipps, so Schritt für Schritt

                  Du hast den Javascript Adapter installiert (sollte) und siehst im Admin links den Punkt "Javascript", da klicken, mit dem "+" oben ein neues Skript anlegen, Namen eingeben, Javascript auswählen, dann alles was oben in der angehängten ".js"-Datei steht da reinkopieren, speichern, noch starten (falls das drum herum alles passt, i.e. states da sind und skript angepasst usw.).

                  (ggf. vor dem Anlegen des Skripts im Javascript Adapter ne Struktur bauen, sonst findest du irgendwann nix mehr wieder ;-) )

                  D Offline
                  D Offline
                  Der Nordmann
                  wrote on last edited by
                  #11

                  @garfonso das hat schon mal funktioniert! Danke für die hilfe!

                  1 Reply Last reply
                  1
                  • GarfonsoG Garfonso

                    Zu dem Thema gibt es auch ein Update vom lovelace-adapter: man kann den Datenpunkt ical.0.data.table manuell als calendar entity definieren, dann funktioniert mit der aktuellen stable Version die in lovelace eingebaute Kalender-Karte.

                    Aber die Karte/das Skript hier kann schon nochmal mehr, lovelace selber zeigt quasi nur an.

                    D Offline
                    D Offline
                    Der Nordmann
                    wrote on last edited by Der Nordmann
                    #12

                    @garfonso sagte in [Vorlage] Lovelace: ical Kalender Karte:

                    Zu dem Thema gibt es auch ein Update vom lovelace-adapter: man kann den Datenpunkt ical.0.data.table manuell als calendar entity definieren, dann funktioniert mit der aktuellen stable Version die in lovelace eingebaute Kalender-Karte.

                    Aber die Karte/das Skript hier kann schon nochmal mehr, lovelace selber zeigt quasi nur an.

                    Dieser Punkt hat sich erledigt - habe es bis hierhin kappoert!

                    1 Reply Last reply
                    0
                    • System 9S System 9

                      @tirador Hallo,

                      bekommt man irgendwie diese Ansicht von MDCSS hin ?
                      MduiShowIcal_Listview.gif

                      D Offline
                      D Offline
                      Der Nordmann
                      wrote on last edited by Der Nordmann
                      #13

                      @system-9 sagte in [Vorlage] Lovelace: ical Kalender Karte:

                      @tirador Hallo,

                      bekommt man irgendwie diese Ansicht von MDCSS hin ?
                      MduiShowIcal_Listview.gif

                      Kann mir hier jemand helfen - ich bekomme beim besten Willen diese Darstellung nicht hin.
                      Was muss ich hier (step by step) machen, damit ich diese Darstellung erhalte?
                      Wo muss ich denn die json Dateien hin kopieren?

                      GarfonsoG 1 Reply Last reply
                      0
                      • D Der Nordmann

                        @system-9 sagte in [Vorlage] Lovelace: ical Kalender Karte:

                        @tirador Hallo,

                        bekommt man irgendwie diese Ansicht von MDCSS hin ?
                        MduiShowIcal_Listview.gif

                        Kann mir hier jemand helfen - ich bekomme beim besten Willen diese Darstellung nicht hin.
                        Was muss ich hier (step by step) machen, damit ich diese Darstellung erhalte?
                        Wo muss ich denn die json Dateien hin kopieren?

                        GarfonsoG Offline
                        GarfonsoG Offline
                        Garfonso
                        Developer
                        wrote on last edited by
                        #14

                        @der-nordmann
                        das wirst du in markdown programmieren müssen... das ist hier im Thread nicht erklärt bzw hat AFAIK noch keiner gemacht, siehe Screenshot im ersten Post.

                        Ultimativer Lovelace Leitfaden: https://forum.iobroker.net/topic/35937/der-ultimative-iobroker-lovelace-leitfaden-dokumentation

                        Lovelace UI Beispiele: https://forum.iobroker.net/topic/35950/zeigt-her-eure-lovelace-visualisierung

                        1 Reply Last reply
                        0

                        Hello! It looks like you're interested in this conversation, but you don't have an account yet.

                        Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

                        With your input, this post could be even better 💗

                        Register Login
                        Reply
                        • Reply as topic
                        Log in to reply
                        • Oldest to Newest
                        • Newest to Oldest
                        • Most Votes


                        Support us

                        ioBroker
                        Community Adapters
                        Donate

                        521

                        Online

                        32.8k

                        Users

                        82.7k

                        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