Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • 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

  • Default (No Skin)
  • No Skin
Collapse
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Material Design Widgets: Calendar Widget

NEWS

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    16
    1
    1.9k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    915

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.2k

Material Design Widgets: Calendar Widget

Scheduled Pinned Locked Moved Visualisierung
vis
200 Posts 45 Posters 38.1k Views 52 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • 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
    wrote on last edited by
    #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 Reply Last reply
    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
      wrote on last edited by
      #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 Reply Last reply
      0
      • T TT-Tom

        @damrak2022

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

        Damrak2022D Offline
        Damrak2022D Offline
        Damrak2022
        wrote on last edited by 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 Reply Last reply
        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 Offline
          O Offline
          Oli
          wrote on last edited by
          #149

          @damrak2022
          Die Farben kannst du im Adapter einstellen

          Gruß
          Oliver

          Damrak2022D 3 Replies Last reply
          0
          • O Oli

            @damrak2022
            Die Farben kannst du im Adapter einstellen

            Damrak2022D Offline
            Damrak2022D Offline
            Damrak2022
            wrote on last edited by
            #150

            @oli Danke, ich habe es heute dann entdeckt

            Mit besten Grüßen
            Andy

            1 Reply Last reply
            0
            • O Oli

              @damrak2022
              Die Farben kannst du im Adapter einstellen

              Damrak2022D Offline
              Damrak2022D Offline
              Damrak2022
              wrote on last edited by 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 Reply Last reply
              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 Offline
                O Offline
                Oli
                wrote on last edited by
                #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 Reply Last reply
                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
                  wrote on last edited by
                  #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 Reply Last reply
                  0
                  • O Oli

                    @damrak2022
                    Die Farben kannst du im Adapter einstellen

                    Damrak2022D Offline
                    Damrak2022D Offline
                    Damrak2022
                    wrote on last edited by 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 Reply Last reply
                    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 Offline
                      O Offline
                      Oli
                      wrote on last edited by
                      #155

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

                      Gruß
                      Oliver

                      Damrak2022D 1 Reply Last reply
                      0
                      • O Oli

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

                        Damrak2022D Offline
                        Damrak2022D Offline
                        Damrak2022
                        wrote on last edited by
                        #156

                        @oli Genieße erstmal Deinen Urlaub.

                        Mit besten Grüßen
                        Andy

                        T 1 Reply Last reply
                        0
                        • Damrak2022D Damrak2022

                          @oli Genieße erstmal Deinen Urlaub.

                          T Offline
                          T Offline
                          TT-Tom
                          wrote on last edited by TT-Tom
                          #157

                          @damrak2022

                          Prüf bitte mal den Zeitstempel vom iCal Datenpunkt ical.0.data.table, wann wurde der letztes mal aktualisiert?

                          Hast du mehrere Instanzen?

                          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 Reply Last reply
                          0
                          • T TT-Tom

                            @damrak2022

                            Prüf bitte mal den Zeitstempel vom iCal Datenpunkt ical.0.data.table, wann wurde der letztes mal aktualisiert?

                            Hast du mehrere Instanzen?

                            Damrak2022D Offline
                            Damrak2022D Offline
                            Damrak2022
                            wrote on last edited by
                            #158

                            @tt-tom Das funktioniert jetzt. Der Eintrag ist nun vorhanden.Da steht als Zeitstempel das drin:
                            Bildschirmfoto 2022-06-17 um 04.43.59.png

                            Was ich aber nicht verstehe, ist das meine gestrigen Termine nicht mehr sichtbar sind. Im Ical Adapter habe ich 14 Tage Vorschau und 10 Tage bei vergangenen Terminen eingestellt. Muss ich da noch was gesondert einstellen?
                            Und eventuell kannst Du mir erklären, wie ich einen Zeilenumbruch hinbekomme, wenn mehrere Termin die gleiche Uhrzeit haben, was bei uns öfters passiert

                            Mit besten Grüßen
                            Andy

                            T M 2 Replies Last reply
                            0
                            • Damrak2022D Damrak2022

                              @tt-tom Das funktioniert jetzt. Der Eintrag ist nun vorhanden.Da steht als Zeitstempel das drin:
                              Bildschirmfoto 2022-06-17 um 04.43.59.png

                              Was ich aber nicht verstehe, ist das meine gestrigen Termine nicht mehr sichtbar sind. Im Ical Adapter habe ich 14 Tage Vorschau und 10 Tage bei vergangenen Terminen eingestellt. Muss ich da noch was gesondert einstellen?
                              Und eventuell kannst Du mir erklären, wie ich einen Zeilenumbruch hinbekomme, wenn mehrere Termin die gleiche Uhrzeit haben, was bei uns öfters passiert

                              T Offline
                              T Offline
                              TT-Tom
                              wrote on last edited by
                              #159

                              @damrak2022

                              wie du den Zeilenumbruch erstellen kannst, keine Ahnung.

                              Schau mal ins Log, ob auch alle Kalender abgerufen werden. Hast du dir die Json mal im Editor angesehen, ob die Termine wirklich fehlen? Nicht das es ein Darstellungsproblem in der Vis ist.

                              Die Tage gelten für alle 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 2 Replies Last reply
                              0
                              • T TT-Tom

                                @damrak2022

                                wie du den Zeilenumbruch erstellen kannst, keine Ahnung.

                                Schau mal ins Log, ob auch alle Kalender abgerufen werden. Hast du dir die Json mal im Editor angesehen, ob die Termine wirklich fehlen? Nicht das es ein Darstellungsproblem in der Vis ist.

                                Die Tage gelten für alle Kalender.

                                Damrak2022D Offline
                                Damrak2022D Offline
                                Damrak2022
                                wrote on last edited by Damrak2022
                                #160

                                @tt-tom Das habe ich mir gerade angeschaut. Da stimmt alles. Jetzt ist auch alles vorhanden.

                                Mit besten Grüßen
                                Andy

                                1 Reply Last reply
                                0
                                • K Offline
                                  K Offline
                                  koljad
                                  wrote on last edited by
                                  #161

                                  Ich bin noch relativ neu mit Iobroker. Ich habe den kompletten Thread dachte ich eigentlich quer gelesen aber wie realisiert ihr das denn, dass sich das Skript alle x Minuten Stunden neu läd damit mein Kalender mit neuen Einträger aktualisiert wird?
                                  Danke

                                  T 1 Reply Last reply
                                  0
                                  • K koljad

                                    Ich bin noch relativ neu mit Iobroker. Ich habe den kompletten Thread dachte ich eigentlich quer gelesen aber wie realisiert ihr das denn, dass sich das Skript alle x Minuten Stunden neu läd damit mein Kalender mit neuen Einträger aktualisiert wird?
                                    Danke

                                    T Offline
                                    T Offline
                                    TT-Tom
                                    wrote on last edited by
                                    #162

                                    @koljad sagte in Material Design Widgets: Calendar Widget:

                                    wie realisiert ihr das denn, dass sich das Skript alle x Minuten Stunden neu läd damit mein Kalender mit neuen Einträger aktualisiert wird?
                                    Danke

                                    Welches Script meinst du? Das Script zur Umwandlung triggert automatisch wenn iCal neue Daten liefert. Den abfrageintervall von iCal stellst du in der Instanz ein.

                                    Gruß Tom

                                    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

                                    K 1 Reply Last reply
                                    0
                                    • T TT-Tom

                                      @koljad sagte in Material Design Widgets: Calendar Widget:

                                      wie realisiert ihr das denn, dass sich das Skript alle x Minuten Stunden neu läd damit mein Kalender mit neuen Einträger aktualisiert wird?
                                      Danke

                                      Welches Script meinst du? Das Script zur Umwandlung triggert automatisch wenn iCal neue Daten liefert. Den abfrageintervall von iCal stellst du in der Instanz ein.

                                      Gruß Tom

                                      K Offline
                                      K Offline
                                      koljad
                                      wrote on last edited by koljad
                                      #163

                                      @tt-tom genau das zur Umwandlung. Ich bin jetzt nicht der aller größte JS Experte aber das Script aus Github macht das? Durch diese Zeilen?

                                      var instances = $([id=ical.*.data.table]);
                                      instances.on(ical2CalendarWidget);

                                      Ansonsten sieht mir das so aus als ob das Script nur einmal gestartet wird.

                                      Edit: Ja okay das wird es sein.

                                      T 1 Reply Last reply
                                      0
                                      • K koljad

                                        @tt-tom genau das zur Umwandlung. Ich bin jetzt nicht der aller größte JS Experte aber das Script aus Github macht das? Durch diese Zeilen?

                                        var instances = $([id=ical.*.data.table]);
                                        instances.on(ical2CalendarWidget);

                                        Ansonsten sieht mir das so aus als ob das Script nur einmal gestartet wird.

                                        Edit: Ja okay das wird es sein.

                                        T Offline
                                        T Offline
                                        TT-Tom
                                        wrote on last edited by
                                        #164

                                        @koljad
                                        Ja das Script läuft immer einmal durch, wird aber durch die neuen Daten vom iCal Adapter getriggert.

                                        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

                                        1 Reply Last reply
                                        0
                                        • T TT-Tom

                                          @damrak2022

                                          wie du den Zeilenumbruch erstellen kannst, keine Ahnung.

                                          Schau mal ins Log, ob auch alle Kalender abgerufen werden. Hast du dir die Json mal im Editor angesehen, ob die Termine wirklich fehlen? Nicht das es ein Darstellungsproblem in der Vis ist.

                                          Die Tage gelten für alle Kalender.

                                          Damrak2022D Offline
                                          Damrak2022D Offline
                                          Damrak2022
                                          wrote on last edited by Damrak2022
                                          #165

                                          @tt-tom Hallo, ich hänge wieder beim gleichen Problem mit der Darstellung der Termine.

                                          Das wird mir im Calendar Widget angezeigt:
                                          Bildschirmfoto_2022-06-28_um_08_35_08.png

                                          Und das steht wirklich in meinem Ical Kalender:
                                          Bildschirmfoto_2022-06-28_um_08_35_45.png

                                          Im Calendar Widget wird mir auch nichts mehr aus der Vorwoche angezeigt, ebensowenig in der kommenden Woche.
                                          Alle Kalender sind in ical korrekt eingetragen.
                                          In der json scheinen aber nur Termine aus Lübeck drinzustehen. Es fehlt der Termin aus Hösbach und auch die Geburtstage
                                          Bildschirmfoto_2022-06-28_um_08_46_43.png

                                          Mit besten Grüßen
                                          Andy

                                          T 1 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          379

                                          Online

                                          32.6k

                                          Users

                                          82.2k

                                          Topics

                                          1.3m

                                          Posts
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Home
                                          • Recent
                                          • Tags
                                          • Unread 0
                                          • Categories
                                          • Unreplied
                                          • Popular
                                          • GitHub
                                          • Docu
                                          • Hilfe