Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. ical Kalender Farben anpassen?

    NEWS

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    ical Kalender Farben anpassen?

    This topic has been deleted. Only users with topic management privileges can see it.
    • Feuersturm
      Feuersturm @n3ucr0n last edited by

      @n3ucr0n Hi, ich werde mal schauen, ob ich das Verhalten bei mir nachstellen kann und ob ich eine Idee habe.

      haselchen 1 Reply Last reply Reply Quote 0
      • haselchen
        haselchen Most Active @Feuersturm last edited by

        Mahlzeit,

        ich war auch auf der Suche nach verschiedenen Farben für Datum und Termine, da nach einem ICAL Update alles weg war.
        Da bin ich auf den Thread hier gestoßen, allerdings habe ich mich gefragt, ob man tatsächlich Skripte etc.braucht und habe rumprobiert.
        Ich habe nun mit den vorhandenen Mitteln in VIS und in den Adaptereinstellungen genau das hinbekommen. Verschiedene Farbe für Event und Datum.

        815666de-3ac4-4104-bf17-f9b58e8f2d05-grafik.png

        4c322ebd-f0ba-49df-82de-2803728c136c-grafik.png

        Almixx 1 Reply Last reply Reply Quote 0
        • N
          nyuk @Feuersturm last edited by

          @Feuersturm Zunächst vielen Dank, bei mir funktioniert es Prima. Ich finde es nur Schade, dass bei mir nur 3 Tage angezeigt werden. Es wäre schön, wenn die ersten 3 Tage mit "Heute", "Morgen" und "Übermorgen" bezeichnet werden und die restlichen Tage (>30Tage) einfach als Datum.

          Ist das irgendwie Möglich?

          Feuersturm 2 Replies Last reply Reply Quote 0
          • bahnuhr
            bahnuhr Forum Testing Most Active @Feuersturm last edited by

            @Feuersturm sagte in ical Kalender Farben anpassen?:

            Sollte jetzt wieder besser sein:

            Danke für die Erweiterung der Zeilenabstände, klappt gut.

            Und auch danke für das Lob.

            Hatte zwar damals wirklich viel geändert aber das eigentliche Lob gilt:
            "Script stammt von uhula und sputnik"

            Denn von diesen stammt das Script.

            mfg
            Dieter

            1 Reply Last reply Reply Quote 0
            • Feuersturm
              Feuersturm @nyuk last edited by

              @nyuk Hi, das sollte eigentlich schon möglich sein. Poste doch bitte einmal einen Screenshot mit den Einstellungen von deiner ical Instanz.

              Ich werde mir das Verhalten heute im Laufe des Tages bei mir auch nochmal genauer anschauen.

              1 Reply Last reply Reply Quote 0
              • Feuersturm
                Feuersturm @nyuk last edited by

                @nyuk Ich hab es gerade bei mir einmal mit dem aktuellen Skript ausprobiert. Bei den Geburtstagen habe ich das Ergebnis was du dir vorstellst:
                b800ed4d-a335-4d94-8a83-83d6f6f76d57-grafik.png
                So sehen meine Haupteinstellungen bei der entsprechenden ical Instanz aus:
                7b18d5c0-2b0c-4ec3-9671-021b895b750b-grafik.png

                T 1 Reply Last reply Reply Quote 0
                • T
                  Toni61 @Feuersturm last edited by Toni61

                  Selbst gelöst habe verstanden das "javascript.0.ical.html" auch die Ordnerstrucktur ist und nicht der Name. Der Name ist nur html...
                  Manchmal kann es so einfach sein....

                  Hallo zusammen,
                  irgentwie habe ich Pobleme nach der Anleitung den Kalender umzusetzen hatte erst am Anfang das Datumproblem was ich aber gelöst bekommen habe.
                  Jetzt bekomme ich die Fehlermeldung:

                  javascript.0	2020-11-01 10:05:35.481	warn	(12000) at script.js.common.Meine_Geräte.Kalender_Test_2:121:3
                  javascript.0	2020-11-01 10:05:35.481	warn	(12000) at script.js.common.Meine_Geräte.Kalender_Test_2:118:1
                  javascript.0	2020-11-01 10:05:35.481	warn	(12000) at iCalToHTMLTable (script.js.common.Meine_Geräte.Kalender_Test_2:103:5)
                  javascript.0	2020-11-01 10:05:35.481	warn	(12000) at setState (/opt/iobroker/node_modules/iobroker.javascript/lib/sandbox.js:1368:20)
                  javascript.0	2020-11-01 10:05:35.479	warn	(12000) State "javascript.0.Status.Ical.html" not found
                  

                  Wo habt ihr euren Datenpunkt erstellt und wie habt ihr ihn formatiert? Ich habe ihn zu den anderen Datenpunkten erstellt aber ohne Erfolg bzw. es wurde gleich ein Unterordner erstellt mit javascript / 0/ ical/ und dann der Datenpunkt aber dort wird mir nicht der link eingetragen.
                  Ich habe die Felder als Zeichenkette formatiert und als Rolle html.

                  Könnt ihr das Script sowie den Datenpunkt mal zeigen?
                  Vielen Dank.

                  Toni61

                  Feuersturm 1 Reply Last reply Reply Quote 0
                  • Feuersturm
                    Feuersturm @Toni61 last edited by

                    @Toni61 Hallo Toni, poste doch bitte mal einen Screenshot von deinen Objekten, was du dort angelegt hast.
                    Zusätlich einmal aus deinem Quellcode die Zeile, um zu schauen was dort eingetragen ist.

                    var idCalHTMLtable = '.....';
                    

                    Wenn du hierhin klickst wird automatisch der richtige "Pfad" zum Datenpunkt kopiert den du im Skript eintragen musst.
                    15d3837c-23d0-4e8e-8c3d-e6035b3df863-grafik.png

                    Der Datenpunkt ist bei mir so konfiguriert
                    df39f738-ef73-4b71-b74b-4316b55b0f44-grafik.png

                    1 Reply Last reply Reply Quote 0
                    • Almixx
                      Almixx @haselchen last edited by Almixx

                      @haselchen und wie hast du das gemacht?
                      habs gefunden, steht ja in der Anleitung 🙈

                      1 Reply Last reply Reply Quote 0
                      • A
                        andyf2000 @Feuersturm last edited by

                        @Feuersturm Hallo.
                        Gratulation Dir und Bahnuhr für dieses grandiose Skript.
                        Was ich noch nicht ganz verstehe, sind die bgcolor Einstellungen.

                        Ich "Missbrauche" die Müllkalender-Optionen für Geburtstagseinträge.
                        Immer wenn ein Eintrag im Kalender aufscheint, bei dem das Wort "GEBURTSTAG" enthalten ist, soll der Eintrag in einer anderen Farbe angezeigt werden. Das habe ich soweit mal geschafft.
                        Aber, wie ist "bgcolor" definiert - ist das die Text-Hintergrund-Farbe? Das wäre nämlich auch ganz schön wenn die Geburtstage so hervorgehoben werden würden. (oder auch andere wichtige Jahrestage)

                        Egal was ich bei bgcolor als Farbe definiere, es ändert sich nichts.

                         var _bgcolor = "";
                                if(calendar.name == "Familie") {
                                    if(entry.event == "a") {
                                        _bgcolor = "#a0e878";
                                        _color="color:#a0e878";
                                    }
                                    else if(entry.event <= "GEBURTSTAG!") {
                                        _bgcolor = "color:white"; 
                                        _color = "color:#003391";
                                    }
                                    else if(entry.event == "Blaue Tonne") {
                                        _bgcolor = "#508fdc";
                                        _color="color:#508fdc";
                                    }
                                    else if(entry.event == "Gelber Sack") {
                                        _bgcolor = "white";
                                        _color="color:#eee06d";
                                    }
                        

                        was mache ich falsch...

                        LG andy

                        1 Reply Last reply Reply Quote 0
                        • bahnuhr
                          bahnuhr Forum Testing Most Active last edited by

                          bgcolor ist der Balken der links angezeigt wird, wenn dieser Balken eingeschaltet wird.

                          Und dies kannst du ziemlich oben auf true setzen.
                          balken = true

                          L 1 Reply Last reply Reply Quote 0
                          • L
                            lucajordi @bahnuhr last edited by

                            @bahnuhr

                            Hallo, guten Morgen!

                            Ich habe das Script installiert, funktioniert!
                            Was bei mir nicht geht, ist den Balken anzeigen und der Abstand zwischen den Tagen...

                            Wo habe ich das Brett vor dem Kopf?

                            f2b95f66-4037-4e9b-b9f0-80c5f6150b8d-image.png

                            e07f59f6-9ded-4c8a-bbf7-53a5855a4696-image.png

                            3152f6fc-84c8-4b69-9fef-c9f0ff5672dd-image.png

                            Danke euch...

                            bahnuhr Feuersturm 2 Replies Last reply Reply Quote 0
                            • bahnuhr
                              bahnuhr Forum Testing Most Active @lucajordi last edited by

                              @lucajordi sagte in ical Kalender Farben anpassen?:

                              @bahnuhr

                              Was bei mir nicht geht, ist den Balken anzeigen und der Abstand zwischen den Tagen...

                              Dann hast du an dem Script etwas geändert.
                              Das ursprüngliche Script funktioniert einwandfrei.

                              
                              // Script stammt von uhula und sputnik
                              // Das Script greift auf die ical.0.html zu und ändert den Text.
                              // Gespeichert wird das geänderte Script in "javascript.0.Sonstige.ical.html"
                              // Geändert und erweitert in 12/2017 von bahnuhr
                              
                              
                              var idCal = "ical.0";
                              var idCalTrigger   = idCal + ".data.trigger";
                              var idCalTable     = idCal + ".data.table";
                              var idCalHTML      = idCal + ".data.html";
                              var idCalHTMLtable = 'javascript.0.Sonstige.Ical.html';
                              
                              var anz_ganztags = false;   // wenn true wird bei Ganztags-Terminen als time auch "ganzer Tag" angezeigt; wenn false erfolgt gar keine Anzeige
                              var anz_time = true;        // wenn true werden die Uhrzeiten angezeigt; wenn false erfolgt gar keine Anzeige
                              var balken = true;         // wenn true wird Balken links angezeigt; wenn false dann erfolgt keine Anzeige
                              var abstand_zwischen_Tagen = false; // wenn true wird ein Abstand zwischen den Terminen gesetzt, wenn diese nicht am gleichen Tag stattfinden
                              
                              function iCalToHTMLTable() {
                                  var html     = "<table style='font-size:0.9em;'><tbody>";
                                  var calTable = getState(idCalTable);
                                  var inst     = getObject("system.adapter."+idCal);
                                  var instopt  = inst.native;
                                  var calendar = {};
                              
                                  for (var i = 0; i < calTable.val.length; i++) { 
                                      var entry = calTable.val[i];
                                      var _date = new Date(entry._date);
                                      var _time = "";
                              
                              
                                      // "_time und date" Variable festlegen
                                      if (entry.date.indexOf("&#8594") >= 0) {    // Pfeil ist enthalten
                                          if (entry.date.indexOf(":") >= 0) {         // Uhrzeit ist enthalten
                                              _time = "bis " + (entry.date).substring(entry.date.length-5,entry.date.length);
                                              entry.date = Datum_holen("tm");
                                          } else {
                                              _time= "ganzer Tag";
                                              entry.date = Datum_holen("tm");
                                          }
                                      } else {                                    // Pfeil ist nicht enthalten
                                          if (entry.date.indexOf(":") >= 0) {         // Uhrzeit ist enthalten
                                              _time = (entry.date).substring(entry.date.length-11,entry.date.length);
                                          } else {
                                              _time= "ganzer Tag";
                                          }
                                          entry.date = getFormattedDate(_date);
                                      }
                              
                              
                                      if ( entry._calName != calendar.name ) {
                                          calendar = {};
                                          for (var c = 0; c < instopt.calendars.length; c++ ) {
                                              if (entry._calName == instopt.calendars[c].name ) {
                                                  calendar = instopt.calendars[c];
                                                  break;
                                              }
                                          }
                                      }
                              
                                      var _color = "color:"+calendar.color;
                                      if (entry._class.includes("ical_today")) _color = "color:red;";
                                      else if (entry._class.includes("ical_tomorrow")) _color = "color:orange";
                                      else if (entry._class.includes("ical_dayafter")) _color = "color:yellow";
                              
                                      var _bgcolor = "";
                                      if(calendar.name == "Müll") {
                                          if(entry.event == "Bio Tonne") {
                                              _bgcolor = "#a0e878";
                                              _color="color:#a0e878";
                                          }
                                          else if(entry.event == "Restmüll Tonne") {
                                              _bgcolor = "#ce6f6f"; 
                                              _color="color:#ce6f6f";
                                          }
                                          else if(entry.event == "Blaue Tonne") {
                                              _bgcolor = "#508fdc";
                                              _color="color:#508fdc";
                                          }
                                          else if(entry.event == "Gelbe Tonne") {
                                              _bgcolor = "#eee06d";
                                              _color="color:#eee06d";
                                          }
                                      }
                                      else _bgcolor = calendar.color;
                                      
                                      if (balken === false) _bgcolor = "";
                                      
                                      if (_bgcolor !== "") html+="<tr style='background:transparent; background-image: linear-gradient("+_bgcolor+","+_bgcolor+"); background-size: 6px 90%; background-repeat: no-repeat;'>";
                                      else html+="<tr>";
                              
                              if (i>0 && (abstand_zwischen_Tagen == true)){
                                          if (calTable.val[i].date != calTable.val[i-1].date){
                                              html+="<tr><td></td></tr>";
                                              html+="<tr><td></td></tr>";
                                              html+="<tr><td></td></tr>";
                                              html+="<tr><td></td></tr>";    
                                          }
                                      }
                              
                                          var abstand = "15px;";
                                          if (balken === false) abstand = "3px;";
                                          html+="<td style='font-size:1.1em; padding-left:"+abstand+_color+"'>"+entry.date+"</td>";
                              
                                      if ((_time === "ganzer Tag" && anz_ganztags === false) || anz_time === false) {
                                          html+="<td style='font-size:1.1em; padding-left:5px;"+_color+"'>"+entry.event+"</td>";                      // nur event anzeigen
                                      } else {
                                          html+="<td style='font-size:1.1em; padding-left:5px;"+_color+"'>"+_time + "  " + entry.event+"</td>";       // time + event wird angezeigt
                                      }
                                      html+="</tr>";
                                  }
                              
                                  html+="</body></table>";    
                                  setState(idCalHTMLtable, html);    
                              }
                              
                              function getFormattedDate(date) {
                                  var month = (1 + date.getMonth()).toString();
                                  month = month.length > 1 ? month : '0' + month;
                                  var day = date.getDate().toString();
                                  day = day.length > 1 ? day : '0' + day;
                                  return day + '.' + month + '.';
                              }
                              
                              on({id: idCalTable, change: "ne"}, function (obj) {
                                  iCalToHTMLTable();
                              });
                              
                              iCalToHTMLTable();
                              
                              
                              // als CSS einfügen ------------------------------------------------------------------
                              /*
                              .icalWarn { font-weight:normal; }
                              .icalWarn2  { color:red; }
                              .icalPreWarn { font-weight:normal; }
                              .icalPreWarn2  { color:orange; }
                              .icalPrePreWarn { font-weight:normal; }
                              .icalPrePreWarn2  { color:yellow; }
                              .icalNormal { font-weight:normal; }
                              
                              .icalNormal.iCal-Müll {
                                  font-weight:normal;
                                  color:#f87149;
                              }
                              .icalNormal.iCal-Märkte {
                                  font-weight:normal;
                                  color:#bc7dd8;
                              }
                              */
                              
                              
                              

                              Und in VIS kommt dann:
                              1b3ee90a-0e7e-471a-ad70-894293c3eefe-image.png

                              L 1 Reply Last reply Reply Quote 0
                              • Feuersturm
                                Feuersturm @lucajordi last edited by Feuersturm

                                @lucajordi welchen Datenpunkt hast du hinter deinem widget hinterlegt? Das Skript lernt einen neuen Datenpunkt idcalhtmltable im Javascript.0 Pfad (oder was du im Skript entsprechend angibst) an. Den musst du im widget hinterlegen.

                                L 1 Reply Last reply Reply Quote 0
                                • L
                                  lucajordi @Feuersturm last edited by

                                  @feuersturm
                                  45e51575-4325-4c62-aa0a-f028fba0b89f-image.png

                                  1 Reply Last reply Reply Quote 0
                                  • L
                                    lucajordi @bahnuhr last edited by

                                    @bahnuhr
                                    Habe dein Script nochmal neu eingefügt...

                                    immernoch das selbe...

                                    bahnuhr 1 Reply Last reply Reply Quote 0
                                    • bahnuhr
                                      bahnuhr Forum Testing Most Active @lucajordi last edited by

                                      @lucajordi sagte in ical Kalender Farben anpassen?:

                                      @bahnuhr
                                      Habe dein Script nochmal neu eingefügt...

                                      immernoch das selbe...

                                      Das glaub ich nicht.

                                      Du hast wirklich diesen DP angelegt:
                                      "javascript.0.Sonstige.ical.html"

                                      Dann funktioniert dies auch.

                                      L 1 Reply Last reply Reply Quote 0
                                      • sigi234
                                        sigi234 Forum Testing Most Active last edited by

                                        @bahnuhr

                                        Getestet, funktioniert.

                                        bahnuhr 1 Reply Last reply Reply Quote 1
                                        • bahnuhr
                                          bahnuhr Forum Testing Most Active @sigi234 last edited by bahnuhr

                                          @sigi234 sagte in ical Kalender Farben anpassen?:

                                          Getestet, funktioniert.

                                          Ich weiß, aber trotzdem danke 😉
                                          mfg
                                          Dieter

                                          1 Reply Last reply Reply Quote 0
                                          • L
                                            lucajordi @bahnuhr last edited by

                                            @bahnuhr said in ical Kalender Farben anpassen?:

                                            Sonstige.ical.html

                                            Ähhhh, welchen Datenpunkt muss ich anlegen?

                                            Dachte der wird durch das Script angelegt?

                                            Sorry, wenn ich zu doof bin... ?!

                                            Feuersturm 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            460
                                            Online

                                            31.7k
                                            Users

                                            79.8k
                                            Topics

                                            1.3m
                                            Posts

                                            vis
                                            22
                                            112
                                            10670
                                            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