Skip to content
  • 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
  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.2k

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

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

Material Design Widgets: Calendar Widget

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
200 Beiträge 45 Kommentatoren 35.3k 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.
  • smarthomegirlS smarthomegirl

    @Scrounger sagte in Material Design Widgets: Calendar Widget:

    Aktuell muss man die Farben manuell per Skript zuweisen. Das geht in der Funktion getMyCalendarColor. Dort muss man den Kalendernamen eintragen und die Farbe definieren, anbei der Auszug:

                    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'
                        }
                    }
    

    in der nächsten Version vom ical adapter wird die eingestellte Farbe dann mitgeliefert. Das werd ich dann einbauen, dann muss man am Skript gar nichts mehr ändern.

    1. Ich habe 3 Google-Kalender im iCal Adapter verknüpft, doch im Widget werden mir nur die Termine von einem Kalender angezeigt. Was muss ich einstellen, um die Termine aller Kalender im Widget zu sehen ?**

    Okay, ich habe die Kalender und die Farben zugewiesen. Allerdings bleibt der Termin weiterhin ohne Farbe (siehe Bild)
    10e57370-b77f-4753-9235-c0ded9fb9f09-image.png

    Das geht, denke du hast evtl. nicht das richtige Skript oder etwas daran verändert., nimm das von hier:
    https://github.com/Scrounger/ioBroker.vis-materialdesign#calendar

    Und dann als Datenpunkt (objekt ID) javascript.0.materialdesignwidgets.calendar.ical2calendar im Widget verwenden.

    Habe dein Skript (von GitHub) genommen und im Widget den Datenpunkt javascript.0.materialdesignwidgets.calendar.ical2calendar verknüpft. Jedoch wird auch hier nach wie vor die Termine von einem Kalender angezeigt und leider nicht von allen drei Kalendern.

    Was mache ich hier immer noch falsch?

    ScroungerS Offline
    ScroungerS Offline
    Scrounger
    Developer
    schrieb am zuletzt editiert von
    #29

    @smarthomegirl

    zeig mal dein skript, screenshot von Datenpunkten des ical adapters und ob was im log steht, nach dem du den ical Adapter und das skript neugestartet hast.

    <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

    <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

    smarthomegirlS 1 Antwort Letzte Antwort
    0
    • ScroungerS Scrounger

      @smarthomegirl

      zeig mal dein skript, screenshot von Datenpunkten des ical adapters und ob was im log steht, nach dem du den ical Adapter und das skript neugestartet hast.

      smarthomegirlS Offline
      smarthomegirlS Offline
      smarthomegirl
      schrieb am zuletzt editiert von
      #30

      @Scrounger

      Hier mein Skript:

      // 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 === 'Kalender Holger') {
                             return '#FF0000';
                         } else if (calendarName === 'Kalender Janine') {
                             return '#FF69B4'
                         } else if (calendarName === 'Kalender Justin') {
                             return '#00BFFF'
                         }
                     }
      
                     function getMyCalendarTextColor(calendarName) {
                         // assign colors via the calendar names, use calendar name as set in ical
                         if (calendarName === 'Kalender Holger') {
                             return '#FFFFFF';
                         } else if (calendarName === 'Kalender Janine') {
                             return '#FFFFFF'
                         } else if (calendarName === 'Kalender Justin') {
                             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();
      

      Hier die Datenpunkte vom iCal Adapter:

      17fe9527-6bfc-4875-9be7-d416ab754cb3-image.png

      Hier der Log:
      9c25be91-7d89-4f0a-b19d-48f9c7024e2e-image.png

      👍 Ich danke Euch im Voraus. 👍

      S Y S T E M:
      ioBroker Master auf Raspi 4 4Gb (FW raspbian-buster), node v.12.22.5, npm v.6.14.14, js-controller v.3.3.15

      ScroungerS 1 Antwort Letzte Antwort
      0
      • smarthomegirlS smarthomegirl

        @Scrounger

        Hier mein Skript:

        // 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 === 'Kalender Holger') {
                               return '#FF0000';
                           } else if (calendarName === 'Kalender Janine') {
                               return '#FF69B4'
                           } else if (calendarName === 'Kalender Justin') {
                               return '#00BFFF'
                           }
                       }
        
                       function getMyCalendarTextColor(calendarName) {
                           // assign colors via the calendar names, use calendar name as set in ical
                           if (calendarName === 'Kalender Holger') {
                               return '#FFFFFF';
                           } else if (calendarName === 'Kalender Janine') {
                               return '#FFFFFF'
                           } else if (calendarName === 'Kalender Justin') {
                               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();
        

        Hier die Datenpunkte vom iCal Adapter:

        17fe9527-6bfc-4875-9be7-d416ab754cb3-image.png

        Hier der Log:
        9c25be91-7d89-4f0a-b19d-48f9c7024e2e-image.png

        ScroungerS Offline
        ScroungerS Offline
        Scrounger
        Developer
        schrieb am zuletzt editiert von
        #31

        @smarthomegirl

        1. Farben:
          Gib dem Kalendar mal einen Namen ohne Leerzeichen.

        2. Keine Daten:
          Zeig mal den wert des html objektes.
          Kommen denn die Daten für alle 3 Kalender überhaupt an?

        <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

        <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

        smarthomegirlS 1 Antwort Letzte Antwort
        0
        • ScroungerS Scrounger

          @smarthomegirl

          1. Farben:
            Gib dem Kalendar mal einen Namen ohne Leerzeichen.

          2. Keine Daten:
            Zeig mal den wert des html objektes.
            Kommen denn die Daten für alle 3 Kalender überhaupt an?

          smarthomegirlS Offline
          smarthomegirlS Offline
          smarthomegirl
          schrieb am zuletzt editiert von
          #32

          @Scrounger sagte in Material Design Widgets: Calendar Widget:

          @smarthomegirl

          1. Farben:
            Gib dem Kalendar mal einen Namen ohne Leerzeichen.

          Ja das hat schon mal funktioniert. Danke

          1. Keine Daten:
            Zeig mal den wert des html objektes.
            Kommen denn die Daten für alle 3 Kalender überhaupt an?

          Hier der Wert des html Objektes:

          <span style="font-weight: bold; color: red"><span class="icalWarn iCal-KalenderNana">Heute  </span></span><span style="font-weight:normal;color:#ff00ff"><span class='icalWarn2 iCal-KalenderNana2'> Eliz Geburtstag</span></span>
          

          👍 Ich danke Euch im Voraus. 👍

          S Y S T E M:
          ioBroker Master auf Raspi 4 4Gb (FW raspbian-buster), node v.12.22.5, npm v.6.14.14, js-controller v.3.3.15

          ScroungerS 1 Antwort Letzte Antwort
          0
          • smarthomegirlS smarthomegirl

            @Scrounger sagte in Material Design Widgets: Calendar Widget:

            @smarthomegirl

            1. Farben:
              Gib dem Kalendar mal einen Namen ohne Leerzeichen.

            Ja das hat schon mal funktioniert. Danke

            1. Keine Daten:
              Zeig mal den wert des html objektes.
              Kommen denn die Daten für alle 3 Kalender überhaupt an?

            Hier der Wert des html Objektes:

            <span style="font-weight: bold; color: red"><span class="icalWarn iCal-KalenderNana">Heute  </span></span><span style="font-weight:normal;color:#ff00ff"><span class='icalWarn2 iCal-KalenderNana2'> Eliz Geburtstag</span></span>
            
            ScroungerS Offline
            ScroungerS Offline
            Scrounger
            Developer
            schrieb am zuletzt editiert von
            #33

            @smarthomegirl sagte in Material Design Widgets: Calendar Widget:

            <span style="font-weight: bold; color: red"><span class="icalWarn iCal-KalenderNana">Heute  </span></span><span style="font-weight:normal;color:#ff00ff"><span class='icalWarn2 iCal-KalenderNana2'> Eliz Geburtstag</span></span>
            

            Ok da kommt nur ein Termin vom KalenderNana2 - Eliz Geburtstag. Und der wird ja angezeigt wenn ich dirch richtig verstanden habe?
            Mehr zeigt dann das Widget natürlich auch nicht an. Willst du mehr events haben musst du die Tagesvorschau im ical settings erhöhen.

            <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

            <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

            smarthomegirlS 1 Antwort Letzte Antwort
            0
            • ScroungerS Scrounger

              @smarthomegirl sagte in Material Design Widgets: Calendar Widget:

              <span style="font-weight: bold; color: red"><span class="icalWarn iCal-KalenderNana">Heute  </span></span><span style="font-weight:normal;color:#ff00ff"><span class='icalWarn2 iCal-KalenderNana2'> Eliz Geburtstag</span></span>
              

              Ok da kommt nur ein Termin vom KalenderNana2 - Eliz Geburtstag. Und der wird ja angezeigt wenn ich dirch richtig verstanden habe?
              Mehr zeigt dann das Widget natürlich auch nicht an. Willst du mehr events haben musst du die Tagesvorschau im ical settings erhöhen.

              smarthomegirlS Offline
              smarthomegirlS Offline
              smarthomegirl
              schrieb am zuletzt editiert von smarthomegirl
              #34

              @Scrounger

              Okay, die Tagesvorschau habe ich auf 7 Tage eingestellt.

              Daran hat es gelegen. Ich danke Dir. Es ist gut, wenn man solche Spezialisten hat, die einem weiterhelfen. DANKE.

              👍 Ich danke Euch im Voraus. 👍

              S Y S T E M:
              ioBroker Master auf Raspi 4 4Gb (FW raspbian-buster), node v.12.22.5, npm v.6.14.14, js-controller v.3.3.15

              1 Antwort Letzte Antwort
              0
              • F Förster

                Versuche das auch bei mir umzusetzen, scheitere aber am Wigdet: das Kalender Widget wird mir im VIS Editor nicht zur Auswahl angeboten. Die anderen, zB Alerts oder Masonry, schon.

                MD Adapter 0.2.49
                VIS 1.2.4

                Was muss ich tun ?

                F Offline
                F Offline
                Fatmax
                schrieb am zuletzt editiert von
                #35

                @Förster sagte in Material Design Widgets: Calendar Widget:

                Versuche das auch bei mir umzusetzen, scheitere aber am Wigdet: das Kalender Widget wird mir im VIS Editor nicht zur Auswahl angeboten. Die anderen, zB Alerts oder Masonry, schon.

                MD Adapter 0.2.49
                VIS 1.2.4

                Was muss ich tun ?

                @Scrounger
                Ich habe genau das gleiche Verhalten.
                Script läuft super durch, auch der Datenpunkt mit Inhalt wird angelegt, ich habe aber kein eigenes Widget im VIS.

                Liebe Grüße,
                Fatmax

                ScroungerS 1 Antwort Letzte Antwort
                0
                • F Fatmax

                  @Förster sagte in Material Design Widgets: Calendar Widget:

                  Versuche das auch bei mir umzusetzen, scheitere aber am Wigdet: das Kalender Widget wird mir im VIS Editor nicht zur Auswahl angeboten. Die anderen, zB Alerts oder Masonry, schon.

                  MD Adapter 0.2.49
                  VIS 1.2.4

                  Was muss ich tun ?

                  @Scrounger
                  Ich habe genau das gleiche Verhalten.
                  Script läuft super durch, auch der Datenpunkt mit Inhalt wird angelegt, ich habe aber kein eigenes Widget im VIS.

                  ScroungerS Offline
                  ScroungerS Offline
                  Scrounger
                  Developer
                  schrieb am zuletzt editiert von
                  #36

                  @Fatmax sagte in Material Design Widgets: Calendar Widget:

                  @Förster sagte in Material Design Widgets: Calendar Widget:

                  Versuche das auch bei mir umzusetzen, scheitere aber am Wigdet: das Kalender Widget wird mir im VIS Editor nicht zur Auswahl angeboten. Die anderen, zB Alerts oder Masonry, schon.

                  MD Adapter 0.2.49
                  VIS 1.2.4

                  Ihr habt ne alte Version, aktuelle Version im latest ist 0.2.66.
                  Heißt also Adapter updaten 😉

                  <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                  <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                  F 1 Antwort Letzte Antwort
                  0
                  • ScroungerS Scrounger

                    @Fatmax sagte in Material Design Widgets: Calendar Widget:

                    @Förster sagte in Material Design Widgets: Calendar Widget:

                    Versuche das auch bei mir umzusetzen, scheitere aber am Wigdet: das Kalender Widget wird mir im VIS Editor nicht zur Auswahl angeboten. Die anderen, zB Alerts oder Masonry, schon.

                    MD Adapter 0.2.49
                    VIS 1.2.4

                    Ihr habt ne alte Version, aktuelle Version im latest ist 0.2.66.
                    Heißt also Adapter updaten 😉

                    F Offline
                    F Offline
                    Förster
                    schrieb am zuletzt editiert von
                    #37

                    @Scrounger das war es, danke!

                    1 Antwort Letzte Antwort
                    0
                    • A Offline
                      A Offline
                      AndreasHeins
                      schrieb am zuletzt editiert von AndreasHeins
                      #38

                      Hallo zusammen,

                      ich habe ein Problem mit der Darstellung von Farben im Kalender.
                      Einige Termine werden korrekt dargestellt, incl. Color und Colortext.
                      Andere wiederum nicht, weder Color noch Colortext.

                      c236fe46-6f29-4c68-b5c7-98b7e650e184-image.png

                      Hier ein Auszug aus dem Datenpunkt.
                      {"name":"Werder Bremen - 1. FC Köln","color":"#01DF01","colorText":"#000000","start":"2020-06-27 15:30","end":"2020-06-27 17:30"},
                      {"name":"Bayern München - Eintracht Frankfurt","color":"#FF0000","colorText":"#000000","start":"2020-05-23 18:30","end":"2020-05-23 20:30"},{
                      {"name":"Hausmüll","start":"2020-05-22","end":"2020-05-22"},{"name":"Gelber Sack","start":"2020-05-22","end":"2020-05-22"},
                      {"name":"Papiertonne","start":"2020-05-28","end":"2020-05-28"},{"name":"Gelber Sack","start":"2020-06-05","end":"2020-06-05"},
                      {"name":"Hausmüll","start":"2020-06-05","end":"2020-06-05"},{"name":"Hausmüll","start":"2020-06-18","end":"2020-06-18"},
                      {"name":"Gelber Sack","start":"2020-06-18","end":"2020-06-18"},{"name":"Papiertonne","start":"2020-06-25","end":"2020-06-25"},
                      {"name":"Hausmüll","start":"2020-07-02","end":"2020-07-02"},{"name":"Gelber Sack","start":"2020-07-02","end":"2020-07-02"},
                      {"name":"Hausmüll","start":"2020-07-16","end":"2020-07-16"},{"name":"Gelber Sack","start":"2020-07-16","end":"2020-07-16"},
                      {"name":"Papiertonne","start":"2020-07-23","end":"2020-07-23"},{"name":"Gelber Sack","start":"2020-07-30","end":"2020-07-30"},
                      {"name":"Hausmüll","start":"2020-07-30","end":"2020-07-30"},
                      {"name":"Hausmüll","start":"2020-12-03","end":"2020-12-03"},
                      {"name":"Gelber Sack","start":"2020-12-03","end":"2020-12-03"},
                      {"name":"Papiertonne","start":"2020-12-10","end":"2020-12-10"},
                      {"name":"Gelber Sack","start":"2020-12-17","end":"2020-12-17"},
                      {"name":"Hausmüll","start":"2020-12-17","end":"2020-12-17"},
                      {"name":"Pfingstferien Niedersachsen","start":"2020-05-22","end":"2020-05-22"},
                      {"name":"Pfingstferien Niedersachsen","start":"2020-06-02","end":"2020-06-02"},
                      {"name":"Sommerferien Niedersachsen","start":"2020-07-16","end":"2020-08-27"},
                      {"name":"Herbstferien Niedersachsen","start":"2020-10-12","end":"2020-10-24"},
                      {"name":"Weihnachtsferien Niedersachsen","start":"2020-12-23","end":"2021-01-09"},
                      {"name":"Winterferien Niedersachsen","start":"2021-02-01","end":"2021-02-03"}

                      Und hier noch der Auszug aus dem Script.

                      function getMyCalendarColor(calendarName) {
                      // assign colors via the calendar names, use calendar name as set in ical

                                      if (calendarName === 'Hausmüll') {
                                          return '#FF0000';
                                      }
                      
                                      if (calendarName === 'Papiertonne') {
                                          return '#0101DF';
                                      }
                      
                                      if (calendarName === 'Gelber Sack') {
                                          return '#FFFF00';
                                      }
                      
                                      if (calendarName === 'Geburtstage') {
                                          return '#DF01A5';
                                      }
                      
                                      if (calendarName === 'Werder') {
                                          return '#01DF01';
                                      }
                      
                                      if (calendarName === 'Bayern') {
                                          return '#FF0000';
                                      }
                      
                                      if (calendarName === 'Schulferien Niedersachsen') {
                                          return '#2ECCFA';
                                      }
                                      if (calendarName === 'Vacation') {
                                          return '#2ECCFA';
                                      }
                                  }
                      

                      Liegt es evtl. daran das die Müllabfuhr und Ferien ganztätige Termine sind?
                      Oder das die Einträge Gelber Sack, Hausmüll und Papiertonne nur Ereignisse in einem Kalender sind?

                      Oder hat jemand sonst eine Idee?

                      Mit freundlichen Grüßen
                      Andreas

                      ScroungerS 1 Antwort Letzte Antwort
                      0
                      • A AndreasHeins

                        Hallo zusammen,

                        ich habe ein Problem mit der Darstellung von Farben im Kalender.
                        Einige Termine werden korrekt dargestellt, incl. Color und Colortext.
                        Andere wiederum nicht, weder Color noch Colortext.

                        c236fe46-6f29-4c68-b5c7-98b7e650e184-image.png

                        Hier ein Auszug aus dem Datenpunkt.
                        {"name":"Werder Bremen - 1. FC Köln","color":"#01DF01","colorText":"#000000","start":"2020-06-27 15:30","end":"2020-06-27 17:30"},
                        {"name":"Bayern München - Eintracht Frankfurt","color":"#FF0000","colorText":"#000000","start":"2020-05-23 18:30","end":"2020-05-23 20:30"},{
                        {"name":"Hausmüll","start":"2020-05-22","end":"2020-05-22"},{"name":"Gelber Sack","start":"2020-05-22","end":"2020-05-22"},
                        {"name":"Papiertonne","start":"2020-05-28","end":"2020-05-28"},{"name":"Gelber Sack","start":"2020-06-05","end":"2020-06-05"},
                        {"name":"Hausmüll","start":"2020-06-05","end":"2020-06-05"},{"name":"Hausmüll","start":"2020-06-18","end":"2020-06-18"},
                        {"name":"Gelber Sack","start":"2020-06-18","end":"2020-06-18"},{"name":"Papiertonne","start":"2020-06-25","end":"2020-06-25"},
                        {"name":"Hausmüll","start":"2020-07-02","end":"2020-07-02"},{"name":"Gelber Sack","start":"2020-07-02","end":"2020-07-02"},
                        {"name":"Hausmüll","start":"2020-07-16","end":"2020-07-16"},{"name":"Gelber Sack","start":"2020-07-16","end":"2020-07-16"},
                        {"name":"Papiertonne","start":"2020-07-23","end":"2020-07-23"},{"name":"Gelber Sack","start":"2020-07-30","end":"2020-07-30"},
                        {"name":"Hausmüll","start":"2020-07-30","end":"2020-07-30"},
                        {"name":"Hausmüll","start":"2020-12-03","end":"2020-12-03"},
                        {"name":"Gelber Sack","start":"2020-12-03","end":"2020-12-03"},
                        {"name":"Papiertonne","start":"2020-12-10","end":"2020-12-10"},
                        {"name":"Gelber Sack","start":"2020-12-17","end":"2020-12-17"},
                        {"name":"Hausmüll","start":"2020-12-17","end":"2020-12-17"},
                        {"name":"Pfingstferien Niedersachsen","start":"2020-05-22","end":"2020-05-22"},
                        {"name":"Pfingstferien Niedersachsen","start":"2020-06-02","end":"2020-06-02"},
                        {"name":"Sommerferien Niedersachsen","start":"2020-07-16","end":"2020-08-27"},
                        {"name":"Herbstferien Niedersachsen","start":"2020-10-12","end":"2020-10-24"},
                        {"name":"Weihnachtsferien Niedersachsen","start":"2020-12-23","end":"2021-01-09"},
                        {"name":"Winterferien Niedersachsen","start":"2021-02-01","end":"2021-02-03"}

                        Und hier noch der Auszug aus dem Script.

                        function getMyCalendarColor(calendarName) {
                        // assign colors via the calendar names, use calendar name as set in ical

                                        if (calendarName === 'Hausmüll') {
                                            return '#FF0000';
                                        }
                        
                                        if (calendarName === 'Papiertonne') {
                                            return '#0101DF';
                                        }
                        
                                        if (calendarName === 'Gelber Sack') {
                                            return '#FFFF00';
                                        }
                        
                                        if (calendarName === 'Geburtstage') {
                                            return '#DF01A5';
                                        }
                        
                                        if (calendarName === 'Werder') {
                                            return '#01DF01';
                                        }
                        
                                        if (calendarName === 'Bayern') {
                                            return '#FF0000';
                                        }
                        
                                        if (calendarName === 'Schulferien Niedersachsen') {
                                            return '#2ECCFA';
                                        }
                                        if (calendarName === 'Vacation') {
                                            return '#2ECCFA';
                                        }
                                    }
                        

                        Liegt es evtl. daran das die Müllabfuhr und Ferien ganztätige Termine sind?
                        Oder das die Einträge Gelber Sack, Hausmüll und Papiertonne nur Ereignisse in einem Kalender sind?

                        Oder hat jemand sonst eine Idee?

                        Mit freundlichen Grüßen
                        Andreas

                        ScroungerS Offline
                        ScroungerS Offline
                        Scrounger
                        Developer
                        schrieb am zuletzt editiert von
                        #39

                        @AndreasHeins sagte in Material Design Widgets: Calendar Widget:

                        ,{
                        {"name":"Hausmüll","start":"2020-05-22","end":"2020-05-22"}

                        Hier ist der Fehler im json, beginnt mit {{, darf aber nur { sein.

                        Und die Funktion um die Farbe zu übermitteln scheint wohl nicht aufgerufen zu werden, da im json string keine Farbwerte stehen.

                        <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                        <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                        1 Antwort Letzte Antwort
                        0
                        • A Offline
                          A Offline
                          AndreasHeins
                          schrieb am zuletzt editiert von AndreasHeins
                          #40

                          Hallo und danke für den Tip.

                          Falls noch jemand, so wie ich mit Events im ical Kalender arbeitet, hier mein angepasstes Script. So prüfe ich bei der Kalenderhintergrundfarbe den Kalender- oder Eventnamen.

                          // 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(item.event,calendarName),
                                                  colorText: getMyCalendarTextColor(calendarName),
                                                  start: start,
                                                  end: end
                                              })
                                          }
                           
                                          function getMyCalendarColor(event,calendarName) {
                                              // assign colors via the calendar names, use calendar name or Event names as set in ical
                          
                                              if (calendarName === 'Hausmüll' || event === 'Hausmüll') {
                                                  return '#DEB887';
                                              }
                          
                                              if (calendarName === 'Papiertonne' || event === 'Papiertonne') {
                                                  return '#0080FF';
                                              }
                          
                                              if (calendarName === 'Gelber Sack' || event === 'Gelber Sack') {
                                                  return '#FFFF00';
                                              }
                          
                                              if (calendarName === 'Geburtstage' || event === 'Geburtstage') {
                                                  return '#DF01A5';
                                              }
                          
                                              if (calendarName === 'Werder' || event === 'Werder') {
                                                  return '#01DF01';
                                              }
                          
                                              if (calendarName === 'Bayern' || event === 'Bayern') {
                                                  return '#FF0000';
                                              }
                          
                                              if (calendarName === 'Ferien' || event === 'Ferien') {
                                                  return '#2ECCFA';
                                              }
                                              if (calendarName === 'Müllabfuhr' || event === 'Müllabfuhr') {
                                                  return '#2ECCFA';
                                              }
                                          }
                           
                                          function getMyCalendarTextColor(calendarName) {
                                              // assign colors via the calendar names, use calendar name as set in ical
                                              if (calendarName === 'Hausmüll') {
                                                  return '#000000';
                                              }
                          
                                              if (calendarName === 'Papiertonne') {
                                                  return '#000000';
                                              }
                          
                                              if (calendarName === 'Gelber Sack') {
                                                  return '#000000';
                                              }
                          
                                              if (calendarName === 'Geburtstage') {
                                                  return '#000000';
                                              }
                          
                                              if (calendarName === 'Werder') {
                                                  return '#000000';
                                              }
                          
                                              if (calendarName === 'Bayern') {
                                                  return '#000000';
                                              }
                          
                                              if (calendarName === 'Schulferien Niedersachsen') {
                                                  return '#000000';
                                              }
                          
                                              if (calendarName === 'Müllabfuhr') {
                                                  return '#000000';
                                              }
                                          }
                                      }
                           
                          
                          
                                      // 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ß Andreas

                          1 Antwort Letzte Antwort
                          0
                          • A Offline
                            A Offline
                            AndreasHeins
                            schrieb am zuletzt editiert von
                            #41

                            @Scrounger

                            Ich habe schon alle Einstellungen durchsucht (glaube ich).

                            Ich würde mir noch folgende Einstellungen wünschen:

                            1. Kalenderwoche in der Monatsansicht einblenden
                            2. Anzeige Monatsname in der Monatsansicht
                            3. Markierung des Tages in der Monatsansicht

                            9958f9ae-6c7a-47f4-940c-a5d980f9c440-image.png

                            1. Anzeige Monatsname in der Wochen- bzw. Tagesansicht

                            adea8d43-3779-4c03-ba13-ee87ca50cb41-image.png

                            Andreas

                            ScroungerS 1 Antwort Letzte Antwort
                            0
                            • A AndreasHeins

                              @Scrounger

                              Ich habe schon alle Einstellungen durchsucht (glaube ich).

                              Ich würde mir noch folgende Einstellungen wünschen:

                              1. Kalenderwoche in der Monatsansicht einblenden
                              2. Anzeige Monatsname in der Monatsansicht
                              3. Markierung des Tages in der Monatsansicht

                              9958f9ae-6c7a-47f4-940c-a5d980f9c440-image.png

                              1. Anzeige Monatsname in der Wochen- bzw. Tagesansicht

                              adea8d43-3779-4c03-ba13-ee87ca50cb41-image.png

                              Andreas

                              ScroungerS Offline
                              ScroungerS Offline
                              Scrounger
                              Developer
                              schrieb am zuletzt editiert von Scrounger
                              #42

                              @AndreasHeins sagte in Material Design Widgets: Calendar Widget:

                              1. Kalenderwoche in der Monatsansicht einblenden
                              2. Anzeige Monatsname in der Monatsansicht

                              Bitte isssue auf git schreiben, evtl. implementiere ich das sofern die api das hergibt.

                              1. Markierung des Tages in der Monatsansicht

                              geht
                              3dbd2fad-a5b7-4340-8ae5-73b2994d2569-grafik.png

                              <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                              <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                              1 Antwort Letzte Antwort
                              0
                              • A Offline
                                A Offline
                                AndreasHeins
                                schrieb am zuletzt editiert von
                                #43

                                @Scrounger

                                Danke für deine Nachricht.

                                1. Die Einstellung habe ich glatt übersehen.

                                1,2,4 Issues sind erstellt.

                                Gruß
                                Andreas

                                1 Antwort Letzte Antwort
                                0
                                • Stephan SchleichS Offline
                                  Stephan SchleichS Offline
                                  Stephan Schleich
                                  schrieb am zuletzt editiert von
                                  #44

                                  @Scrounger ist eine Listenansicht auch geplant? Fänd ich toll 🙂

                                  ScroungerS 1 Antwort Letzte Antwort
                                  0
                                  • Stephan SchleichS Stephan Schleich

                                    @Scrounger ist eine Listenansicht auch geplant? Fänd ich toll 🙂

                                    ScroungerS Offline
                                    ScroungerS Offline
                                    Scrounger
                                    Developer
                                    schrieb am zuletzt editiert von
                                    #45

                                    @Stephan-Schleich
                                    Dafür kannst das du das List Widget oder Tablet WIdget nehmen. In der Doku gibt's dafür auch nen beispiel Skript bzw. Link dazu.

                                    <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                                    <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                                    Stephan SchleichS 1 Antwort Letzte Antwort
                                    0
                                    • ScroungerS Scrounger

                                      @Stephan-Schleich
                                      Dafür kannst das du das List Widget oder Tablet WIdget nehmen. In der Doku gibt's dafür auch nen beispiel Skript bzw. Link dazu.

                                      Stephan SchleichS Offline
                                      Stephan SchleichS Offline
                                      Stephan Schleich
                                      schrieb am zuletzt editiert von
                                      #46

                                      @Scrounger So hab ich's derzeit gelöst.
                                      Hätte es cool gefunden wenn man das mit im Kalender Widget integriert hätte somit hatte man alles in einem.

                                      1 Antwort Letzte Antwort
                                      0
                                      • ScroungerS Scrounger

                                        Calendar Widget

                                        calendar.gif

                                        Sämtliche Fragen zu Einstellungen (VIS Editor, Bedienung, JSON strings, etc.) des Widgets hier stellen

                                        Das ist sicher besser für die Übersichtlichkeit und Dokumentation.

                                        • Dokumentation
                                        • Online Beispiel

                                        Themen zu anderen Widgets findest du hier!

                                        S Offline
                                        S Offline
                                        stefande
                                        schrieb am zuletzt editiert von
                                        #47

                                        @Scrounger
                                        Mal eine blöde Frage.
                                        Ich hab jetzt auch mal das Calendar Widget installiert und es scheint soweit auch zu funktionieren.
                                        Was ich jedoch nicht hinbekomme ist die vernünftige Darstellung eines Termins der über mehrere Tage geht.
                                        So ein Termin ist am ersten Tag oben sichtbar aber an den folgenden Tagen nicht. Klicke ich mit der Maus auf den Termin werden die folgenden Tage auch mit der Farbe markiert, die ich unter "Farbe selektiert / Hover" unter Layout der Kalendertasten eingetragen habe.
                                        Wie bekomme ich es hin, dass ich einen Termin der über mehrere Tage geht auch dauerhaft farblich markiert wird?

                                        ScroungerS 1 Antwort Letzte Antwort
                                        0
                                        • S stefande

                                          @Scrounger
                                          Mal eine blöde Frage.
                                          Ich hab jetzt auch mal das Calendar Widget installiert und es scheint soweit auch zu funktionieren.
                                          Was ich jedoch nicht hinbekomme ist die vernünftige Darstellung eines Termins der über mehrere Tage geht.
                                          So ein Termin ist am ersten Tag oben sichtbar aber an den folgenden Tagen nicht. Klicke ich mit der Maus auf den Termin werden die folgenden Tage auch mit der Farbe markiert, die ich unter "Farbe selektiert / Hover" unter Layout der Kalendertasten eingetragen habe.
                                          Wie bekomme ich es hin, dass ich einen Termin der über mehrere Tage geht auch dauerhaft farblich markiert wird?

                                          ScroungerS Offline
                                          ScroungerS Offline
                                          Scrounger
                                          Developer
                                          schrieb am zuletzt editiert von
                                          #48

                                          @stefande
                                          Welche Version verwendest du?
                                          Sollte seit 0.3.6 behoben sein.

                                          <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                                          <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                                          S 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

                                          739

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden

                                          • Du hast noch kein Konto? Registrieren

                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe