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

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

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

Material Design Widgets: Calendar Widget

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
200 Beiträge 45 Kommentatoren 35.6k 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.
  • R Offline
    R Offline
    ReiTi
    schrieb am zuletzt editiert von
    #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 Antwort Letzte Antwort
    0
    • jojo regneupJ Offline
      jojo regneupJ Offline
      jojo regneup
      schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
      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
        schrieb am zuletzt editiert von
        #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 Antwort Letzte Antwort
        0
        • 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

                            621

                            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