Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Material Design Widgets: Calendar Widget

    NEWS

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    Material Design Widgets: Calendar Widget

    This topic has been deleted. Only users with topic management privileges can see it.
    • Damrak2022
      Damrak2022 @TT-Tom last edited by Damrak2022

      @tt-tom So, ich habe nochmal einen Neustart des Adapters gemacht und dann sieht das so aus:

      Bildschirmfoto_2022-06-30_um_02_24_55.png

      Dann erstelle ich mal ein neues Thema wie Du vorgeschlagen hast

      T 2 Replies Last reply Reply Quote 0
      • T
        TT-Tom @Damrak2022 last edited by TT-Tom

        @damrak2022
        Hi der Adapter startet schon mit einem Fehler. Was meldet er nach den Kalendern, da muss noch etwas kommen.
        Mach mit dem Fehler einen neues Thema auf und frage @Bluefox oder @apollon77, ob sie dir weiterhelfen können.
        Ich bin da leider raus.

        Lösche bitte einen Teil der Kalender Strings im Post. Sind private Daten.

        1 Reply Last reply Reply Quote 0
        • T
          TT-Tom @Damrak2022 last edited by

          @damrak2022

          wie im anderen Thema schon geschrieben lief der Adapter sauber durch heute Nacht. hast du an den Einstellungen etwas geändert? Sind die Einträge alle im Datenpunkt vom Ical adapter vorhanden?

          Bitte keine Bilder von den Logdaten senden. man kann es kaum bis garnicht lesen. Den Text Kopieren und in die Codetags </> kopieren, okay.

          Damrak2022 1 Reply Last reply Reply Quote 0
          • M
            mguenther @Damrak2022 last edited by

            @damrak2022 sagte in Material Design Widgets: Calendar Widget:

            @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

            ja, das habe ich auch ganz oft - die vergangenen (nicht ganztags-) Termine verschwinden... ich habe noch nicht kapiert, woran es liegt...

            T 1 Reply Last reply Reply Quote 0
            • M
              mguenther @mguenther last edited by

              @mguenther sagte in Material Design Widgets: Calendar Widget:

              @scrounger
              @all
              mal ein update, wie ich es bis jetzt hinbekommen habe - es hat sich nicht wirklich viel verändert, man kann zumindest die Inhalte von Ereignissen jetzt lesen - mir fehlt immer noch die "Verkleinerung" des blauen Kreis um das Datum des aktuellen Tages und die Änderung der Anmerkung "1 more". Auch mehrmaliges Durchlesen der Anleitung bringt mich überhaupt nicht weiter - Schade...

              32a0114c-33be-42e8-a46a-2c1b6f8ed232-image.png

              die Form bzw. die Höhe/Breite der Kreisform lässt sich über css anpassen.

              .v-btn--fab.v-size--small {
                  height: 15px;
                  width: 40px;
              }
              

              darüber geht es...

              1 Reply Last reply Reply Quote 0
              • T
                TT-Tom @mguenther last edited by TT-Tom

                @mguenther
                Dann scheint es doch ein Problem vom iCal Adapter zu sein. Mir ist das noch nicht aufgefallen.
                Klinke dich in das andere Thema mit ein und erkläre dort nochmal die Situation. Es liegt dann nicht am Widget/Script, wenn die Daten vorher schon fehlen.

                1 Reply Last reply Reply Quote 0
                • Damrak2022
                  Damrak2022 @TT-Tom last edited by

                  @tt-tom Also ich habe mir eben mal den Datenpunkt ical table angeschaut und auch hier fehlen mir schon massiv viele Termine.
                  Ich wüsste aber nicht was ich da tun könnte und auf mein Issue bei Github, gab es bis jetzt leider noch keine Antwort.

                  T 1 Reply Last reply Reply Quote 0
                  • T
                    TT-Tom @Damrak2022 last edited by TT-Tom

                    @damrak2022

                    Das meinte ich ja, wenn der iCal Adapter in den Datenpunkt nicht die Daten schreibt, ist das ein Problem vom Adapter. Deshalb solltest du ja auch den neuen Tread aufmachen und Apollon77 anschreiben. Schreibe ihn nochmal und Weise auf diese Problem.

                    Damrak2022 1 Reply Last reply Reply Quote 0
                    • Damrak2022
                      Damrak2022 @TT-Tom last edited by

                      @tt-tom Ich habe das jetzt nochmal verglichen. Das sind die Daten, welche unter javascript drinstehen
                      Bildschirmfoto 2022-07-20 um 09.36.12.png
                      Bildschirmfoto 2022-07-20 um 09.35.52.png

                      Und das sind die Daten aus dem json Table direkt aus dem ical Adapter:
                      Bildschirmfoto 2022-07-20 um 09.40.56.png

                      Wen ich das richtig sehe ist da ja schon eine große Diskrepanz

                      Und so mager sieht mein Kalender aus:
                      Bildschirmfoto 2022-07-20 um 09.44.17.png

                      T 1 Reply Last reply Reply Quote 0
                      • T
                        TT-Tom @Damrak2022 last edited by

                        @damrak2022

                        Bitte keine Screenshot schwer zu lesen und man kann die Daten schlecht vergleichen. Bitte in Code-Tags einfügen.

                        A 1 Reply Last reply Reply Quote 0
                        • A
                          alexmi @TT-Tom last edited by

                          @tt-tom Hallo zusammen,
                          ich habe das Script am laufen, funktioniert soweit auch alles super.

                          Jedoch werden keine Vergangenen Termine angezeit, die z.B. nur von 08:00-09:00 Uhr eingetragen sind. Ganztagestermine werden auch für die vergangenen Tage angezeigt.
                          Kann man das irgendwo einstellen?

                          1 Reply Last reply Reply Quote 0
                          • rtwl
                            rtwl last edited by

                            Danke für das Widget! Es ist wirklich hervorragend Umgesetzt.
                            Aktuell hab ich nur einen "Kritikpunkt":
                            Wenn man von rechts nach links wischt würde ich mir das nächste Monat/Woche/Tag erwarten, doch leider "geht" es zurück in der Zeitachse.
                            Kann man das in den Einstellungen irgendwo umkehren? oder eventuell per CSS?

                            1 Reply Last reply Reply Quote 0
                            • rtwl
                              rtwl last edited by

                              ist es möglich das Wort "anzeigen" aus der Steuerungsleiste zu entfernen?

                              5336e2c2-def1-4245-b54a-24b52cce3b31-image.png

                              1 Reply Last reply Reply Quote 0
                              • rtwl
                                rtwl last edited by rtwl

                                Auch wenn Frage 1 und 2 bisher noch keine Antwort erhalten hat, versuche ich noch eine dritte Frage zu stellen:

                                Hin und wieder wird der Kalender nicht korrekt geladen, also die hinterlegten Farben (Ja, sie sind in der Adapter Instanz eingestellt) werden nicht geladen.
                                Bei Frage 2 (direkt über diesem Post) sieht man wie das Design sein soll, doch es kommt eben das:
                                19ad226d-e72b-4757-a395-7d6c2dd5c5f5-image.png

                                O 1 Reply Last reply Reply Quote 0
                                • O
                                  Oli @rtwl last edited by

                                  @rtwl
                                  Ich hatte das gleiche Problem, habe dann die Farben direkt im Widget eingegeben. Seitdem funktioniert es.

                                  1 Reply Last reply Reply Quote 1
                                  • Curtis777
                                    Curtis777 last edited by Curtis777

                                    Ich habe das Problem das das Plugin mir nicht einmal eine einstellungsoption gibt siehe Screenshot.
                                    Kann mit dem Link nur in die Vis wechseln.

                                    Edit: nach neu installieren ist alles da, im Chrome Browser wird mir der KAlender angezeigt in der Wallpanel APP auf meinem Tablet nicht!

                                    Screenshot_2023-03-03-22-18-18-64_40deb401b9ffe8e1df2f1cc5ba480b12.jpg

                                    Curtis777 1 Reply Last reply Reply Quote 0
                                    • Curtis777
                                      Curtis777 @Curtis777 last edited by Curtis777

                                      @curtis777
                                      I'm chrome browser wird der Kalender angezeigt.
                                      In der Wallpanel APP sowie fully browser nicht.

                                      EDIT: anscheinend werden ALLE aus der Reihe nicht angezeigt auf den Apps!
                                      Im Chrome schon!
                                      IMG_20230304_110033_357.jpg IMG_20230304_110036_607.jpg

                                      1 Reply Last reply Reply Quote 0
                                      • Curtis777
                                        Curtis777 last edited by

                                        Liebe Alle,

                                        Ich habe ein Android 7 Tablet leider bekomme ich hier keine google dienste drauf um alles aktuell zu halten.
                                        somit habe ich Wallpanel per apk installiert.

                                        Der Kalender wurde von mir eingebaut in die VIS und lässt sich auch im Chrome Browser auf dem Tablet und jedem pc usw aufrufen.
                                        Jedoch in der Wallpanel ist der Kalender einfach nicht da.

                                        Hat jemand eine Idee / einen Lösungsansatz woran das liegen kann bzw wie ich das behebe ?

                                        1 Reply Last reply Reply Quote 0
                                        • J
                                          jwerlsdf last edited by

                                          Hallo,
                                          folgender Inhalt im Datenpunkt habe ich:

                                          [{"name":"Reserved","start":"2023-07-20","end":"2023-07-28"},{"name":"Reserved","start":"2023-08-04","end":"2023-08-13"}]

                                          Hier sind also zwei Zeiträume. Normalerweise müsste doch jetzt im Kalender über diese Tage ein langer Balken gehen. Das funktioniert aber leider nicht. Ich sehe nur am 20.07 bzw. am 04.08. ein "1 more". Was muss ich einstellen, damit es funktioniert?

                                          1 Reply Last reply Reply Quote 0
                                          • G
                                            grazer2500 last edited by grazer2500

                                            Hallo,
                                            Ich habe das material design widget und den ical Adapter installiert.
                                            Und auch soweit konfiguriert.
                                            Im ical Adapter werden alle Termine angezeigt. Aber bei der Visualisierung im material design calendar widget mit dem Script werden mir nicht alle Termine angezeigt.

                                            Welche Informationen braucht ihr um das nachzuvollziehen?

                                            // momentjs is required as dependecies in javascript adapter
                                            const moment = require("moment");
                                            
                                            var instances = $(`[id=ical.*.data.table]`);
                                            instances.on(ical2CalendarWidget);
                                            
                                            // remove this, if you know to use your own datapoint
                                            let datapointId = 'materialdesignwidgets.calendar.ical2calendar'
                                            createState(datapointId, "[]", {
                                              read: true, 
                                              write: false, 
                                              desc: "JSON String for Calendar Widget", 
                                              type: "string", 
                                              def: "[]"
                                            });
                                            
                                            function ical2CalendarWidget() {
                                                try {
                                                    let calList = [];
                                            
                                                    for (var inst = 0; inst <= instances.length - 1; inst++) {
                                                        let icalObj = getState(instances[inst]).val;
                                            
                                                        if (icalObj) {
                                                            for (var i = 0; i <= icalObj.length - 1; i++) {
                                                                let item = icalObj[i];
                                            
                                                                // extract calendar color
                                                                let calendarName = item._class.split(' ')[0].replace('ical_', '');
                                            
                                                                let startTime = moment(item._date);
                                                                let endTime = moment(item._end);
                                                                
                                                                let start = startTime.format("YYYY-MM-DD HH:mm");
                                                                let end = endTime.format("YYYY-MM-DD HH:mm");
                                            
                                                                if (startTime.format('HH:mm') === '00:00' && endTime.format('HH:mm') === '00:00') {
                                                                    // is full-day event
                                                                    if (endTime.diff(startTime, 'hours') === 24) {
                                                                        // full-day event, one day
                                                                        start = startTime.format("YYYY-MM-DD");
                                                                        end = startTime.format("YYYY-MM-DD");
                                                                    } else {
                                                                        // full-day event, multiple days
                                                                        start = startTime.format("YYYY-MM-DD");
                                                                        end = endTime.format("YYYY-MM-DD");
                                                                    }
                                                                }
                                            
                                                                // create object for calendar widget
                                                                calList.push({
                                                                    name: item.event,
                                                                    color: getMyCalendarColor(calendarName),
                                                                    colorText: getMyCalendarTextColor(calendarName),
                                                                    start: start,
                                                                    end: end
                                                                })
                                                            }
                                            
                                                            function getMyCalendarColor(calendarName) {
                                                                // assign colors via the calendar names, use calendar name as set in ical
                                                                if (calendarName === 'calendar1') {
                                                                    return '#FF0000';
                                                                } else if (calendarName === 'calendar2') {
                                                                    return '#44739e'
                                                                } else if (calendarName === 'calendar3') {
                                                                    return '#32a852'
                                                                }
                                                            }
                                            
                                                            function getMyCalendarTextColor(calendarName) {
                                                                // assign colors via the calendar names, use calendar name as set in ical
                                                                if (calendarName === 'calendar1') {
                                                                    return '#FFFFFF';
                                                                } else if (calendarName === 'calendar2') {
                                                                    return '#FFFFFF'
                                                                } else if (calendarName === 'calendar3') {
                                                                    return '#FFFFFF'
                                                                }
                                                            }
                                                        }
                                            
                                                        // Enter the destination data point that is to be used as object ID in the widget                
                                                        setState(datapointId, JSON.stringify(calList), true);
                                                    }
                                                } catch (e) {
                                                    console.error(`ical2MaterialDesignCalendarWidget: message: ${e.message}, stack: ${e.stack}`);
                                                }
                                            }
                                            
                                            ical2CalendarWidget();
                                            

                                            Habe alle Termine zensiert, sollte aber erkennbar sein das viele fehlen

                                            Bildschirmfoto vom 2023-11-29 10-06-54.png Bildschirmfoto vom 2023-11-29 10-07-21.png Bildschirmfoto vom 2023-11-29 10-07-08.png

                                            1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            1.0k
                                            Online

                                            31.7k
                                            Users

                                            79.7k
                                            Topics

                                            1.3m
                                            Posts

                                            vis
                                            45
                                            200
                                            25829
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo