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

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. [Vorlage] Lovelace: ical Kalender Karte

NEWS

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

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

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.0k

[Vorlage] Lovelace: ical Kalender Karte

Geplant Angeheftet Gesperrt Verschoben Visualisierung
own projecttemplate
14 Beiträge 6 Kommentatoren 3.1k Aufrufe 7 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.
  • 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
    schrieb am zuletzt editiert von
    #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 Antwort Letzte Antwort
    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
      schrieb am zuletzt editiert von
      #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 Antwort Letzte Antwort
      0
      • T Offline
        T Offline
        Tirador
        schrieb am zuletzt editiert von
        #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 Antwort Letzte Antwort
        2
        • System 9S Offline
          System 9S Offline
          System 9
          schrieb am zuletzt editiert von System 9
          #7

          @tirador Hallo,

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

          D 1 Antwort Letzte Antwort
          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
            schrieb am zuletzt editiert von
            #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 Antwort Letzte Antwort
            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
              schrieb am zuletzt editiert von
              #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 :anguished:

              GarfonsoG 1 Antwort Letzte Antwort
              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 :anguished:

                GarfonsoG Offline
                GarfonsoG Offline
                Garfonso
                Developer
                schrieb am zuletzt editiert von
                #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 Antwort Letzte Antwort
                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
                  schrieb am zuletzt editiert von
                  #11

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

                  1 Antwort Letzte Antwort
                  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
                    schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                    0
                    • System 9S System 9

                      @tirador Hallo,

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

                      D Offline
                      D Offline
                      Der Nordmann
                      schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                      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
                        schrieb am zuletzt editiert von
                        #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 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

                        653

                        Online

                        32.6k

                        Benutzer

                        82.0k

                        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