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

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.
  • A Offline
    A Offline
    AndreasHeins
    schrieb am zuletzt editiert von AndreasHeins
    #40

    Hallo und danke für den Tip.

    Falls noch jemand, so wie ich mit Events im ical Kalender arbeitet, hier mein angepasstes Script. So prüfe ich bei der Kalenderhintergrundfarbe den Kalender- oder Eventnamen.

    // 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(item.event,calendarName),
                            colorText: getMyCalendarTextColor(calendarName),
                            start: start,
                            end: end
                        })
                    }
     
                    function getMyCalendarColor(event,calendarName) {
                        // assign colors via the calendar names, use calendar name or Event names as set in ical
    
                        if (calendarName === 'Hausmüll' || event === 'Hausmüll') {
                            return '#DEB887';
                        }
    
                        if (calendarName === 'Papiertonne' || event === 'Papiertonne') {
                            return '#0080FF';
                        }
    
                        if (calendarName === 'Gelber Sack' || event === 'Gelber Sack') {
                            return '#FFFF00';
                        }
    
                        if (calendarName === 'Geburtstage' || event === 'Geburtstage') {
                            return '#DF01A5';
                        }
    
                        if (calendarName === 'Werder' || event === 'Werder') {
                            return '#01DF01';
                        }
    
                        if (calendarName === 'Bayern' || event === 'Bayern') {
                            return '#FF0000';
                        }
    
                        if (calendarName === 'Ferien' || event === 'Ferien') {
                            return '#2ECCFA';
                        }
                        if (calendarName === 'Müllabfuhr' || event === 'Müllabfuhr') {
                            return '#2ECCFA';
                        }
                    }
     
                    function getMyCalendarTextColor(calendarName) {
                        // assign colors via the calendar names, use calendar name as set in ical
                        if (calendarName === 'Hausmüll') {
                            return '#000000';
                        }
    
                        if (calendarName === 'Papiertonne') {
                            return '#000000';
                        }
    
                        if (calendarName === 'Gelber Sack') {
                            return '#000000';
                        }
    
                        if (calendarName === 'Geburtstage') {
                            return '#000000';
                        }
    
                        if (calendarName === 'Werder') {
                            return '#000000';
                        }
    
                        if (calendarName === 'Bayern') {
                            return '#000000';
                        }
    
                        if (calendarName === 'Schulferien Niedersachsen') {
                            return '#000000';
                        }
    
                        if (calendarName === 'Müllabfuhr') {
                            return '#000000';
                        }
                    }
                }
     
    
    
                // 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();
    

    Gruß Andreas

    1 Antwort Letzte Antwort
    0
    • A Offline
      A Offline
      AndreasHeins
      schrieb am zuletzt editiert von
      #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 Antwort Letzte Antwort
      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
        schrieb am zuletzt editiert von 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

        <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
        • A Offline
          A Offline
          AndreasHeins
          schrieb am zuletzt editiert von
          #43

          @Scrounger

          Danke für deine Nachricht.

          1. Die Einstellung habe ich glatt übersehen.

          1,2,4 Issues sind erstellt.

          Gruß
          Andreas

          1 Antwort Letzte Antwort
          0
          • Stephan SchleichS Offline
            Stephan SchleichS Offline
            Stephan Schleich
            schrieb am zuletzt editiert von
            #44

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

            ScroungerS 1 Antwort Letzte Antwort
            0
            • Stephan SchleichS Stephan Schleich

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

              ScroungerS Offline
              ScroungerS Offline
              Scrounger
              Developer
              schrieb am zuletzt editiert von
              #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.

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

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

              Stephan SchleichS 1 Antwort Letzte Antwort
              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
                schrieb am zuletzt editiert von
                #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 Antwort Letzte Antwort
                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
                  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
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          194

                                          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