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. Material Design Widgets: Calendar Widget

NEWS

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

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

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.2k

Material Design Widgets: Calendar Widget

Scheduled Pinned Locked Moved Visualisierung
vis
200 Posts 45 Posters 38.1k Views 52 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.
  • Damrak2022D Damrak2022

    @tt-tom Ich habe das jetzt nochmal verglichen. Das sind die Daten, welche unter javascript drinstehen
    Bildschirmfoto 2022-07-20 um 09.36.12.png
    Bildschirmfoto 2022-07-20 um 09.35.52.png

    Und das sind die Daten aus dem json Table direkt aus dem ical Adapter:
    Bildschirmfoto 2022-07-20 um 09.40.56.png

    Wen ich das richtig sehe ist da ja schon eine große Diskrepanz

    Und so mager sieht mein Kalender aus:
    Bildschirmfoto 2022-07-20 um 09.44.17.png

    T Offline
    T Offline
    TT-Tom
    wrote on last edited by
    #176

    @damrak2022

    Bitte keine Screenshot schwer zu lesen und man kann die Daten schlecht vergleichen. Bitte in Code-Tags einfügen.

    Gruß Tom
    https://github.com/tt-tom17
    Wenn meine Hilfe erfolgreich war, benutze bitte das Voting unten rechts im Beitrag

    NSPanel Script Wiki
    https://github.com/joBr99/nspanel-lovelace-ui/wiki

    NSPanel Adapter Wiki
    https://github.com/ticaki/ioBroker.nspanel-lovelace-ui/wiki

    A 1 Reply Last reply
    0
    • T TT-Tom

      @damrak2022

      Bitte keine Screenshot schwer zu lesen und man kann die Daten schlecht vergleichen. Bitte in Code-Tags einfügen.

      A Offline
      A Offline
      alexmi
      wrote on last edited by
      #177

      @tt-tom Hallo zusammen,
      ich habe das Script am laufen, funktioniert soweit auch alles super.

      Jedoch werden keine Vergangenen Termine angezeit, die z.B. nur von 08:00-09:00 Uhr eingetragen sind. Ganztagestermine werden auch für die vergangenen Tage angezeigt.
      Kann man das irgendwo einstellen?

      1 Reply Last reply
      0
      • rtwlR Offline
        rtwlR Offline
        rtwl
        wrote on last edited by
        #178

        Danke für das Widget! Es ist wirklich hervorragend Umgesetzt.
        Aktuell hab ich nur einen "Kritikpunkt":
        Wenn man von rechts nach links wischt würde ich mir das nächste Monat/Woche/Tag erwarten, doch leider "geht" es zurück in der Zeitachse.
        Kann man das in den Einstellungen irgendwo umkehren? oder eventuell per CSS?

        -Peter

        1 Reply Last reply
        0
        • rtwlR Offline
          rtwlR Offline
          rtwl
          wrote on last edited by
          #179

          ist es möglich das Wort "anzeigen" aus der Steuerungsleiste zu entfernen?

          5336e2c2-def1-4245-b54a-24b52cce3b31-image.png

          -Peter

          1 Reply Last reply
          0
          • rtwlR Offline
            rtwlR Offline
            rtwl
            wrote on last edited by rtwl
            #180

            Auch wenn Frage 1 und 2 bisher noch keine Antwort erhalten hat, versuche ich noch eine dritte Frage zu stellen:

            Hin und wieder wird der Kalender nicht korrekt geladen, also die hinterlegten Farben (Ja, sie sind in der Adapter Instanz eingestellt) werden nicht geladen.
            Bei Frage 2 (direkt über diesem Post) sieht man wie das Design sein soll, doch es kommt eben das:
            19ad226d-e72b-4757-a395-7d6c2dd5c5f5-image.png

            -Peter

            O 1 Reply Last reply
            0
            • rtwlR rtwl

              Auch wenn Frage 1 und 2 bisher noch keine Antwort erhalten hat, versuche ich noch eine dritte Frage zu stellen:

              Hin und wieder wird der Kalender nicht korrekt geladen, also die hinterlegten Farben (Ja, sie sind in der Adapter Instanz eingestellt) werden nicht geladen.
              Bei Frage 2 (direkt über diesem Post) sieht man wie das Design sein soll, doch es kommt eben das:
              19ad226d-e72b-4757-a395-7d6c2dd5c5f5-image.png

              O Online
              O Online
              Oli
              wrote on last edited by
              #181

              @rtwl
              Ich hatte das gleiche Problem, habe dann die Farben direkt im Widget eingegeben. Seitdem funktioniert es.

              Gruß
              Oliver

              1 Reply Last reply
              1
              • Curtis777C Offline
                Curtis777C Offline
                Curtis777
                wrote on last edited by Curtis777
                #182

                Ich habe das Problem das das Plugin mir nicht einmal eine einstellungsoption gibt siehe Screenshot.
                Kann mit dem Link nur in die Vis wechseln.

                Edit: nach neu installieren ist alles da, im Chrome Browser wird mir der KAlender angezeigt in der Wallpanel APP auf meinem Tablet nicht!

                Screenshot_2023-03-03-22-18-18-64_40deb401b9ffe8e1df2f1cc5ba480b12.jpg

                Curtis777C 1 Reply Last reply
                0
                • Curtis777C Curtis777

                  Ich habe das Problem das das Plugin mir nicht einmal eine einstellungsoption gibt siehe Screenshot.
                  Kann mit dem Link nur in die Vis wechseln.

                  Edit: nach neu installieren ist alles da, im Chrome Browser wird mir der KAlender angezeigt in der Wallpanel APP auf meinem Tablet nicht!

                  Screenshot_2023-03-03-22-18-18-64_40deb401b9ffe8e1df2f1cc5ba480b12.jpg

                  Curtis777C Offline
                  Curtis777C Offline
                  Curtis777
                  wrote on last edited by Curtis777
                  #183

                  @curtis777
                  I'm chrome browser wird der Kalender angezeigt.
                  In der Wallpanel APP sowie fully browser nicht.

                  EDIT: anscheinend werden ALLE aus der Reihe nicht angezeigt auf den Apps!
                  Im Chrome schon!
                  IMG_20230304_110033_357.jpg IMG_20230304_110036_607.jpg

                  1 Reply Last reply
                  0
                  • Curtis777C Offline
                    Curtis777C Offline
                    Curtis777
                    wrote on last edited by
                    #184

                    Liebe Alle,

                    Ich habe ein Android 7 Tablet leider bekomme ich hier keine google dienste drauf um alles aktuell zu halten.
                    somit habe ich Wallpanel per apk installiert.

                    Der Kalender wurde von mir eingebaut in die VIS und lässt sich auch im Chrome Browser auf dem Tablet und jedem pc usw aufrufen.
                    Jedoch in der Wallpanel ist der Kalender einfach nicht da.

                    Hat jemand eine Idee / einen Lösungsansatz woran das liegen kann bzw wie ich das behebe ?

                    1 Reply Last reply
                    0
                    • J Offline
                      J Offline
                      jwerlsdf
                      wrote on last edited by
                      #185

                      Hallo,
                      folgender Inhalt im Datenpunkt habe ich:

                      [{"name":"Reserved","start":"2023-07-20","end":"2023-07-28"},{"name":"Reserved","start":"2023-08-04","end":"2023-08-13"}]

                      Hier sind also zwei Zeiträume. Normalerweise müsste doch jetzt im Kalender über diese Tage ein langer Balken gehen. Das funktioniert aber leider nicht. Ich sehe nur am 20.07 bzw. am 04.08. ein "1 more". Was muss ich einstellen, damit es funktioniert?

                      1 Reply Last reply
                      0
                      • G Offline
                        G Offline
                        grazer2500
                        wrote on last edited by grazer2500
                        #186

                        Hallo,
                        Ich habe das material design widget und den ical Adapter installiert.
                        Und auch soweit konfiguriert.
                        Im ical Adapter werden alle Termine angezeigt. Aber bei der Visualisierung im material design calendar widget mit dem Script werden mir nicht alle Termine angezeigt.

                        Welche Informationen braucht ihr um das nachzuvollziehen?

                        // momentjs is required as dependecies in javascript adapter
                        const moment = require("moment");
                        
                        var instances = $(`[id=ical.*.data.table]`);
                        instances.on(ical2CalendarWidget);
                        
                        // remove this, if you know to use your own datapoint
                        let datapointId = 'materialdesignwidgets.calendar.ical2calendar'
                        createState(datapointId, "[]", {
                          read: true, 
                          write: false, 
                          desc: "JSON String for Calendar Widget", 
                          type: "string", 
                          def: "[]"
                        });
                        
                        function ical2CalendarWidget() {
                            try {
                                let calList = [];
                        
                                for (var inst = 0; inst <= instances.length - 1; inst++) {
                                    let icalObj = getState(instances[inst]).val;
                        
                                    if (icalObj) {
                                        for (var i = 0; i <= icalObj.length - 1; i++) {
                                            let item = icalObj[i];
                        
                                            // extract calendar color
                                            let calendarName = item._class.split(' ')[0].replace('ical_', '');
                        
                                            let startTime = moment(item._date);
                                            let endTime = moment(item._end);
                                            
                                            let start = startTime.format("YYYY-MM-DD HH:mm");
                                            let end = endTime.format("YYYY-MM-DD HH:mm");
                        
                                            if (startTime.format('HH:mm') === '00:00' && endTime.format('HH:mm') === '00:00') {
                                                // is full-day event
                                                if (endTime.diff(startTime, 'hours') === 24) {
                                                    // full-day event, one day
                                                    start = startTime.format("YYYY-MM-DD");
                                                    end = startTime.format("YYYY-MM-DD");
                                                } else {
                                                    // full-day event, multiple days
                                                    start = startTime.format("YYYY-MM-DD");
                                                    end = endTime.format("YYYY-MM-DD");
                                                }
                                            }
                        
                                            // create object for calendar widget
                                            calList.push({
                                                name: item.event,
                                                color: getMyCalendarColor(calendarName),
                                                colorText: getMyCalendarTextColor(calendarName),
                                                start: start,
                                                end: end
                                            })
                                        }
                        
                                        function getMyCalendarColor(calendarName) {
                                            // assign colors via the calendar names, use calendar name as set in ical
                                            if (calendarName === 'calendar1') {
                                                return '#FF0000';
                                            } else if (calendarName === 'calendar2') {
                                                return '#44739e'
                                            } else if (calendarName === 'calendar3') {
                                                return '#32a852'
                                            }
                                        }
                        
                                        function getMyCalendarTextColor(calendarName) {
                                            // assign colors via the calendar names, use calendar name as set in ical
                                            if (calendarName === 'calendar1') {
                                                return '#FFFFFF';
                                            } else if (calendarName === 'calendar2') {
                                                return '#FFFFFF'
                                            } else if (calendarName === 'calendar3') {
                                                return '#FFFFFF'
                                            }
                                        }
                                    }
                        
                                    // Enter the destination data point that is to be used as object ID in the widget                
                                    setState(datapointId, JSON.stringify(calList), true);
                                }
                            } catch (e) {
                                console.error(`ical2MaterialDesignCalendarWidget: message: ${e.message}, stack: ${e.stack}`);
                            }
                        }
                        
                        ical2CalendarWidget();
                        

                        Habe alle Termine zensiert, sollte aber erkennbar sein das viele fehlen

                        Bildschirmfoto vom 2023-11-29 10-06-54.png Bildschirmfoto vom 2023-11-29 10-07-21.png Bildschirmfoto vom 2023-11-29 10-07-08.png

                        1 Reply Last reply
                        0
                        • S Offline
                          S Offline
                          strika77
                          wrote on last edited by
                          #187

                          Hallo zusammen.
                          Ich bin neu hier im Forum als auch im Bereich von ioBroker:blush:
                          Hätte eine Frage bezüglich des Widget Calendar. Und zwar bekomme ich das nicht wirklich hin das sich meine Termine Farblich darstellen. Hab es schon versucht im Widget mit dem Skript color .... aber irgendwie bekomme ich es nicht hin.
                          Hätte jemand vielleicht einen nützlichen tip für mich..

                          Vielen dank schon mal im voraus!

                          1 Reply Last reply
                          0
                          • R Offline
                            R Offline
                            ReiTi
                            wrote on last edited by
                            #188

                            Hallo zusammen,

                            ich habe verschiedene Kalender, die ich über Schaltflächen ein- und ausblenden möchte. Ist das mit einer Instanz möglich? Und wo kann man das einstellen?
                            Ansonsten müsste ich für jeden Kalender eine eigene Instanz erstellen und dafür dann je nachdem, welchen Kalender ich anzeigen möchte (oder in welcher Kombination...? :thinking_face: ) einen anderen in der vis anzeigen. Klingt kompliziert, da gibt es doch bestimmt was Einfacheres.

                            Danke und Gruß Timo

                            1 Reply Last reply
                            0
                            • jojo regneupJ Offline
                              jojo regneupJ Offline
                              jojo regneup
                              wrote on last edited by jojo regneup
                              #189

                              Hi, Ich hab mal ne ganz simple Frage. Ich versuche gerade das Widget bei mir einzurichten, aber ich kriege es einfach nicht hin, mit dem Skript den Datenpunkt zu erstellen. Mir werden in den Protokollen immer folgende Fehler angezeigt:
                              9083b125-207c-4758-803d-d09ec343cef0-image.png
                              Bin gerade ziemlich hilflos. Hat eventuell jemand einen Tipp, wie ich den Datenpunkt erstellen kann?

                              Das wäre wirklich super. Vielen Dank schonmal im Voraus

                              sigi234S 1 Reply Last reply
                              0
                              • jojo regneupJ jojo regneup

                                Hi, Ich hab mal ne ganz simple Frage. Ich versuche gerade das Widget bei mir einzurichten, aber ich kriege es einfach nicht hin, mit dem Skript den Datenpunkt zu erstellen. Mir werden in den Protokollen immer folgende Fehler angezeigt:
                                9083b125-207c-4758-803d-d09ec343cef0-image.png
                                Bin gerade ziemlich hilflos. Hat eventuell jemand einen Tipp, wie ich den Datenpunkt erstellen kann?

                                Das wäre wirklich super. Vielen Dank schonmal im Voraus

                                sigi234S Online
                                sigi234S Online
                                sigi234
                                Forum Testing Most Active
                                wrote on last edited by
                                #190

                                @jojo-regneup

                                Zeig mal dein Skript in Code Tags

                                Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                                Immer Daten sichern!

                                jojo regneupJ 1 Reply Last reply
                                0
                                • sigi234S sigi234

                                  @jojo-regneup

                                  Zeig mal dein Skript in Code Tags

                                  jojo regneupJ Offline
                                  jojo regneupJ Offline
                                  jojo regneup
                                  wrote on last edited by jojo regneup
                                  #191

                                  @sigi234
                                  Mein Skript sieht wie folgt aus:

                                  // momentjs is required as dependecies in javascript adapter
                                  const moment = require("moment");
                                  
                                  var instances = $(`[id=ical.*.data.table]`);
                                  instances.on(ical2CalendarWidget);
                                  
                                  // remove this, if you know to use your own datapoint
                                  let datapointId = 'materialdesignwidgets.calendar.ical2calendar'
                                  createState(datapointId, "[]", {
                                    read: true, 
                                    write: false, 
                                    desc: "JSON String for Calendar Widget", 
                                    type: "string", 
                                    def: "[]"
                                  });
                                  
                                  function ical2CalendarWidget() {
                                      try {
                                          let calList = [];
                                  
                                          for (var inst = 0; inst <= instances.length - 1; inst++) {
                                              let icalObj = getState(instances[inst]).val;
                                  
                                              if (icalObj) {
                                                  for (var i = 0; i <= icalObj.length - 1; i++) {
                                                      let item = icalObj[i];
                                  
                                                      // extract calendar color
                                                      let calendarName = item._class.split(' ')[0].replace('ical_', '');
                                  
                                                      let startTime = moment(item._date);
                                                      let endTime = moment(item._end);
                                                      
                                                      let start = startTime.format("YYYY-MM-DD HH:mm");
                                                      let end = endTime.format("YYYY-MM-DD HH:mm");
                                  
                                                      if (startTime.format('HH:mm') === '00:00' && endTime.format('HH:mm') === '00:00') {
                                                          // is full-day event
                                                          if (endTime.diff(startTime, 'hours') === 24) {
                                                              // full-day event, one day
                                                              start = startTime.format("YYYY-MM-DD");
                                                              end = startTime.format("YYYY-MM-DD");
                                                          } else {
                                                              // full-day event, multiple days
                                                              start = startTime.format("YYYY-MM-DD");
                                                              end = endTime.format("YYYY-MM-DD");
                                                          }
                                                      }
                                  
                                                      // create object for calendar widget
                                                      calList.push({
                                                          name: item.event,
                                                          color: getMyCalendarColor(calendarName),
                                                          colorText: getMyCalendarTextColor(calendarName),
                                                          start: start,
                                                          end: end
                                                      })
                                                  }
                                  
                                                  function getMyCalendarColor(calendarName) {
                                                      // assign colors via the calendar names, use calendar name as set in ical
                                                      if (calendarName === 'calendar1') {
                                                          return '#FF0000';
                                                      } else if (calendarName === 'calendar2') {
                                                          return '#44739e'
                                                      } else if (calendarName === 'calendar3') {
                                                          return '#32a852'
                                                      }
                                                  }
                                  
                                                  function getMyCalendarTextColor(calendarName) {
                                                      // assign colors via the calendar names, use calendar name as set in ical
                                                      if (calendarName === 'calendar1') {
                                                          return '#FFFFFF';
                                                      } else if (calendarName === 'calendar2') {
                                                          return '#FFFFFF'
                                                      } else if (calendarName === 'calendar3') {
                                                          return '#FFFFFF'
                                                      }
                                                  }
                                              }
                                  
                                              // Enter the destination data point that is to be used as object ID in the widget                
                                              setState('0_userdata.0.ical2Calendar', JSON.stringify(calList), true);
                                          }
                                      } catch (e) {
                                          console.error(`ical2MaterialDesignCalendarWidget: message: ${e.message}, stack: ${e.stack}`);
                                      }
                                  }
                                  
                                  ical2CalendarWidget();
                                  

                                  Ich habe mir dieses einfach aus den Docs von Github entnommen. Weiß aber nicht genau, ob ich da jetzt noch was ändern muss.

                                  sigi234S 1 Reply Last reply
                                  0
                                  • jojo regneupJ jojo regneup

                                    @sigi234
                                    Mein Skript sieht wie folgt aus:

                                    // momentjs is required as dependecies in javascript adapter
                                    const moment = require("moment");
                                    
                                    var instances = $(`[id=ical.*.data.table]`);
                                    instances.on(ical2CalendarWidget);
                                    
                                    // remove this, if you know to use your own datapoint
                                    let datapointId = 'materialdesignwidgets.calendar.ical2calendar'
                                    createState(datapointId, "[]", {
                                      read: true, 
                                      write: false, 
                                      desc: "JSON String for Calendar Widget", 
                                      type: "string", 
                                      def: "[]"
                                    });
                                    
                                    function ical2CalendarWidget() {
                                        try {
                                            let calList = [];
                                    
                                            for (var inst = 0; inst <= instances.length - 1; inst++) {
                                                let icalObj = getState(instances[inst]).val;
                                    
                                                if (icalObj) {
                                                    for (var i = 0; i <= icalObj.length - 1; i++) {
                                                        let item = icalObj[i];
                                    
                                                        // extract calendar color
                                                        let calendarName = item._class.split(' ')[0].replace('ical_', '');
                                    
                                                        let startTime = moment(item._date);
                                                        let endTime = moment(item._end);
                                                        
                                                        let start = startTime.format("YYYY-MM-DD HH:mm");
                                                        let end = endTime.format("YYYY-MM-DD HH:mm");
                                    
                                                        if (startTime.format('HH:mm') === '00:00' && endTime.format('HH:mm') === '00:00') {
                                                            // is full-day event
                                                            if (endTime.diff(startTime, 'hours') === 24) {
                                                                // full-day event, one day
                                                                start = startTime.format("YYYY-MM-DD");
                                                                end = startTime.format("YYYY-MM-DD");
                                                            } else {
                                                                // full-day event, multiple days
                                                                start = startTime.format("YYYY-MM-DD");
                                                                end = endTime.format("YYYY-MM-DD");
                                                            }
                                                        }
                                    
                                                        // create object for calendar widget
                                                        calList.push({
                                                            name: item.event,
                                                            color: getMyCalendarColor(calendarName),
                                                            colorText: getMyCalendarTextColor(calendarName),
                                                            start: start,
                                                            end: end
                                                        })
                                                    }
                                    
                                                    function getMyCalendarColor(calendarName) {
                                                        // assign colors via the calendar names, use calendar name as set in ical
                                                        if (calendarName === 'calendar1') {
                                                            return '#FF0000';
                                                        } else if (calendarName === 'calendar2') {
                                                            return '#44739e'
                                                        } else if (calendarName === 'calendar3') {
                                                            return '#32a852'
                                                        }
                                                    }
                                    
                                                    function getMyCalendarTextColor(calendarName) {
                                                        // assign colors via the calendar names, use calendar name as set in ical
                                                        if (calendarName === 'calendar1') {
                                                            return '#FFFFFF';
                                                        } else if (calendarName === 'calendar2') {
                                                            return '#FFFFFF'
                                                        } else if (calendarName === 'calendar3') {
                                                            return '#FFFFFF'
                                                        }
                                                    }
                                                }
                                    
                                                // Enter the destination data point that is to be used as object ID in the widget                
                                                setState('0_userdata.0.ical2Calendar', JSON.stringify(calList), true);
                                            }
                                        } catch (e) {
                                            console.error(`ical2MaterialDesignCalendarWidget: message: ${e.message}, stack: ${e.stack}`);
                                        }
                                    }
                                    
                                    ical2CalendarWidget();
                                    

                                    Ich habe mir dieses einfach aus den Docs von Github entnommen. Weiß aber nicht genau, ob ich da jetzt noch was ändern muss.

                                    sigi234S Online
                                    sigi234S Online
                                    sigi234
                                    Forum Testing Most Active
                                    wrote on last edited by sigi234
                                    #192

                                    @jojo-regneup

                                    Das ist meines was funktioniert:

                                    // momentjs is required as dependecies in javascript adapter
                                    const moment = require("moment");
                                     
                                    var instances = $(`[id=ical.*.data.table]`);
                                    instances.on(ical2CalendarWidget);
                                     
                                     
                                    // remove this, if you know to use your own datapoint
                                    let datapointId = 'materialdesignwidgets.calendar.ical0calendar'
                                    createState(datapointId, "[]", {
                                      read: true, 
                                      write: false, 
                                      desc: "JSON String for Calendar Widget", 
                                      type: "string", 
                                      def: "[]"
                                    });
                                     
                                    function ical2CalendarWidget() {
                                        try {
                                            let calList = [];
                                     
                                            for (var inst = 0; inst <= instances.length - 1; inst++) {
                                                let icalObj = getState(instances[inst]).val;
                                     
                                                if (icalObj) {
                                                    for (var i = 0; i <= icalObj.length - 1; i++) {
                                                        let item = icalObj[i];
                                     
                                                        // extract calendar color
                                                        let calendarName = item._class.split(' ')[0].replace('ical_', '');
                                     
                                                        let startTime = moment(item._date);
                                                        let endTime = moment(item._end);
                                                        
                                                        let start = startTime.format("YYYY-MM-DD HH:mm");
                                                        let end = endTime.format("YYYY-MM-DD HH:mm");
                                     
                                                        if (startTime.format('HH:mm') === '00:00' && endTime.format('HH:mm') === '00:00') {
                                                            // is full-day event
                                                            if (endTime.diff(startTime, 'hours') === 24) {
                                                                // full-day event, one day
                                                                start = startTime.format("YYYY-MM-DD");
                                                                end = startTime.format("YYYY-MM-DD");
                                                            } else {
                                                                // full-day event, multiple days
                                                                start = startTime.format("YYYY-MM-DD");
                                                                end = endTime.format("YYYY-MM-DD");
                                                            }
                                                        }
                                     
                                                        // create object for calendar widget
                                                        calList.push({
                                                            name: item.event,
                                                            color: getMyCalendarColor(calendarName),
                                                            colorText: getMyCalendarTextColor(calendarName),
                                                            start: start,
                                                            end: end
                                                        })
                                                    }
                                     
                                                    function getMyCalendarColor(calendarName) {
                                                        // assign colors via the calendar names, use calendar name as set in ical
                                                        if (calendarName === 'Sigi') {
                                                            return '#0094ff';
                                                        } else if (calendarName === 'Geburtstage') {
                                                            return '#ff9214'
                                                        } else if (calendarName === 'Abfall Neuhofen') {
                                                            return '#0094ff'
                                                        }
                                                    }
                                    
                                                    function getMyCalendarTextColor(calendarName) {
                                                        // assign colors via the calendar names, use calendar name as set in ical
                                                        if (calendarName === 'Sigi') {
                                                            return '#FFFFFF';
                                                        } else if (calendarName === 'Geburtstage') {
                                                            return '#FFFFFF'
                                                        } else if (calendarName === 'Abfall Neuhofen') {
                                                            return '#FFFFFF'
                                                        }
                                                    }
                                                }
                                     
                                                // Enter the destination data point that is to be used as object ID in the widget                
                                                setState(datapointId, JSON.stringify(calList), true);
                                            }
                                        } catch (e) {
                                            console.error(`ical2MaterialDesignCalendarWidget: message: ${e.message}, stack: ${e.stack}`);
                                        }
                                    }
                                     
                                    ical2CalendarWidget();
                                    

                                    calendarName musst du natürlich an deine anpassen

                                    Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                                    Immer Daten sichern!

                                    jojo regneupJ 1 Reply Last reply
                                    0
                                    • sigi234S sigi234

                                      @jojo-regneup

                                      Das ist meines was funktioniert:

                                      // momentjs is required as dependecies in javascript adapter
                                      const moment = require("moment");
                                       
                                      var instances = $(`[id=ical.*.data.table]`);
                                      instances.on(ical2CalendarWidget);
                                       
                                       
                                      // remove this, if you know to use your own datapoint
                                      let datapointId = 'materialdesignwidgets.calendar.ical0calendar'
                                      createState(datapointId, "[]", {
                                        read: true, 
                                        write: false, 
                                        desc: "JSON String for Calendar Widget", 
                                        type: "string", 
                                        def: "[]"
                                      });
                                       
                                      function ical2CalendarWidget() {
                                          try {
                                              let calList = [];
                                       
                                              for (var inst = 0; inst <= instances.length - 1; inst++) {
                                                  let icalObj = getState(instances[inst]).val;
                                       
                                                  if (icalObj) {
                                                      for (var i = 0; i <= icalObj.length - 1; i++) {
                                                          let item = icalObj[i];
                                       
                                                          // extract calendar color
                                                          let calendarName = item._class.split(' ')[0].replace('ical_', '');
                                       
                                                          let startTime = moment(item._date);
                                                          let endTime = moment(item._end);
                                                          
                                                          let start = startTime.format("YYYY-MM-DD HH:mm");
                                                          let end = endTime.format("YYYY-MM-DD HH:mm");
                                       
                                                          if (startTime.format('HH:mm') === '00:00' && endTime.format('HH:mm') === '00:00') {
                                                              // is full-day event
                                                              if (endTime.diff(startTime, 'hours') === 24) {
                                                                  // full-day event, one day
                                                                  start = startTime.format("YYYY-MM-DD");
                                                                  end = startTime.format("YYYY-MM-DD");
                                                              } else {
                                                                  // full-day event, multiple days
                                                                  start = startTime.format("YYYY-MM-DD");
                                                                  end = endTime.format("YYYY-MM-DD");
                                                              }
                                                          }
                                       
                                                          // create object for calendar widget
                                                          calList.push({
                                                              name: item.event,
                                                              color: getMyCalendarColor(calendarName),
                                                              colorText: getMyCalendarTextColor(calendarName),
                                                              start: start,
                                                              end: end
                                                          })
                                                      }
                                       
                                                      function getMyCalendarColor(calendarName) {
                                                          // assign colors via the calendar names, use calendar name as set in ical
                                                          if (calendarName === 'Sigi') {
                                                              return '#0094ff';
                                                          } else if (calendarName === 'Geburtstage') {
                                                              return '#ff9214'
                                                          } else if (calendarName === 'Abfall Neuhofen') {
                                                              return '#0094ff'
                                                          }
                                                      }
                                      
                                                      function getMyCalendarTextColor(calendarName) {
                                                          // assign colors via the calendar names, use calendar name as set in ical
                                                          if (calendarName === 'Sigi') {
                                                              return '#FFFFFF';
                                                          } else if (calendarName === 'Geburtstage') {
                                                              return '#FFFFFF'
                                                          } else if (calendarName === 'Abfall Neuhofen') {
                                                              return '#FFFFFF'
                                                          }
                                                      }
                                                  }
                                       
                                                  // Enter the destination data point that is to be used as object ID in the widget                
                                                  setState(datapointId, JSON.stringify(calList), true);
                                              }
                                          } catch (e) {
                                              console.error(`ical2MaterialDesignCalendarWidget: message: ${e.message}, stack: ${e.stack}`);
                                          }
                                      }
                                       
                                      ical2CalendarWidget();
                                      

                                      calendarName musst du natürlich an deine anpassen

                                      jojo regneupJ Offline
                                      jojo regneupJ Offline
                                      jojo regneup
                                      wrote on last edited by
                                      #193

                                      @sigi234
                                      Danke für den Hinweis. Jedoch sollte das ja schon so passen, weil mein Kalender genauso wie im Skript calendar1 heißt:
                                      8746af61-98ad-4e6b-9192-66303dbe4fdf-image.png
                                      Jedoch bekomme ich immernoch genau den gleichen Fehler im Protokoll wie vorher.
                                      b95fcc5b-3d6b-41f6-9c37-ee5093e2b016-image.png
                                      Gibt es irgendeine Sache die ich übersehen habe?

                                      sigi234S 2 Replies Last reply
                                      0
                                      • jojo regneupJ jojo regneup

                                        @sigi234
                                        Danke für den Hinweis. Jedoch sollte das ja schon so passen, weil mein Kalender genauso wie im Skript calendar1 heißt:
                                        8746af61-98ad-4e6b-9192-66303dbe4fdf-image.png
                                        Jedoch bekomme ich immernoch genau den gleichen Fehler im Protokoll wie vorher.
                                        b95fcc5b-3d6b-41f6-9c37-ee5093e2b016-image.png
                                        Gibt es irgendeine Sache die ich übersehen habe?

                                        sigi234S Online
                                        sigi234S Online
                                        sigi234
                                        Forum Testing Most Active
                                        wrote on last edited by sigi234
                                        #194

                                        @jojo-regneup

                                        Zeile 84

                                        Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                                        Immer Daten sichern!

                                        jojo regneupJ 1 Reply Last reply
                                        0
                                        • sigi234S sigi234

                                          @jojo-regneup

                                          Zeile 84

                                          jojo regneupJ Offline
                                          jojo regneupJ Offline
                                          jojo regneup
                                          wrote on last edited by
                                          #195

                                          @sigi234
                                          In Zeile 84 wird der Datenpunkt erstellt.
                                          d335315c-05bd-49ad-9c4a-3fc1f88ba217-image.png
                                          Muss ich diesen Vorher manuell erstellen, damit dann der Inhalt vom Skript überschrieben werden kann oder wird der Datenpunkt automatisch erstellt?

                                          1 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          734

                                          Online

                                          32.6k

                                          Users

                                          82.2k

                                          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