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

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

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.1k

Material Design Widgets: Calendar Widget

Scheduled Pinned Locked Moved Visualisierung
vis
200 Posts 45 Posters 37.9k 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.
  • 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
              • 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
                #196

                @jojo-regneup

                Wenn unter userdata, hast du den DP auch angelegt?

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

                jojo regneupJ 1 Reply Last reply
                1
                • sigi234S sigi234

                  @jojo-regneup

                  Wenn unter userdata, hast du den DP auch angelegt?

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

                  @sigi234
                  Ahh super, jetzt hats geklappt. Dachte der Datenpunkt wird von dem Skript automatisch erstellt
                  Danke für die Hilfe

                  Ro75R 1 Reply Last reply
                  0
                  • jojo regneupJ jojo regneup

                    @sigi234
                    Ahh super, jetzt hats geklappt. Dachte der Datenpunkt wird von dem Skript automatisch erstellt
                    Danke für die Hilfe

                    Ro75R Offline
                    Ro75R Offline
                    Ro75
                    wrote on last edited by
                    #198

                    @jojo-regneup sagte in Material Design Widgets: Calendar Widget:

                    Dachte der Datenpunkt wird von dem Skript automatisch erstellt

                    Wird er auch, aber dann muss Zeile 8 auch korrekt sein.

                    Ro75.

                    SERVER = Beelink U59 16GB DDR4 RAM 512GB SSD, FB 7490, FritzDect 200+301+440, ConBee II, Zigbee Aqara Sensoren + NOUS A1Z, NOUS A1T, Philips Hue ** ioBroker, REDIS, influxdb2, Grafana, PiHole, Plex-Mediaserver, paperless-ngx (Docker), MariaDB + phpmyadmin *** VIS-Runtime = Intel NUC 8GB RAM 128GB SSD + 24" Touchscreen

                    1 Reply Last reply
                    0
                    • D Offline
                      D Offline
                      demaxo
                      wrote on last edited by
                      #199

                      Hallo,

                      ich erarbeite gerade mühsam meine VIS. Und ich bin froh, dass es soviele Fachleute gibt, die dabei weiterhelfen.

                      Derzeit bin ich gerade mit dem Kalender beschäftigt. Das ganze funktioniert auch schon mal grundsätzlich. Aber: Alle Termine werden mir im Kalender-Widget in der VIS eine Stunde früher angezeigt.

                      Jemand eine Idee, was da schiefläuft?

                      Am iCal-Adapter dürfte es nicht liegen, dieser holt die Termine korrekt ab. Es scheint also etwas bei Ausführung des Scriptes schief zu laufen. Das Script habe ich mir von GitHub geladen und es unverändert übernommen.

                      Viele Grüße
                      Jens

                      1 Reply Last reply
                      0
                      • D Offline
                        D Offline
                        demaxo
                        wrote on last edited by demaxo
                        #200
                        This post is deleted!
                        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

                        454

                        Online

                        32.6k

                        Users

                        82.1k

                        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