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

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

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

Material Design Widgets: Calendar Widget

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
200 Beiträge 45 Kommentatoren 35.5k 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.
  • T TT-Tom

    @damrak2022

    Melde mich heute Abend nochmal. Bin jetzt weg

    Damrak2022D Offline
    Damrak2022D Offline
    Damrak2022
    schrieb am zuletzt editiert von
    #136

    @tt-tom Ja, alles okay,

    ich habe das jetzt erweitert, aber hier werden manche Einträge blass dargestellt und unten ist noch ein Teil der wahrscheinlich weg kann
    Bildschirmfoto_2022-06-12_um_09_24_34.png

    Mit besten Grüßen
    Andy

    T 1 Antwort Letzte Antwort
    0
    • Damrak2022D Damrak2022

      @tt-tom Ja, alles okay,

      ich habe das jetzt erweitert, aber hier werden manche Einträge blass dargestellt und unten ist noch ein Teil der wahrscheinlich weg kann
      Bildschirmfoto_2022-06-12_um_09_24_34.png

      T Offline
      T Offline
      TT-Tom
      schrieb am zuletzt editiert von TT-Tom
      #137

      @damrak2022

      Falsche Klammern, vergleiche mit der ersten if

      Das erste else muss auch weg

      Der untere Teil ist für die Schriftfarbe, wenn dein Hintergrund schwarz ist musst du hier weiß ein stellen für den Kalender

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

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

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

      Damrak2022D 1 Antwort Letzte Antwort
      0
      • T TT-Tom

        @damrak2022

        Falsche Klammern, vergleiche mit der ersten if

        Das erste else muss auch weg

        Der untere Teil ist für die Schriftfarbe, wenn dein Hintergrund schwarz ist musst du hier weiß ein stellen für den Kalender

        Damrak2022D Offline
        Damrak2022D Offline
        Damrak2022
        schrieb am zuletzt editiert von
        #138

        @tt-tom Garnicht so einfach, wenn die Augen nicht mehr so Top sind und man sich mit JS nicht auskennt.
        Jetzt habe ich das angepasst, aber 3 Einträge sind immer noch blass dargestellt
        Bildschirmfoto 2022-06-12 um 11.13.32.png

        Muss ich den unteren Bereich auch bis auf die 7 Kalender erweitern, und überall meine gewünschte Schriftfarbe einstellen?

        Mit besten Grüßen
        Andy

        T 1 Antwort Letzte Antwort
        0
        • Damrak2022D Damrak2022

          @tt-tom Garnicht so einfach, wenn die Augen nicht mehr so Top sind und man sich mit JS nicht auskennt.
          Jetzt habe ich das angepasst, aber 3 Einträge sind immer noch blass dargestellt
          Bildschirmfoto 2022-06-12 um 11.13.32.png

          Muss ich den unteren Bereich auch bis auf die 7 Kalender erweitern, und überall meine gewünschte Schriftfarbe einstellen?

          T Offline
          T Offline
          TT-Tom
          schrieb am zuletzt editiert von TT-Tom
          #139

          @damrak2022 sagte in Material Design Widgets: Calendar Widget:

          Muss ich den unteren Bereich auch bis auf die 7 Kalender erweitern, und überall meine gewünschte Schriftfarbe einstellen?

          Nein, nur für die, die nicht schwarz sein sollen.

          Du hast oben immer noch ein Problem mit den Klammern.
          Ab Office fehlt die Klammer } vor else und hinter dem letzten Return müssen zwei

          Vergleiche mit dem Original, da kannst du es erkennen.

          So bin mal wieder weg.

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

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

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

          Damrak2022D 1 Antwort Letzte Antwort
          0
          • T TT-Tom

            @damrak2022 sagte in Material Design Widgets: Calendar Widget:

            Muss ich den unteren Bereich auch bis auf die 7 Kalender erweitern, und überall meine gewünschte Schriftfarbe einstellen?

            Nein, nur für die, die nicht schwarz sein sollen.

            Du hast oben immer noch ein Problem mit den Klammern.
            Ab Office fehlt die Klammer } vor else und hinter dem letzten Return müssen zwei

            Vergleiche mit dem Original, da kannst du es erkennen.

            So bin mal wieder weg.

            Damrak2022D Offline
            Damrak2022D Offline
            Damrak2022
            schrieb am zuletzt editiert von
            #140

            @tt-tom Danke, aber mach Dir keinen Stress. Heute Abend, oder morgen ist völlig ausreichend

            Mit besten Grüßen
            Andy

            T 1 Antwort Letzte Antwort
            0
            • Damrak2022D Damrak2022

              @tt-tom Danke, aber mach Dir keinen Stress. Heute Abend, oder morgen ist völlig ausreichend

              T Offline
              T Offline
              TT-Tom
              schrieb am zuletzt editiert von
              #141

              @damrak2022

              Ich schau heute Abend rein.

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

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

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

              Damrak2022D 1 Antwort Letzte Antwort
              0
              • T TT-Tom

                @damrak2022

                Ich schau heute Abend rein.

                Damrak2022D Offline
                Damrak2022D Offline
                Damrak2022
                schrieb am zuletzt editiert von
                #142

                @tt-tom Danke Dir

                Mit besten Grüßen
                Andy

                Damrak2022D 1 Antwort Letzte Antwort
                0
                • Damrak2022D Damrak2022

                  @tt-tom Danke Dir

                  Damrak2022D Offline
                  Damrak2022D Offline
                  Damrak2022
                  schrieb am zuletzt editiert von
                  #143

                  @damrak2022 So sieht jetzt mein komplettes Script 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_', '');
                  console.log(calendarName);
                                      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 === 'ioBroker') {
                                          return '#F16BBFB';
                                      } else if (calendarName === 'Finanzen') {
                                          return '#DA0B05'
                                      } else if (calendarName === 'Gesundheit') {
                                          return '#DA0B05'
                                      }else if (calendarName === 'Urlaub')  {
                                          return '#FC5307'
                                      }else if (calendarName === 'Marktforschung Andy') {
                                          return '#043DCC'
                                      }else if (calendarName === 'Kfz')   {
                                          return '#B3B3B3'
                                      }else if (calendarName === 'Office')    {
                                          return '#A3D87A'
                                      }else if (calendarName === 'Haushalt')   {
                                          return '#FDA49F'
                                      }else if (calendarName === 'Freizeit')   {
                                          return '#66028D'
                                      }else if (calendarName === 'Arbeit') {
                                          return '#FCC131'}}
                                          
                                  function getMyCalendarTextColor(calendarName) {
                                      // assign colors via the calendar names, use calendar name as set in ical
                                      if (calendarName === 'ioBroker') {
                                          return '#8bf46c';
                                      } else if (calendarName === 'Finanzen') {
                                          return '#8bf46c'
                                      } else if (calendarName === 'Gesundheit') {
                                          return '#8bf46c'
                                      }else if (calendarName === 'Urlaub')  {
                                          return '#8bf46c'
                                      }else if (calendarName === 'Marktforschung Andy') {
                                          return '#8bf46c'
                                      }else if (calendarName === 'Kfz')   {
                                          return '#8bf46c'
                                      }else if (calendarName === 'Office')    {
                                          return '#8bf46c'
                                      }else if (calendarName === 'Haushalt')   {
                                          return '#8bf46c'
                                      }else if (calendarName === 'Freizeit')   {
                                          return '#8bf46c'
                                      }else if (calendarName === 'Arbeit') {
                                          return '#8bf46c'}}
                                      }
                                  }
                              }
                  
                              // 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();
                  

                  Im Log gibt es diesen Fehler:

                  javascript.0
                  2022-06-12 11:42:20.854	error	script.js.common.Kalender.Kalender_ical compile failed:
                  at script.js.common.Kalender.Kalender_ical:108
                  

                  Und danach noch diese:

                  javascript.0
                  2022-06-12 11:42:20.857	error	at processImmediate (internal/timers.js:466:21)
                  
                  javascript.0
                  2022-06-12 11:42:20.857	error	at Immediate._onImmediate (/opt/iobroker/node_modules/iobroker.javascript/main.js:1472:17)
                  
                  javascript.0
                  2022-06-12 11:42:20.857	error	at /opt/iobroker/node_modules/iobroker.javascript/main.js:2001:17
                  
                  javascript.0
                  2022-06-12 11:42:20.856	error	at prepareScript (/opt/iobroker/node_modules/iobroker.javascript/main.js:1900:37)
                  
                  javascript.0
                  2022-06-12 11:42:20.856	error	at createVM (/opt/iobroker/node_modules/iobroker.javascript/main.js:1647:28)
                  
                  javascript.0
                  2022-06-12 11:42:20.856	error	at Object.createScript (vm.js:262:10)
                  
                  javascript.0
                  2022-06-12 11:42:20.856	error	at new Script (vm.js:102:7)
                  
                  javascript.0
                  2022-06-12 11:42:20.855	error	SyntaxError: Missing catch or finally after try
                  

                  Mit besten Grüßen
                  Andy

                  T 1 Antwort Letzte Antwort
                  0
                  • Damrak2022D Damrak2022

                    @damrak2022 So sieht jetzt mein komplettes Script 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_', '');
                    console.log(calendarName);
                                        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 === 'ioBroker') {
                                            return '#F16BBFB';
                                        } else if (calendarName === 'Finanzen') {
                                            return '#DA0B05'
                                        } else if (calendarName === 'Gesundheit') {
                                            return '#DA0B05'
                                        }else if (calendarName === 'Urlaub')  {
                                            return '#FC5307'
                                        }else if (calendarName === 'Marktforschung Andy') {
                                            return '#043DCC'
                                        }else if (calendarName === 'Kfz')   {
                                            return '#B3B3B3'
                                        }else if (calendarName === 'Office')    {
                                            return '#A3D87A'
                                        }else if (calendarName === 'Haushalt')   {
                                            return '#FDA49F'
                                        }else if (calendarName === 'Freizeit')   {
                                            return '#66028D'
                                        }else if (calendarName === 'Arbeit') {
                                            return '#FCC131'}}
                                            
                                    function getMyCalendarTextColor(calendarName) {
                                        // assign colors via the calendar names, use calendar name as set in ical
                                        if (calendarName === 'ioBroker') {
                                            return '#8bf46c';
                                        } else if (calendarName === 'Finanzen') {
                                            return '#8bf46c'
                                        } else if (calendarName === 'Gesundheit') {
                                            return '#8bf46c'
                                        }else if (calendarName === 'Urlaub')  {
                                            return '#8bf46c'
                                        }else if (calendarName === 'Marktforschung Andy') {
                                            return '#8bf46c'
                                        }else if (calendarName === 'Kfz')   {
                                            return '#8bf46c'
                                        }else if (calendarName === 'Office')    {
                                            return '#8bf46c'
                                        }else if (calendarName === 'Haushalt')   {
                                            return '#8bf46c'
                                        }else if (calendarName === 'Freizeit')   {
                                            return '#8bf46c'
                                        }else if (calendarName === 'Arbeit') {
                                            return '#8bf46c'}}
                                        }
                                    }
                                }
                    
                                // 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();
                    

                    Im Log gibt es diesen Fehler:

                    javascript.0
                    2022-06-12 11:42:20.854	error	script.js.common.Kalender.Kalender_ical compile failed:
                    at script.js.common.Kalender.Kalender_ical:108
                    

                    Und danach noch diese:

                    javascript.0
                    2022-06-12 11:42:20.857	error	at processImmediate (internal/timers.js:466:21)
                    
                    javascript.0
                    2022-06-12 11:42:20.857	error	at Immediate._onImmediate (/opt/iobroker/node_modules/iobroker.javascript/main.js:1472:17)
                    
                    javascript.0
                    2022-06-12 11:42:20.857	error	at /opt/iobroker/node_modules/iobroker.javascript/main.js:2001:17
                    
                    javascript.0
                    2022-06-12 11:42:20.856	error	at prepareScript (/opt/iobroker/node_modules/iobroker.javascript/main.js:1900:37)
                    
                    javascript.0
                    2022-06-12 11:42:20.856	error	at createVM (/opt/iobroker/node_modules/iobroker.javascript/main.js:1647:28)
                    
                    javascript.0
                    2022-06-12 11:42:20.856	error	at Object.createScript (vm.js:262:10)
                    
                    javascript.0
                    2022-06-12 11:42:20.856	error	at new Script (vm.js:102:7)
                    
                    javascript.0
                    2022-06-12 11:42:20.855	error	SyntaxError: Missing catch or finally after try
                    
                    T Offline
                    T Offline
                    TT-Tom
                    schrieb am zuletzt editiert von TT-Tom
                    #144

                    @damrak2022

                    Hi du hast in der Zeile 105 zwei Klammern zu viel. Jede Klammer die du öffnest, musst du auch wieder schliessen. Bei Verschachtelungen musst du von innen nach aussen prüfen. Im Script-Editor bei IoBroker siehst du immer den Gegenspieler, wenn du den Cursor an eine Klammer setzt. Ich habe das Script jetzt angepasst sollte so laufen.

                    Ps was noch ein Problem machen kann ist das Leerzeichen im Kalender Marktforschung, hier ggf. mit einem Unterstrich arbeiten.

                     
                    // 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_', '');
                                        //console.log(calendarName);
                    
                                        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 === 'ioBroker') {
                                            return '#F16BBFB';
                                        } else if (calendarName === 'Finanzen') {
                                            return '#DA0B05'
                                        } else if (calendarName === 'Gesundheit') {
                                            return '#DA0B05'
                                        }else if (calendarName === 'Urlaub')  {
                                            return '#FC5307'
                                        }else if (calendarName === 'Marktforschung Andy') {
                                            return '#043DCC'
                                        }else if (calendarName === 'Kfz')   {
                                            return '#B3B3B3'
                                        }else if (calendarName === 'Office')    {
                                            return '#A3D87A'
                                        }else if (calendarName === 'Haushalt')   {
                                            return '#FDA49F'
                                        }else if (calendarName === 'Freizeit')   {
                                            return '#66028D'
                                        }else if (calendarName === 'Arbeit') {
                                            return '#FCC131'
                                        }
                                    }
                                            
                                    function getMyCalendarTextColor(calendarName) {
                                        // assign colors via the calendar names, use calendar name as set in ical
                                        if (calendarName === 'ioBroker') {
                                            return '#8bf46c';
                                        } else if (calendarName === 'Finanzen') {
                                            return '#8bf46c'
                                        } else if (calendarName === 'Gesundheit') {
                                            return '#8bf46c'
                                        }else if (calendarName === 'Urlaub')  {
                                            return '#8bf46c'
                                        }else if (calendarName === 'Marktforschung Andy') {
                                            return '#8bf46c'
                                        }else if (calendarName === 'Kfz')   {
                                            return '#8bf46c'
                                        }else if (calendarName === 'Office')    {
                                            return '#8bf46c'
                                        }else if (calendarName === 'Haushalt')   {
                                            return '#8bf46c'
                                        }else if (calendarName === 'Freizeit')   {
                                            return '#8bf46c'
                                        }else if (calendarName === 'Arbeit') {
                                            return '#8bf46c'
                                        }
                                    }
                                }
                     
                                // 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();
                    
                    

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

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

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

                    Damrak2022D 2 Antworten Letzte Antwort
                    1
                    • T TT-Tom

                      @damrak2022

                      Hi du hast in der Zeile 105 zwei Klammern zu viel. Jede Klammer die du öffnest, musst du auch wieder schliessen. Bei Verschachtelungen musst du von innen nach aussen prüfen. Im Script-Editor bei IoBroker siehst du immer den Gegenspieler, wenn du den Cursor an eine Klammer setzt. Ich habe das Script jetzt angepasst sollte so laufen.

                      Ps was noch ein Problem machen kann ist das Leerzeichen im Kalender Marktforschung, hier ggf. mit einem Unterstrich arbeiten.

                       
                      // 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_', '');
                                          //console.log(calendarName);
                      
                                          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 === 'ioBroker') {
                                              return '#F16BBFB';
                                          } else if (calendarName === 'Finanzen') {
                                              return '#DA0B05'
                                          } else if (calendarName === 'Gesundheit') {
                                              return '#DA0B05'
                                          }else if (calendarName === 'Urlaub')  {
                                              return '#FC5307'
                                          }else if (calendarName === 'Marktforschung Andy') {
                                              return '#043DCC'
                                          }else if (calendarName === 'Kfz')   {
                                              return '#B3B3B3'
                                          }else if (calendarName === 'Office')    {
                                              return '#A3D87A'
                                          }else if (calendarName === 'Haushalt')   {
                                              return '#FDA49F'
                                          }else if (calendarName === 'Freizeit')   {
                                              return '#66028D'
                                          }else if (calendarName === 'Arbeit') {
                                              return '#FCC131'
                                          }
                                      }
                                              
                                      function getMyCalendarTextColor(calendarName) {
                                          // assign colors via the calendar names, use calendar name as set in ical
                                          if (calendarName === 'ioBroker') {
                                              return '#8bf46c';
                                          } else if (calendarName === 'Finanzen') {
                                              return '#8bf46c'
                                          } else if (calendarName === 'Gesundheit') {
                                              return '#8bf46c'
                                          }else if (calendarName === 'Urlaub')  {
                                              return '#8bf46c'
                                          }else if (calendarName === 'Marktforschung Andy') {
                                              return '#8bf46c'
                                          }else if (calendarName === 'Kfz')   {
                                              return '#8bf46c'
                                          }else if (calendarName === 'Office')    {
                                              return '#8bf46c'
                                          }else if (calendarName === 'Haushalt')   {
                                              return '#8bf46c'
                                          }else if (calendarName === 'Freizeit')   {
                                              return '#8bf46c'
                                          }else if (calendarName === 'Arbeit') {
                                              return '#8bf46c'
                                          }
                                      }
                                  }
                       
                                  // 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();
                      
                      
                      Damrak2022D Offline
                      Damrak2022D Offline
                      Damrak2022
                      schrieb am zuletzt editiert von Damrak2022
                      #145

                      @tt-tom Danke, jetzt klappt alles. Den Kalender Marktforschung habe ich vorher angepasst.
                      Jetzt versuche ich mich an den restlichen Anpassungen.

                      Mit besten Grüßen
                      Andy

                      1 Antwort Letzte Antwort
                      0
                      • T TT-Tom

                        @damrak2022

                        Hi du hast in der Zeile 105 zwei Klammern zu viel. Jede Klammer die du öffnest, musst du auch wieder schliessen. Bei Verschachtelungen musst du von innen nach aussen prüfen. Im Script-Editor bei IoBroker siehst du immer den Gegenspieler, wenn du den Cursor an eine Klammer setzt. Ich habe das Script jetzt angepasst sollte so laufen.

                        Ps was noch ein Problem machen kann ist das Leerzeichen im Kalender Marktforschung, hier ggf. mit einem Unterstrich arbeiten.

                         
                        // 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_', '');
                                            //console.log(calendarName);
                        
                                            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 === 'ioBroker') {
                                                return '#F16BBFB';
                                            } else if (calendarName === 'Finanzen') {
                                                return '#DA0B05'
                                            } else if (calendarName === 'Gesundheit') {
                                                return '#DA0B05'
                                            }else if (calendarName === 'Urlaub')  {
                                                return '#FC5307'
                                            }else if (calendarName === 'Marktforschung Andy') {
                                                return '#043DCC'
                                            }else if (calendarName === 'Kfz')   {
                                                return '#B3B3B3'
                                            }else if (calendarName === 'Office')    {
                                                return '#A3D87A'
                                            }else if (calendarName === 'Haushalt')   {
                                                return '#FDA49F'
                                            }else if (calendarName === 'Freizeit')   {
                                                return '#66028D'
                                            }else if (calendarName === 'Arbeit') {
                                                return '#FCC131'
                                            }
                                        }
                                                
                                        function getMyCalendarTextColor(calendarName) {
                                            // assign colors via the calendar names, use calendar name as set in ical
                                            if (calendarName === 'ioBroker') {
                                                return '#8bf46c';
                                            } else if (calendarName === 'Finanzen') {
                                                return '#8bf46c'
                                            } else if (calendarName === 'Gesundheit') {
                                                return '#8bf46c'
                                            }else if (calendarName === 'Urlaub')  {
                                                return '#8bf46c'
                                            }else if (calendarName === 'Marktforschung Andy') {
                                                return '#8bf46c'
                                            }else if (calendarName === 'Kfz')   {
                                                return '#8bf46c'
                                            }else if (calendarName === 'Office')    {
                                                return '#8bf46c'
                                            }else if (calendarName === 'Haushalt')   {
                                                return '#8bf46c'
                                            }else if (calendarName === 'Freizeit')   {
                                                return '#8bf46c'
                                            }else if (calendarName === 'Arbeit') {
                                                return '#8bf46c'
                                            }
                                        }
                                    }
                         
                                    // 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();
                        
                        
                        Damrak2022D Offline
                        Damrak2022D Offline
                        Damrak2022
                        schrieb am zuletzt editiert von
                        #146

                        @tt-tom Eine Frage habe ich noch: Wo passe ich die Farben für die umrandeten Bereiche an?
                        Bildschirmfoto_2022-06-13_um_06_00_38.png

                        Ich vermute per css von dem ich keine Ahnung habe.

                        Mit besten Grüßen
                        Andy

                        T 1 Antwort Letzte Antwort
                        0
                        • Damrak2022D Damrak2022

                          @tt-tom Eine Frage habe ich noch: Wo passe ich die Farben für die umrandeten Bereiche an?
                          Bildschirmfoto_2022-06-13_um_06_00_38.png

                          Ich vermute per css von dem ich keine Ahnung habe.

                          T Offline
                          T Offline
                          TT-Tom
                          schrieb am zuletzt editiert von
                          #147

                          @damrak2022

                          Da bin ich raus. Das muss ich auch immer nachlesen und kopieren.

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

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

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

                          Damrak2022D 1 Antwort Letzte Antwort
                          0
                          • T TT-Tom

                            @damrak2022

                            Da bin ich raus. Das muss ich auch immer nachlesen und kopieren.

                            Damrak2022D Offline
                            Damrak2022D Offline
                            Damrak2022
                            schrieb am zuletzt editiert von Damrak2022
                            #148

                            @tt-tom Okay, vielleicht kann mir ja jemand anders erklären wie ich die gewünschten Bereiche auswähle. Wie ich die Farbe ändere habe ich mittlerweile gelesen.

                            Mit besten Grüßen
                            Andy

                            O 1 Antwort Letzte Antwort
                            0
                            • Damrak2022D Damrak2022

                              @tt-tom Okay, vielleicht kann mir ja jemand anders erklären wie ich die gewünschten Bereiche auswähle. Wie ich die Farbe ändere habe ich mittlerweile gelesen.

                              O Online
                              O Online
                              Oli
                              schrieb am zuletzt editiert von
                              #149

                              @damrak2022
                              Die Farben kannst du im Adapter einstellen

                              Gruß
                              Oliver

                              Damrak2022D 3 Antworten Letzte Antwort
                              0
                              • O Oli

                                @damrak2022
                                Die Farben kannst du im Adapter einstellen

                                Damrak2022D Offline
                                Damrak2022D Offline
                                Damrak2022
                                schrieb am zuletzt editiert von
                                #150

                                @oli Danke, ich habe es heute dann entdeckt

                                Mit besten Grüßen
                                Andy

                                1 Antwort Letzte Antwort
                                0
                                • O Oli

                                  @damrak2022
                                  Die Farben kannst du im Adapter einstellen

                                  Damrak2022D Offline
                                  Damrak2022D Offline
                                  Damrak2022
                                  schrieb am zuletzt editiert von Damrak2022
                                  #151

                                  @oli Wie bekomme ich es hin, das mir Kalendereinträge nicht abgeschnitten werden, wenn es z.B. 2 oder mehr Termine im selben Zeitfenster sind. Es wäre gut, wenn da ein Zeilenumbruch erfolgen würde:
                                  Bildschirmfoto_2022-06-14_um_05_20_06.png

                                  Mit besten Grüßen
                                  Andy

                                  O 1 Antwort Letzte Antwort
                                  0
                                  • Damrak2022D Damrak2022

                                    @oli Wie bekomme ich es hin, das mir Kalendereinträge nicht abgeschnitten werden, wenn es z.B. 2 oder mehr Termine im selben Zeitfenster sind. Es wäre gut, wenn da ein Zeilenumbruch erfolgen würde:
                                    Bildschirmfoto_2022-06-14_um_05_20_06.png

                                    O Online
                                    O Online
                                    Oli
                                    schrieb am zuletzt editiert von
                                    #152

                                    @damrak2022
                                    Das kann ich dir nicht sagen, ich trage meine Termine immer so ein, dass sie sich nicht überschneiden. Der erste Termin würde bei mir enden, wenn der zweite beginnt. Da kann dir aber bestimmt @Scrounger helfen.

                                    Gruß
                                    Oliver

                                    Damrak2022D 1 Antwort Letzte Antwort
                                    0
                                    • O Oli

                                      @damrak2022
                                      Das kann ich dir nicht sagen, ich trage meine Termine immer so ein, dass sie sich nicht überschneiden. Der erste Termin würde bei mir enden, wenn der zweite beginnt. Da kann dir aber bestimmt @Scrounger helfen.

                                      Damrak2022D Offline
                                      Damrak2022D Offline
                                      Damrak2022
                                      schrieb am zuletzt editiert von
                                      #153

                                      @oli Das würde ich auch so machen, aber da die Kalender mit mehreren Personen genutzt werden, lassen sich Überschneidungen nicht vermeiden.

                                      Mit besten Grüßen
                                      Andy

                                      1 Antwort Letzte Antwort
                                      0
                                      • O Oli

                                        @damrak2022
                                        Die Farben kannst du im Adapter einstellen

                                        Damrak2022D Offline
                                        Damrak2022D Offline
                                        Damrak2022
                                        schrieb am zuletzt editiert von Damrak2022
                                        #154

                                        @oli Hallo, ich habe vor mehr als einer Stunde einen Termin im Kalender eingetragen, welcher aber nicht im Calendar Widget erscheint.
                                        Das Script läuft ohne Fehlermeldung
                                        Die Abfrage Zeit des ical Adapters steht auf 10 Minuten
                                        Kalender ist dort eingetragen und auch aktiv.
                                        Ich habe auch mehrfach einen Browserrefresh gemacht und auch eine anderen Browser ausprobiert.

                                        Hast Du eine Idee, warum der Termin nicht angezeigt wird.

                                        Mit besten Grüßen
                                        Andy

                                        O 1 Antwort Letzte Antwort
                                        0
                                        • Damrak2022D Damrak2022

                                          @oli Hallo, ich habe vor mehr als einer Stunde einen Termin im Kalender eingetragen, welcher aber nicht im Calendar Widget erscheint.
                                          Das Script läuft ohne Fehlermeldung
                                          Die Abfrage Zeit des ical Adapters steht auf 10 Minuten
                                          Kalender ist dort eingetragen und auch aktiv.
                                          Ich habe auch mehrfach einen Browserrefresh gemacht und auch eine anderen Browser ausprobiert.

                                          Hast Du eine Idee, warum der Termin nicht angezeigt wird.

                                          O Online
                                          O Online
                                          Oli
                                          schrieb am zuletzt editiert von
                                          #155

                                          @damrak2022
                                          Da kann ich dir im Moment nicht helfen, da ich im Urlaub bin.

                                          Gruß
                                          Oliver

                                          Damrak2022D 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

                                          826

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          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