Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Material Design Widgets: Calendar Widget

    NEWS

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    Material Design Widgets: Calendar Widget

    This topic has been deleted. Only users with topic management privileges can see it.
    • Curtis777
      Curtis777 last edited by

      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 Reply Quote 0
      • J
        jwerlsdf last edited by

        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 Reply Quote 0
        • G
          grazer2500 last edited by grazer2500

          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 Reply Quote 0
          • S
            strika77 last edited by

            Hallo zusammen.
            Ich bin neu hier im Forum als auch im Bereich von ioBroker😊
            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 Reply Quote 0
            • R
              ReiTi last edited by

              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...? 🤔 ) einen anderen in der vis anzeigen. Klingt kompliziert, da gibt es doch bestimmt was Einfacheres.

              Danke und Gruß Timo

              1 Reply Last reply Reply Quote 0
              • jojo regneup
                jojo regneup last edited by 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

                sigi234 1 Reply Last reply Reply Quote 0
                • sigi234
                  sigi234 Forum Testing Most Active @jojo regneup last edited by

                  @jojo-regneup

                  Zeig mal dein Skript in Code Tags

                  jojo regneup 1 Reply Last reply Reply Quote 0
                  • jojo regneup
                    jojo regneup @sigi234 last edited by 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.

                    sigi234 1 Reply Last reply Reply Quote 0
                    • sigi234
                      sigi234 Forum Testing Most Active @jojo regneup last edited by 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 regneup 1 Reply Last reply Reply Quote 0
                      • jojo regneup
                        jojo regneup @sigi234 last edited by

                        @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?

                        sigi234 2 Replies Last reply Reply Quote 0
                        • sigi234
                          sigi234 Forum Testing Most Active @jojo regneup last edited by sigi234

                          @jojo-regneup

                          Zeile 84

                          jojo regneup 1 Reply Last reply Reply Quote 0
                          • jojo regneup
                            jojo regneup @sigi234 last edited by

                            @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 Reply Quote 0
                            • sigi234
                              sigi234 Forum Testing Most Active @jojo regneup last edited by

                              @jojo-regneup

                              Wenn unter userdata, hast du den DP auch angelegt?

                              jojo regneup 1 Reply Last reply Reply Quote 1
                              • jojo regneup
                                jojo regneup @sigi234 last edited by

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

                                Ro75 1 Reply Last reply Reply Quote 0
                                • Ro75
                                  Ro75 @jojo regneup last edited by

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

                                  1 Reply Last reply Reply Quote 0
                                  • D
                                    demaxo last edited by

                                    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 Reply Quote 0
                                    • D
                                      demaxo last edited by demaxo

                                      This post is deleted!
                                      1 Reply Last reply Reply Quote 0
                                      • First post
                                        Last post

                                      Support us

                                      ioBroker
                                      Community Adapters
                                      Donate

                                      779
                                      Online

                                      31.7k
                                      Users

                                      79.7k
                                      Topics

                                      1.3m
                                      Posts

                                      vis
                                      45
                                      200
                                      25701
                                      Loading More Posts
                                      • Oldest to Newest
                                      • Newest to Oldest
                                      • Most Votes
                                      Reply
                                      • Reply as topic
                                      Log in to reply
                                      Community
                                      Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                      The ioBroker Community 2014-2023
                                      logo