Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Material Design Widgets: Calendar Widget

    NEWS

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    Material Design Widgets: Calendar Widget

    This topic has been deleted. Only users with topic management privileges can see it.
    • sigi234
      sigi234 Forum Testing Most Active @jojo regneup last edited by

      @jojo-regneup

      Zeig mal dein Skript in Code Tags

      jojo regneup 1 Reply Last reply Reply Quote 0
      • jojo regneup
        jojo regneup @sigi234 last edited by jojo regneup

        @sigi234
        Mein Skript sieht wie folgt aus:

        // momentjs is required as dependecies in javascript adapter
        const moment = require("moment");
        
        var instances = $(`[id=ical.*.data.table]`);
        instances.on(ical2CalendarWidget);
        
        // remove this, if you know to use your own datapoint
        let datapointId = 'materialdesignwidgets.calendar.ical2calendar'
        createState(datapointId, "[]", {
          read: true, 
          write: false, 
          desc: "JSON String for Calendar Widget", 
          type: "string", 
          def: "[]"
        });
        
        function ical2CalendarWidget() {
            try {
                let calList = [];
        
                for (var inst = 0; inst <= instances.length - 1; inst++) {
                    let icalObj = getState(instances[inst]).val;
        
                    if (icalObj) {
                        for (var i = 0; i <= icalObj.length - 1; i++) {
                            let item = icalObj[i];
        
                            // extract calendar color
                            let calendarName = item._class.split(' ')[0].replace('ical_', '');
        
                            let startTime = moment(item._date);
                            let endTime = moment(item._end);
                            
                            let start = startTime.format("YYYY-MM-DD HH:mm");
                            let end = endTime.format("YYYY-MM-DD HH:mm");
        
                            if (startTime.format('HH:mm') === '00:00' && endTime.format('HH:mm') === '00:00') {
                                // is full-day event
                                if (endTime.diff(startTime, 'hours') === 24) {
                                    // full-day event, one day
                                    start = startTime.format("YYYY-MM-DD");
                                    end = startTime.format("YYYY-MM-DD");
                                } else {
                                    // full-day event, multiple days
                                    start = startTime.format("YYYY-MM-DD");
                                    end = endTime.format("YYYY-MM-DD");
                                }
                            }
        
                            // create object for calendar widget
                            calList.push({
                                name: item.event,
                                color: getMyCalendarColor(calendarName),
                                colorText: getMyCalendarTextColor(calendarName),
                                start: start,
                                end: end
                            })
                        }
        
                        function getMyCalendarColor(calendarName) {
                            // assign colors via the calendar names, use calendar name as set in ical
                            if (calendarName === 'calendar1') {
                                return '#FF0000';
                            } else if (calendarName === 'calendar2') {
                                return '#44739e'
                            } else if (calendarName === 'calendar3') {
                                return '#32a852'
                            }
                        }
        
                        function getMyCalendarTextColor(calendarName) {
                            // assign colors via the calendar names, use calendar name as set in ical
                            if (calendarName === 'calendar1') {
                                return '#FFFFFF';
                            } else if (calendarName === 'calendar2') {
                                return '#FFFFFF'
                            } else if (calendarName === 'calendar3') {
                                return '#FFFFFF'
                            }
                        }
                    }
        
                    // Enter the destination data point that is to be used as object ID in the widget                
                    setState('0_userdata.0.ical2Calendar', JSON.stringify(calList), true);
                }
            } catch (e) {
                console.error(`ical2MaterialDesignCalendarWidget: message: ${e.message}, stack: ${e.stack}`);
            }
        }
        
        ical2CalendarWidget();
        

        Ich habe mir dieses einfach aus den Docs von Github entnommen. Weiß aber nicht genau, ob ich da jetzt noch was ändern muss.

        sigi234 1 Reply Last reply Reply Quote 0
        • sigi234
          sigi234 Forum Testing Most Active @jojo regneup last edited by sigi234

          @jojo-regneup

          Das ist meines was funktioniert:

          // 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.ical0calendar'
          createState(datapointId, "[]", {
            read: true, 
            write: false, 
            desc: "JSON String for Calendar Widget", 
            type: "string", 
            def: "[]"
          });
           
          function ical2CalendarWidget() {
              try {
                  let calList = [];
           
                  for (var inst = 0; inst <= instances.length - 1; inst++) {
                      let icalObj = getState(instances[inst]).val;
           
                      if (icalObj) {
                          for (var i = 0; i <= icalObj.length - 1; i++) {
                              let item = icalObj[i];
           
                              // extract calendar color
                              let calendarName = item._class.split(' ')[0].replace('ical_', '');
           
                              let startTime = moment(item._date);
                              let endTime = moment(item._end);
                              
                              let start = startTime.format("YYYY-MM-DD HH:mm");
                              let end = endTime.format("YYYY-MM-DD HH:mm");
           
                              if (startTime.format('HH:mm') === '00:00' && endTime.format('HH:mm') === '00:00') {
                                  // is full-day event
                                  if (endTime.diff(startTime, 'hours') === 24) {
                                      // full-day event, one day
                                      start = startTime.format("YYYY-MM-DD");
                                      end = startTime.format("YYYY-MM-DD");
                                  } else {
                                      // full-day event, multiple days
                                      start = startTime.format("YYYY-MM-DD");
                                      end = endTime.format("YYYY-MM-DD");
                                  }
                              }
           
                              // create object for calendar widget
                              calList.push({
                                  name: item.event,
                                  color: getMyCalendarColor(calendarName),
                                  colorText: getMyCalendarTextColor(calendarName),
                                  start: start,
                                  end: end
                              })
                          }
           
                          function getMyCalendarColor(calendarName) {
                              // assign colors via the calendar names, use calendar name as set in ical
                              if (calendarName === 'Sigi') {
                                  return '#0094ff';
                              } else if (calendarName === 'Geburtstage') {
                                  return '#ff9214'
                              } else if (calendarName === 'Abfall Neuhofen') {
                                  return '#0094ff'
                              }
                          }
          
                          function getMyCalendarTextColor(calendarName) {
                              // assign colors via the calendar names, use calendar name as set in ical
                              if (calendarName === 'Sigi') {
                                  return '#FFFFFF';
                              } else if (calendarName === 'Geburtstage') {
                                  return '#FFFFFF'
                              } else if (calendarName === 'Abfall Neuhofen') {
                                  return '#FFFFFF'
                              }
                          }
                      }
           
                      // Enter the destination data point that is to be used as object ID in the widget                
                      setState(datapointId, JSON.stringify(calList), true);
                  }
              } catch (e) {
                  console.error(`ical2MaterialDesignCalendarWidget: message: ${e.message}, stack: ${e.stack}`);
              }
          }
           
          ical2CalendarWidget();
          

          calendarName musst du natürlich an deine anpassen

          jojo regneup 1 Reply Last reply Reply Quote 0
          • jojo regneup
            jojo regneup @sigi234 last edited by

            @sigi234
            Danke für den Hinweis. Jedoch sollte das ja schon so passen, weil mein Kalender genauso wie im Skript calendar1 heißt:
            8746af61-98ad-4e6b-9192-66303dbe4fdf-image.png
            Jedoch bekomme ich immernoch genau den gleichen Fehler im Protokoll wie vorher.
            b95fcc5b-3d6b-41f6-9c37-ee5093e2b016-image.png
            Gibt es irgendeine Sache die ich übersehen habe?

            sigi234 2 Replies Last reply Reply Quote 0
            • sigi234
              sigi234 Forum Testing Most Active @jojo regneup last edited by sigi234

              @jojo-regneup

              Zeile 84

              jojo regneup 1 Reply Last reply Reply Quote 0
              • jojo regneup
                jojo regneup @sigi234 last edited by

                @sigi234
                In Zeile 84 wird der Datenpunkt erstellt.
                d335315c-05bd-49ad-9c4a-3fc1f88ba217-image.png
                Muss ich diesen Vorher manuell erstellen, damit dann der Inhalt vom Skript überschrieben werden kann oder wird der Datenpunkt automatisch erstellt?

                1 Reply Last reply Reply Quote 0
                • sigi234
                  sigi234 Forum Testing Most Active @jojo regneup last edited by

                  @jojo-regneup

                  Wenn unter userdata, hast du den DP auch angelegt?

                  jojo regneup 1 Reply Last reply Reply Quote 1
                  • jojo regneup
                    jojo regneup @sigi234 last edited by

                    @sigi234
                    Ahh super, jetzt hats geklappt. Dachte der Datenpunkt wird von dem Skript automatisch erstellt
                    Danke für die Hilfe

                    Ro75 1 Reply Last reply Reply Quote 0
                    • Ro75
                      Ro75 @jojo regneup last edited by

                      @jojo-regneup sagte in Material Design Widgets: Calendar Widget:

                      Dachte der Datenpunkt wird von dem Skript automatisch erstellt

                      Wird er auch, aber dann muss Zeile 8 auch korrekt sein.

                      Ro75.

                      1 Reply Last reply Reply Quote 0
                      • D
                        demaxo last edited by

                        Hallo,

                        ich erarbeite gerade mühsam meine VIS. Und ich bin froh, dass es soviele Fachleute gibt, die dabei weiterhelfen.

                        Derzeit bin ich gerade mit dem Kalender beschäftigt. Das ganze funktioniert auch schon mal grundsätzlich. Aber: Alle Termine werden mir im Kalender-Widget in der VIS eine Stunde früher angezeigt.

                        Jemand eine Idee, was da schiefläuft?

                        Am iCal-Adapter dürfte es nicht liegen, dieser holt die Termine korrekt ab. Es scheint also etwas bei Ausführung des Scriptes schief zu laufen. Das Script habe ich mir von GitHub geladen und es unverändert übernommen.

                        Viele Grüße
                        Jens

                        1 Reply Last reply Reply Quote 0
                        • D
                          demaxo last edited by demaxo

                          This post is deleted!
                          1 Reply Last reply Reply Quote 0
                          • First post
                            Last post

                          Support us

                          ioBroker
                          Community Adapters
                          Donate

                          756
                          Online

                          31.7k
                          Users

                          79.7k
                          Topics

                          1.3m
                          Posts

                          vis
                          45
                          200
                          25700
                          Loading More Posts
                          • Oldest to Newest
                          • Newest to Oldest
                          • Most Votes
                          Reply
                          • Reply as topic
                          Log in to reply
                          Community
                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                          The ioBroker Community 2014-2023
                          logo