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

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

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.1k

Material Design Widgets: Calendar Widget

Scheduled Pinned Locked Moved Visualisierung
vis
200 Posts 45 Posters 38.0k 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.
  • A Offline
    A Offline
    AndreasHeins
    wrote on last edited by
    #41

    @Scrounger

    Ich habe schon alle Einstellungen durchsucht (glaube ich).

    Ich würde mir noch folgende Einstellungen wünschen:

    1. Kalenderwoche in der Monatsansicht einblenden
    2. Anzeige Monatsname in der Monatsansicht
    3. Markierung des Tages in der Monatsansicht

    9958f9ae-6c7a-47f4-940c-a5d980f9c440-image.png

    1. Anzeige Monatsname in der Wochen- bzw. Tagesansicht

    adea8d43-3779-4c03-ba13-ee87ca50cb41-image.png

    Andreas

    ScroungerS 1 Reply Last reply
    0
    • A AndreasHeins

      @Scrounger

      Ich habe schon alle Einstellungen durchsucht (glaube ich).

      Ich würde mir noch folgende Einstellungen wünschen:

      1. Kalenderwoche in der Monatsansicht einblenden
      2. Anzeige Monatsname in der Monatsansicht
      3. Markierung des Tages in der Monatsansicht

      9958f9ae-6c7a-47f4-940c-a5d980f9c440-image.png

      1. Anzeige Monatsname in der Wochen- bzw. Tagesansicht

      adea8d43-3779-4c03-ba13-ee87ca50cb41-image.png

      Andreas

      ScroungerS Offline
      ScroungerS Offline
      Scrounger
      Developer
      wrote on last edited by Scrounger
      #42

      @AndreasHeins sagte in Material Design Widgets: Calendar Widget:

      1. Kalenderwoche in der Monatsansicht einblenden
      2. Anzeige Monatsname in der Monatsansicht

      Bitte isssue auf git schreiben, evtl. implementiere ich das sofern die api das hergibt.

      1. Markierung des Tages in der Monatsansicht

      geht
      3dbd2fad-a5b7-4340-8ae5-73b2994d2569-grafik.png

      1 Reply Last reply
      0
      • A Offline
        A Offline
        AndreasHeins
        wrote on last edited by
        #43

        @Scrounger

        Danke für deine Nachricht.

        1. Die Einstellung habe ich glatt übersehen.

        1,2,4 Issues sind erstellt.

        Gruß
        Andreas

        1 Reply Last reply
        0
        • Stephan SchleichS Offline
          Stephan SchleichS Offline
          Stephan Schleich
          wrote on last edited by
          #44

          @Scrounger ist eine Listenansicht auch geplant? Fänd ich toll 🙂

          ScroungerS 1 Reply Last reply
          0
          • Stephan SchleichS Stephan Schleich

            @Scrounger ist eine Listenansicht auch geplant? Fänd ich toll 🙂

            ScroungerS Offline
            ScroungerS Offline
            Scrounger
            Developer
            wrote on last edited by
            #45

            @Stephan-Schleich
            Dafür kannst das du das List Widget oder Tablet WIdget nehmen. In der Doku gibt's dafür auch nen beispiel Skript bzw. Link dazu.

            Stephan SchleichS 1 Reply Last reply
            0
            • ScroungerS Scrounger

              @Stephan-Schleich
              Dafür kannst das du das List Widget oder Tablet WIdget nehmen. In der Doku gibt's dafür auch nen beispiel Skript bzw. Link dazu.

              Stephan SchleichS Offline
              Stephan SchleichS Offline
              Stephan Schleich
              wrote on last edited by
              #46

              @Scrounger So hab ich's derzeit gelöst.
              Hätte es cool gefunden wenn man das mit im Kalender Widget integriert hätte somit hatte man alles in einem.

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

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

                  S 1 Reply Last reply
                  0
                  • 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 Online
                                      D3ltoroxpD Online
                                      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
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          543

                                          Online

                                          32.6k

                                          Users

                                          82.1k

                                          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