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

    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
                      • O Oli

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

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

                        @oli Genieße erstmal Deinen Urlaub.

                        Mit besten Grüßen
                        Andy

                        T 1 Antwort Letzte Antwort
                        0
                        • Damrak2022D Damrak2022

                          @oli Genieße erstmal Deinen Urlaub.

                          T Offline
                          T Offline
                          TT-Tom
                          schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                          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
                            schrieb am zuletzt editiert von
                            #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 Antworten Letzte Antwort
                            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
                              schrieb am zuletzt editiert von
                              #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 Antworten Letzte Antwort
                              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
                                schrieb am zuletzt editiert von Damrak2022
                                #160

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

                                Mit besten Grüßen
                                Andy

                                1 Antwort Letzte Antwort
                                0
                                • K Offline
                                  K Offline
                                  koljad
                                  schrieb am zuletzt editiert von
                                  #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 Antwort Letzte Antwort
                                  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
                                    schrieb am zuletzt editiert von
                                    #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 Antwort Letzte Antwort
                                    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
                                      schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                                      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
                                        schrieb am zuletzt editiert von
                                        #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 Antwort Letzte Antwort
                                        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
                                          schrieb am zuletzt editiert von 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 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

                                          622

                                          Online

                                          32.4k

                                          Benutzer

                                          81.5k

                                          Themen

                                          1.3m

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

                                          • Du hast noch kein Konto? Registrieren

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