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

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

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.2k

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

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

Material Design Widgets: Calendar Widget

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
200 Beiträge 45 Kommentatoren 35.4k 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.
  • ScroungerS Scrounger

    Calendar Widget

    calendar.gif

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

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

    • Dokumentation
    • Online Beispiel

    Themen zu anderen Widgets findest du hier!

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

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

    ScroungerS 1 Antwort Letzte Antwort
    0
    • S stefande

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

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

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

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

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

      S 1 Antwort Letzte Antwort
      0
      • ScroungerS Scrounger

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

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

        @Scrounger

        Danke. Hat sich erledigt.
        Hatte einen Fehler im Javascript

        1 Antwort Letzte Antwort
        0
        • ScroungerS Scrounger

          @sigi234 @sveni_lee @Adnim

          Hab das Skript nochmal bissle optimiert:

          • nun werden alle ical instanzen berücksichtigt
          • die Uhrzeiten werden korrekt verwendet
          • skript wird direkt beim start einmal ausgeführt
          // momentjs is required as dependecies in javascript adapter
          const moment = require("moment");
          
          var instances = $(`[id=ical.*.data.table]`);
          instances.on(ical2CalendarWidget);
          
          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_', '');
          
                              // create object for calendar widget
                              calList.push({
                                  name: item.event,
                                  color: getMyCalendarColor(calendarName),
                                  colorText: getMyCalendarTextColor(calendarName),
                                  start: moment(item._date).format("YYYY-MM-DD HH:mm"),
                                  end: moment(item._end).format("YYYY-MM-DD HH:mm")
                              })
                          }
          
                          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('0_userdata.0.materialdesignwidgets.ical2Calendar', JSON.stringify(calList), true);
                  }
              } catch (e) {
                  console.error(`ical2MaterialDesignCalendarWidget: message: ${e.message}, stack: {e.stack}`);
              }
          }
          
          ical2CalendarWidget();
          
          PeoplesP Offline
          PeoplesP Offline
          Peoples
          schrieb am zuletzt editiert von Peoples
          #50

          Hi mal ne blöde Frage aber bin ich der Einzige bei dem mehrtägige Ereignisse wie bspw. Urlaub einen Tag zu lange im Kalender dargestellt werden?

          Hab das jetzt mal mit einem Workaround gelöst in dem ich eine Minute abziehe:

          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 HH:mm");
                                      if(endTime.format('HH:mm') === '00:00'){
                                          // Ergänzungen wegen falschem ende
                                          let wishdate = new Date(end);
                                          let newdate = (wishdate.getTime() -60000); 
                                          end = moment(newdate).format("YYYY-MM-DD")
                                          //log(moment(newdate).format("YYYY-MM-DD  HH:mm"))  
                                      }
                                  }
                              }
          

          Wie ist das bei euch?

          Ich beantworte keine Fragen zu Themen via PN

          1 Antwort Letzte Antwort
          0
          • N Offline
            N Offline
            nousefor82
            schrieb am zuletzt editiert von
            #51

            @Scrounger

            Servus, ist es möglich, die Hintergrundfarbe auf "transparent" zu setzen?

            Wenn ich "transparent" eingebe, passiert genau nichts.

            Danke!

            ScroungerS 1 Antwort Letzte Antwort
            0
            • N nousefor82

              @Scrounger

              Servus, ist es möglich, die Hintergrundfarbe auf "transparent" zu setzen?

              Wenn ich "transparent" eingebe, passiert genau nichts.

              Danke!

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

              @nousefor82 sagte in Material Design Widgets: Calendar Widget:

              Servus, ist es möglich, die Hintergrundfarbe auf "transparent" zu setzen?
              Wenn ich "transparent" eingebe, passiert genau nichts.

              Geht aktuell noch nicht, in der kommenden Version geht es dann.

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

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

              N 1 Antwort Letzte Antwort
              0
              • ScroungerS Scrounger

                @nousefor82 sagte in Material Design Widgets: Calendar Widget:

                Servus, ist es möglich, die Hintergrundfarbe auf "transparent" zu setzen?
                Wenn ich "transparent" eingebe, passiert genau nichts.

                Geht aktuell noch nicht, in der kommenden Version geht es dann.

                N Offline
                N Offline
                nousefor82
                schrieb am zuletzt editiert von
                #53

                @Scrounger

                Super, danke!

                1 Antwort Letzte Antwort
                0
                • D Offline
                  D Offline
                  danreh23
                  schrieb am zuletzt editiert von danreh23
                  #54

                  Hallo,
                  habe seit neuestem das Problem das der Wochentag nicht mehr zum Datum passt.
                  Jemand eine Idee?
                  Habe schon alles kontrolliert, kann aber nichts finden.

                  Danke!

                  @Scrounger : Kannst du mir hier weiterhelfen? Der Fehler tritt auch bei neu eingefügten Kalendern auf.

                  c9ba4489-7b54-4374-82f8-dfd7ec33fb83-image.png

                  ScroungerS 1 Antwort Letzte Antwort
                  0
                  • D danreh23

                    Hallo,
                    habe seit neuestem das Problem das der Wochentag nicht mehr zum Datum passt.
                    Jemand eine Idee?
                    Habe schon alles kontrolliert, kann aber nichts finden.

                    Danke!

                    @Scrounger : Kannst du mir hier weiterhelfen? Der Fehler tritt auch bei neu eingefügten Kalendern auf.

                    c9ba4489-7b54-4374-82f8-dfd7ec33fb83-image.png

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

                    @danreh23 sagte in Material Design Widgets: Calendar Widget:

                    habe seit neuestem das Problem das der Wochentag nicht mehr zum Datum passt.

                    Hast du zufällig eine Version direkt von github installiert?
                    Wenn nein was steht in der console des browsers (F12)?

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

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

                    D 1 Antwort Letzte Antwort
                    0
                    • ScroungerS Scrounger

                      @danreh23 sagte in Material Design Widgets: Calendar Widget:

                      habe seit neuestem das Problem das der Wochentag nicht mehr zum Datum passt.

                      Hast du zufällig eine Version direkt von github installiert?
                      Wenn nein was steht in der console des browsers (F12)?

                      D Offline
                      D Offline
                      danreh23
                      schrieb am zuletzt editiert von
                      #56

                      @Scrounger Ja habe direkt über Github installiert.
                      hier der Auszug aus der Konsole, meinst du das?
                      <div class="v-calendar-daily_head-weekday">Sonntag</div>

                      ScroungerS 1 Antwort Letzte Antwort
                      0
                      • D danreh23

                        @Scrounger Ja habe direkt über Github installiert.
                        hier der Auszug aus der Konsole, meinst du das?
                        <div class="v-calendar-daily_head-weekday">Sonntag</div>

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

                        @danreh23
                        OK dann liegt's an der GitHub Version hatte da Mal nen Fehler drin, der aber schon lange behoben ist. Immer bedenken GitHub Version sind Alpha!
                        Installier aus latest, die sind entsprechens getestet.

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

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

                        1 Antwort Letzte Antwort
                        0
                        • D3ltoroxpD Offline
                          D3ltoroxpD Offline
                          D3ltoroxp
                          schrieb am zuletzt editiert von D3ltoroxp
                          #58

                          Dieses Calender Widget funktioniert momentan nur mit dem ical Adapter und deinem Umwandlungsscript ?

                          Muss ich in dem Script noch was einstellen ? Hab das jetzt laufen und dem Calender Widget den Datenpunkt gegeben aus deinem Script, aber ich sehe dort nichts.

                          1 Antwort Letzte Antwort
                          0
                          • N Offline
                            N Offline
                            nerg
                            schrieb am zuletzt editiert von nerg
                            #59

                            @Scrounger : Schon jetzt vielen dank für die geilen Widgets. Ich baue grad meine ganze VIS um.

                            Eine Frage zum Kalender Widget: Kann man auch die Terminübersicht nachbauen? Die finde ich immer am übersichtlichsten. Kann ich ggf. helfen?

                            ScroungerS 1 Antwort Letzte Antwort
                            0
                            • N nerg

                              @Scrounger : Schon jetzt vielen dank für die geilen Widgets. Ich baue grad meine ganze VIS um.

                              Eine Frage zum Kalender Widget: Kann man auch die Terminübersicht nachbauen? Die finde ich immer am übersichtlichsten. Kann ich ggf. helfen?

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

                              @nerg
                              Was meinst du mit Terminübersicht?

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

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

                              N 1 Antwort Letzte Antwort
                              0
                              • ScroungerS Scrounger

                                @nerg
                                Was meinst du mit Terminübersicht?

                                N Offline
                                N Offline
                                nerg
                                schrieb am zuletzt editiert von
                                #61

                                @Scrounger
                                Eine Ansicht in diesem Stil:
                                d62ce691-19f3-4b7c-b1cd-c6cb6a7cb515-grafik.png

                                ScroungerS 1 Antwort Letzte Antwort
                                1
                                • N nerg

                                  @Scrounger
                                  Eine Ansicht in diesem Stil:
                                  d62ce691-19f3-4b7c-b1cd-c6cb6a7cb515-grafik.png

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

                                  @nerg sagte in Material Design Widgets: Calendar Widget:

                                  @Scrounger
                                  Eine Ansicht in diesem Stil:
                                  d62ce691-19f3-4b7c-b1cd-c6cb6a7cb515-grafik.png

                                  Gibt es bei der verwendeten API leider nicht:
                                  https://vuetifyjs.com/en/components/calendars/

                                  @nerg sagte in Material Design Widgets: Calendar Widget:

                                  @Scrounger : Schon jetzt vielen dank für die geilen Widgets. Ich baue grad meine ganze VIS um.
                                  Kann ich ggf. helfen?

                                  Könntest das als Feature Request beim vuetify für calendar anfragen. Wenn das seitens API implementiert ist, kann ich das auch implementieren:

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

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

                                  1 Antwort Letzte Antwort
                                  2
                                  • J Offline
                                    J Offline
                                    JMH
                                    schrieb am zuletzt editiert von
                                    #63

                                    Hi Leute, habe mich jetzt den Ganzen Tag mit dem Adapter und dem Forum auseinander gesetzt und habe alles dank Eurer Hilfe geschafft.
                                    Nur eins fehlt noch, die alten Termine!?

                                    Ziehe mir die Termine über den iCal Adapter und ich glaube hier liegt das Problem und nicht beim "Calendar Widget"!?.

                                    Wie bekomme ich das hin, dass ich auch die alten Termine sehe?
                                    Ich bin dankbar für Hinweise.

                                    LG Jan

                                    1 Antwort Letzte Antwort
                                    0
                                    • H Offline
                                      H Offline
                                      Happyuser20
                                      schrieb am zuletzt editiert von
                                      #64

                                      Guten Morgen

                                      würde auch gerne das Kalender Widget verwenden. Leider komme ich mit der Installation überhaupt nicht zurecht. Anscheinend bin ich zu doof dafür.

                                      Bei mir läuft der IOBroker auf einer DS218+

                                      Jetzt wollte ich das materialdesign installieren, über die Konsole(Portainer) mit dem Befehl

                                      npm i iobroker.vis-materialdesign
                                      

                                      hat auch funktioniert, soweit ich das beurteilen kann.

                                      root@iobroker:/opt/iobroker# npm i iobroker.vis-materialdesign
                                      sudo: Hostname iobroker kann nicht aufgelöst werden: Der Name oder der Dienst ist nicht bekannt
                                      npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules/fsevents):
                                      npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
                                      npm WARN optional SKIPPING OPTIONAL DEPENDENCY: osx-temperature-sensor@1.0.7 (node_modules/osx-temperature-sensor):
                                      npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for osx-temperature-sensor@1.0.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
                                      
                                      + iobroker.vis-materialdesign@0.4.2
                                      updated 1 package in 36.113s
                                      
                                      74 packages are looking for funding
                                        run `npm fund` for details
                                      
                                      root@iobroker:/opt/iobroker# 
                                      

                                      Doch ich sehe im IOBroker weder eine Instanz, Adapter dazu?
                                      Hab den IOBroker auch schon mehrmals neu gestartet, keine Veränderung.

                                      Was mache ich falsch?

                                      Schon mal Danke für die Hilfe und guten Rutsch ins neue Jahr!

                                      Gruß
                                      HappyUser20

                                      sigi234S 1 Antwort Letzte Antwort
                                      0
                                      • H Happyuser20

                                        Guten Morgen

                                        würde auch gerne das Kalender Widget verwenden. Leider komme ich mit der Installation überhaupt nicht zurecht. Anscheinend bin ich zu doof dafür.

                                        Bei mir läuft der IOBroker auf einer DS218+

                                        Jetzt wollte ich das materialdesign installieren, über die Konsole(Portainer) mit dem Befehl

                                        npm i iobroker.vis-materialdesign
                                        

                                        hat auch funktioniert, soweit ich das beurteilen kann.

                                        root@iobroker:/opt/iobroker# npm i iobroker.vis-materialdesign
                                        sudo: Hostname iobroker kann nicht aufgelöst werden: Der Name oder der Dienst ist nicht bekannt
                                        npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules/fsevents):
                                        npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
                                        npm WARN optional SKIPPING OPTIONAL DEPENDENCY: osx-temperature-sensor@1.0.7 (node_modules/osx-temperature-sensor):
                                        npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for osx-temperature-sensor@1.0.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
                                        
                                        + iobroker.vis-materialdesign@0.4.2
                                        updated 1 package in 36.113s
                                        
                                        74 packages are looking for funding
                                          run `npm fund` for details
                                        
                                        root@iobroker:/opt/iobroker# 
                                        

                                        Doch ich sehe im IOBroker weder eine Instanz, Adapter dazu?
                                        Hab den IOBroker auch schon mehrmals neu gestartet, keine Veränderung.

                                        Was mache ich falsch?

                                        Schon mal Danke für die Hilfe und guten Rutsch ins neue Jahr!

                                        Gruß
                                        HappyUser20

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

                                        @Happyuser20

                                        installiere ihn aus eigner Url

                                        Screenshot (3015)_LI.jpg

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

                                        H 1 Antwort Letzte Antwort
                                        0
                                        • sigi234S sigi234

                                          @Happyuser20

                                          installiere ihn aus eigner Url

                                          Screenshot (3015)_LI.jpg

                                          H Offline
                                          H Offline
                                          Happyuser20
                                          schrieb am zuletzt editiert von
                                          #66

                                          @sigi234

                                          Das hat schon mal funktioniert, danke dafür.

                                          Doch jetzt bekomme ich im Log folgenden Fehler.

                                          
                                          2020-12-31 10:45:04.443 - error: host.iobroker startInstance system.adapter.vis-materialdesign.0: required adapter "vis" has wrong version. Installed "1.3.4", required ">=1.3.6"!
                                          
                                          

                                          Ich kann aber den Vis Adapter nicht updaten, er sagt ich hätte schon die aktuelle Version.
                                          Kann auch keine 1.3.6 auswählen

                                          Gruß
                                          Happyuser20

                                          sigi234S 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

                                          630

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          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