Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

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

Community Forum

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

NEWS

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

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

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.2k

Material Design Widgets: Calendar Widget

Scheduled Pinned Locked Moved Visualisierung
vis
200 Posts 45 Posters 38.1k Views 52 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • ScroungerS Scrounger

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

    S Offline
    S Offline
    stefande
    wrote on last edited by
    #49

    @Scrounger

    Danke. Hat sich erledigt.
    Hatte einen Fehler im Javascript

    1 Reply Last reply
    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
      wrote on last edited by 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 Reply Last reply
      0
      • N Offline
        N Offline
        nousefor82
        wrote on last edited by
        #51

        @Scrounger

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

        Wenn ich "transparent" eingebe, passiert genau nichts.

        Danke!

        ScroungerS 1 Reply Last reply
        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
          wrote on last edited by
          #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.

          N 1 Reply Last reply
          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
            wrote on last edited by
            #53

            @Scrounger

            Super, danke!

            1 Reply Last reply
            0
            • D Offline
              D Offline
              danreh23
              wrote on last edited by 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 Reply Last reply
              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
                wrote on last edited by
                #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)?

                D 1 Reply Last reply
                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
                  wrote on last edited by
                  #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 Reply Last reply
                  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
                    wrote on last edited by
                    #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.

                    1 Reply Last reply
                    0
                    • D3ltoroxpD Offline
                      D3ltoroxpD Offline
                      D3ltoroxp
                      wrote on last edited by 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 Reply Last reply
                      0
                      • N Offline
                        N Offline
                        nerg
                        wrote on last edited by 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 Reply Last reply
                        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
                          wrote on last edited by
                          #60

                          @nerg
                          Was meinst du mit Terminübersicht?

                          N 1 Reply Last reply
                          0
                          • ScroungerS Scrounger

                            @nerg
                            Was meinst du mit Terminübersicht?

                            N Offline
                            N Offline
                            nerg
                            wrote on last edited by
                            #61

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

                            ScroungerS 1 Reply Last reply
                            1
                            • N nerg

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

                              ScroungerS Offline
                              ScroungerS Offline
                              Scrounger
                              Developer
                              wrote on last edited by
                              #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:

                              1 Reply Last reply
                              2
                              • J Offline
                                J Offline
                                JMH
                                wrote on last edited by
                                #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 Reply Last reply
                                0
                                • H Offline
                                  H Offline
                                  Happyuser20
                                  wrote on last edited by
                                  #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 Reply Last reply
                                  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
                                    wrote on last edited by 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 Reply Last reply
                                    0
                                    • sigi234S sigi234

                                      @Happyuser20

                                      installiere ihn aus eigner Url

                                      Screenshot (3015)_LI.jpg

                                      H Offline
                                      H Offline
                                      Happyuser20
                                      wrote on last edited by
                                      #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 Reply Last reply
                                      0
                                      • H Happyuser20

                                        @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 Online
                                        sigi234S Online
                                        sigi234
                                        Forum Testing Most Active
                                        wrote on last edited by sigi234
                                        #67

                                        @Happyuser20 sagte in Material Design Widgets: Calendar Widget:

                                        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

                                        Vorübergehend Verwahrungsort in den Haupteinstellungen auf Beta umstellen.

                                        Dann das selbe wie bei MD Widgets.

                                        https://github.com/ioBroker/ioBroker.vis.git

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

                                        H 1 Reply Last reply
                                        0
                                        • sigi234S sigi234

                                          @Happyuser20 sagte in Material Design Widgets: Calendar Widget:

                                          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

                                          Vorübergehend Verwahrungsort in den Haupteinstellungen auf Beta umstellen.

                                          Dann das selbe wie bei MD Widgets.

                                          https://github.com/ioBroker/ioBroker.vis.git

                                          H Offline
                                          H Offline
                                          Happyuser20
                                          wrote on last edited by
                                          #68

                                          @sigi234

                                          Danke für die Hilfe.
                                          Das Ding läuft jetzt, hab heute ein wenig rumgespielt damit.
                                          Habe das Design nach meinen Vorstellungen abgeändert.

                                          Jetzt bekomme ich Log aber ständig Warnungen und Fehler wenn die beiden iCal INSTANZEN die Kalender abrufen.

                                          
                                          2021-01-01 19:00:10.568 - error: ical.1 (9410) ical.1 already running
                                          2021-01-01 19:00:10.574 - warn: ical.1 (9410) Terminated (ADAPTER_ALREADY_RUNNING): Without reason
                                          2021-01-01 19:00:10.760 - info: host.iobroker instance system.adapter.dwd.0 terminated with code 11 (ADAPTER_REQUESTED_TERMINATION)
                                          2021-01-01 19:00:10.929 - info: host.iobroker instance system.adapter.dwd.0 terminated with code 11 (ADAPTER_REQUESTED_TERMINATION)
                                          2021-01-01 19:00:11.089 - error: ical.0 (9403) ical.0 already running
                                          2021-01-01 19:00:11.092 - warn: ical.0 (9403) Terminated (ADAPTER_ALREADY_RUNNING): Without reason
                                          2021-01-01 19:00:11.102 - error: host.iobroker instance system.adapter.ical.1 terminated with code 7 (ADAPTER_ALREADY_RUNNING)
                                          2021-01-01 19:00:11.614 - error: host.iobroker instance system.adapter.ical.0 terminated with code 7 (ADAPTER_ALREADY_RUNNING)
                                          
                                          

                                          Termine sind alle vorhanden und auch sonst funktioniert alles wie gehabt.
                                          Habe auch schon beide iCal Instanzen mehrmals neu gestartet.

                                          Gruß und Frohes Neues

                                          Happyuser20

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


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          583

                                          Online

                                          32.6k

                                          Users

                                          82.2k

                                          Topics

                                          1.3m

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

                                          • Don't have an account? Register

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