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

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

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

                      378

                      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