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

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.8k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.2k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    3.2k

Material Design Widgets: Calendar Widget

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
200 Beiträge 45 Kommentatoren 35.8k Aufrufe 52 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.
  • sigi234S sigi234

    @jojo-regneup

    Zeig mal dein Skript in Code Tags

    jojo regneupJ Offline
    jojo regneupJ Offline
    jojo regneup
    schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
    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
      schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
      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
        schrieb am zuletzt editiert von
        #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 Antworten Letzte Antwort
        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
          schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
          0
          • sigi234S sigi234

            @jojo-regneup

            Zeile 84

            jojo regneupJ Offline
            jojo regneupJ Offline
            jojo regneup
            schrieb am zuletzt editiert von
            #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 Antwort Letzte Antwort
            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
              schrieb am zuletzt editiert von
              #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 Antwort Letzte Antwort
              1
              • sigi234S sigi234

                @jojo-regneup

                Wenn unter userdata, hast du den DP auch angelegt?

                jojo regneupJ Offline
                jojo regneupJ Offline
                jojo regneup
                schrieb am zuletzt editiert von
                #197

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

                Ro75R 1 Antwort Letzte Antwort
                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
                  schrieb am zuletzt editiert von
                  #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 Antwort Letzte Antwort
                  0
                  • D Offline
                    D Offline
                    demaxo
                    schrieb am zuletzt editiert von
                    #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 Antwort Letzte Antwort
                    0
                    • D Offline
                      D Offline
                      demaxo
                      schrieb am zuletzt editiert von demaxo
                      #200
                      Dieser Beitrag wurde gelöscht!
                      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

                      931

                      Online

                      32.4k

                      Benutzer

                      81.5k

                      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