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

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

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

Material Design Widgets: Calendar Widget

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
200 Beiträge 45 Kommentatoren 35.6k 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.
  • M mguenther

    @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

    M Offline
    M Offline
    mguenther
    schrieb am zuletzt editiert von
    #171

    @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 Antwort Letzte Antwort
    0
    • M mguenther

      @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 Offline
      T Offline
      TT-Tom
      schrieb am zuletzt editiert von TT-Tom
      #172

      @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.

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

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

        @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.

        Mit besten Grüßen
        Andy

        T 1 Antwort Letzte Antwort
        0
        • Damrak2022D Damrak2022

          @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 Offline
          T Offline
          TT-Tom
          schrieb am zuletzt editiert von TT-Tom
          #174

          @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.

          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

            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.

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

            @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

            Mit besten Grüßen
            Andy

            T 1 Antwort Letzte Antwort
            0
            • Damrak2022D Damrak2022

              @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 Offline
              T Offline
              TT-Tom
              schrieb am zuletzt editiert von
              #176

              @damrak2022

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

              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

              A 1 Antwort Letzte Antwort
              0
              • T TT-Tom

                @damrak2022

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

                A Offline
                A Offline
                alexmi
                schrieb am zuletzt editiert von
                #177

                @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 Antwort Letzte Antwort
                0
                • rtwlR Offline
                  rtwlR Offline
                  rtwl
                  schrieb am zuletzt editiert von
                  #178

                  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?

                  -Peter

                  1 Antwort Letzte Antwort
                  0
                  • rtwlR Offline
                    rtwlR Offline
                    rtwl
                    schrieb am zuletzt editiert von
                    #179

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

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

                    -Peter

                    1 Antwort Letzte Antwort
                    0
                    • rtwlR Offline
                      rtwlR Offline
                      rtwl
                      schrieb am zuletzt editiert von rtwl
                      #180

                      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

                      -Peter

                      O 1 Antwort Letzte Antwort
                      0
                      • rtwlR 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 Online
                        O Online
                        Oli
                        schrieb am zuletzt editiert von
                        #181

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

                        Gruß
                        Oliver

                        1 Antwort Letzte Antwort
                        1
                        • Curtis777C Offline
                          Curtis777C Offline
                          Curtis777
                          schrieb am zuletzt editiert von Curtis777
                          #182

                          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

                          Curtis777C 1 Antwort Letzte Antwort
                          0
                          • Curtis777C 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

                            Curtis777C Offline
                            Curtis777C Offline
                            Curtis777
                            schrieb am zuletzt editiert von Curtis777
                            #183

                            @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 Antwort Letzte Antwort
                            0
                            • Curtis777C Offline
                              Curtis777C Offline
                              Curtis777
                              schrieb am zuletzt editiert von
                              #184

                              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 Antwort Letzte Antwort
                              0
                              • J Offline
                                J Offline
                                jwerlsdf
                                schrieb am zuletzt editiert von
                                #185

                                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 Antwort Letzte Antwort
                                0
                                • G Offline
                                  G Offline
                                  grazer2500
                                  schrieb am zuletzt editiert von grazer2500
                                  #186

                                  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 Antwort Letzte Antwort
                                  0
                                  • S Offline
                                    S Offline
                                    strika77
                                    schrieb am zuletzt editiert von
                                    #187

                                    Hallo zusammen.
                                    Ich bin neu hier im Forum als auch im Bereich von ioBroker:blush:
                                    Hätte eine Frage bezüglich des Widget Calendar. Und zwar bekomme ich das nicht wirklich hin das sich meine Termine Farblich darstellen. Hab es schon versucht im Widget mit dem Skript color .... aber irgendwie bekomme ich es nicht hin.
                                    Hätte jemand vielleicht einen nützlichen tip für mich..

                                    Vielen dank schon mal im voraus!

                                    1 Antwort Letzte Antwort
                                    0
                                    • R Offline
                                      R Offline
                                      ReiTi
                                      schrieb am zuletzt editiert von
                                      #188

                                      Hallo zusammen,

                                      ich habe verschiedene Kalender, die ich über Schaltflächen ein- und ausblenden möchte. Ist das mit einer Instanz möglich? Und wo kann man das einstellen?
                                      Ansonsten müsste ich für jeden Kalender eine eigene Instanz erstellen und dafür dann je nachdem, welchen Kalender ich anzeigen möchte (oder in welcher Kombination...? :thinking_face: ) einen anderen in der vis anzeigen. Klingt kompliziert, da gibt es doch bestimmt was Einfacheres.

                                      Danke und Gruß Timo

                                      1 Antwort Letzte Antwort
                                      0
                                      • jojo regneupJ Offline
                                        jojo regneupJ Offline
                                        jojo regneup
                                        schrieb am zuletzt editiert von jojo regneup
                                        #189

                                        Hi, Ich hab mal ne ganz simple Frage. Ich versuche gerade das Widget bei mir einzurichten, aber ich kriege es einfach nicht hin, mit dem Skript den Datenpunkt zu erstellen. Mir werden in den Protokollen immer folgende Fehler angezeigt:
                                        9083b125-207c-4758-803d-d09ec343cef0-image.png
                                        Bin gerade ziemlich hilflos. Hat eventuell jemand einen Tipp, wie ich den Datenpunkt erstellen kann?

                                        Das wäre wirklich super. Vielen Dank schonmal im Voraus

                                        sigi234S 1 Antwort Letzte Antwort
                                        0
                                        • jojo regneupJ jojo regneup

                                          Hi, Ich hab mal ne ganz simple Frage. Ich versuche gerade das Widget bei mir einzurichten, aber ich kriege es einfach nicht hin, mit dem Skript den Datenpunkt zu erstellen. Mir werden in den Protokollen immer folgende Fehler angezeigt:
                                          9083b125-207c-4758-803d-d09ec343cef0-image.png
                                          Bin gerade ziemlich hilflos. Hat eventuell jemand einen Tipp, wie ich den Datenpunkt erstellen kann?

                                          Das wäre wirklich super. Vielen Dank schonmal im Voraus

                                          sigi234S Online
                                          sigi234S Online
                                          sigi234
                                          Forum Testing Most Active
                                          schrieb am zuletzt editiert von
                                          #190

                                          @jojo-regneup

                                          Zeig mal dein Skript in Code Tags

                                          Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                                          Immer Daten sichern!

                                          jojo regneupJ 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

                                          822

                                          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