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

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. ical Kalender Farben anpassen?

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.7k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.2k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    3.1k

ical Kalender Farben anpassen?

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
112 Beiträge 22 Kommentatoren 15.7k Aufrufe 20 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.
  • N n3ucr0n

    @Feuersturm
    Die Balken funktionieren jetzt.

    Zwei andere Punkte/Fragen hat mein Test ergeben:

    1. Die Farben für die kommenden Termine ändere ich ja über die Codezeilen:

      var _color = "color:"+calendar.color;
      if (entry._class.includes("ical_today")) _color = "color:#cc0505;";
      else if (entry._class.includes("ical_tomorrow")) _color = "color:#808080";
      else if (entry._class.includes("ical_dayafter")) _color = "color:cfcfcf";

    An dieser Stelle kann ich jedoch für "Übermorgen" keine Farbänderung vornehmen, oder?

    2. Auch wenn ich selbst diese Funktion nicht nutzen werde: Das Umschalten der Variable var anz_time = true; bringt keine Veränderung.
    Bei mir wird die Uhrzeit nie angezeigt (als ob die Variable immer auf false stehen würde)

    Für mich funktioniert das Skript so nun super. Der Rest ist vielleicht für andere Nutzer interessant :-)

    Danke für die Mühen die Du dir machst :blush: :clap:

    Edit: @Feuersturm Punkt 2 hat sich erledigt. Keine Ahnung warum aber es hat einfach etwas länger gedauert bis die korrekte Formatierung übernommen wurde. Die Zeiten werden aber wie gewünscht dargestellt!

    FeuersturmF Online
    FeuersturmF Online
    Feuersturm
    schrieb am zuletzt editiert von
    #35

    @n3ucr0n
    Danke für das Lob. Der Größte Lob geht aber (auch von mir) an @bahnuhr, er hat das Skript erstellt. Ich hab es nur um meine Bedürfnisse erweitert.

    zu Punkt 1:
    Die Farbe für Übermorgen vergibst du mit dieser Zeile:

    else if (entry._class.includes("ical_dayafter")) _color = "color:cfcfcf";
    

    Funktioniert bei mir ohne Probleme.

    zu 2.
    Bei den Uhrzeiten gibt es noch ein komisches Verhalten, was ich noch nicht weiter untersucht habe.
    Wenn man das Skript mehrfach startet startet, weil man gerade am programmieren ist verschwinden die Uhrzeiten. Was hilft ist, wenn das Skript läuft und mann dann die ical Instanz einmal pausiert und neu startet. Danach ist alles gut und die Zeiten bleiben angezeigt.

    N A 3 Antworten Letzte Antwort
    1
    • FeuersturmF Feuersturm

      @n3ucr0n
      Danke für das Lob. Der Größte Lob geht aber (auch von mir) an @bahnuhr, er hat das Skript erstellt. Ich hab es nur um meine Bedürfnisse erweitert.

      zu Punkt 1:
      Die Farbe für Übermorgen vergibst du mit dieser Zeile:

      else if (entry._class.includes("ical_dayafter")) _color = "color:cfcfcf";
      

      Funktioniert bei mir ohne Probleme.

      zu 2.
      Bei den Uhrzeiten gibt es noch ein komisches Verhalten, was ich noch nicht weiter untersucht habe.
      Wenn man das Skript mehrfach startet startet, weil man gerade am programmieren ist verschwinden die Uhrzeiten. Was hilft ist, wenn das Skript läuft und mann dann die ical Instanz einmal pausiert und neu startet. Danach ist alles gut und die Zeiten bleiben angezeigt.

      N Offline
      N Offline
      n3ucr0n
      schrieb am zuletzt editiert von
      #36

      @Feuersturm
      Stimmt! Ich Idiot habe in "Dayafter" die gleiche Farbe eingestellt wie für den Kalender generell - daher wurde die Farbe für übermorgen natürlich mit der identischen Farbe der restlichen Tage die darauf folgen angezeigt. :cold_sweat: :man-facepalming:

      Damit habe ich alles wie ich es mir wünsche! Danke =)
      Und natürlich auch Danke an @bahnuhr :upside_down_face:

      1 Antwort Letzte Antwort
      1
      • FeuersturmF Feuersturm

        @n3ucr0n
        Danke für das Lob. Der Größte Lob geht aber (auch von mir) an @bahnuhr, er hat das Skript erstellt. Ich hab es nur um meine Bedürfnisse erweitert.

        zu Punkt 1:
        Die Farbe für Übermorgen vergibst du mit dieser Zeile:

        else if (entry._class.includes("ical_dayafter")) _color = "color:cfcfcf";
        

        Funktioniert bei mir ohne Probleme.

        zu 2.
        Bei den Uhrzeiten gibt es noch ein komisches Verhalten, was ich noch nicht weiter untersucht habe.
        Wenn man das Skript mehrfach startet startet, weil man gerade am programmieren ist verschwinden die Uhrzeiten. Was hilft ist, wenn das Skript läuft und mann dann die ical Instanz einmal pausiert und neu startet. Danach ist alles gut und die Zeiten bleiben angezeigt.

        N Offline
        N Offline
        n3ucr0n
        schrieb am zuletzt editiert von
        #37

        @Feuersturm
        Hallo Feuersturm, da bin ich schon wieder :flushed:

        Mir ist folgendes Verhalten aufgefallen:
        Bei Terminen, die länger als einen Tag gehen, wird der Termin ausschließlich an dem Tag angezeigt, an dem der Termin startet.
        Ist es machbar, dass der Termin an jedem Tag angezeigt wird, über den er andauert?

        Die Termine die mit einem roten Pfeil markiert sind, gehen eigentlich von Freitag bis Sonntag und sind nicht nur am Freitag:
        Unbenannt.PNG

        FeuersturmF 1 Antwort Letzte Antwort
        0
        • N n3ucr0n

          @Feuersturm
          Hallo Feuersturm, da bin ich schon wieder :flushed:

          Mir ist folgendes Verhalten aufgefallen:
          Bei Terminen, die länger als einen Tag gehen, wird der Termin ausschließlich an dem Tag angezeigt, an dem der Termin startet.
          Ist es machbar, dass der Termin an jedem Tag angezeigt wird, über den er andauert?

          Die Termine die mit einem roten Pfeil markiert sind, gehen eigentlich von Freitag bis Sonntag und sind nicht nur am Freitag:
          Unbenannt.PNG

          FeuersturmF Online
          FeuersturmF Online
          Feuersturm
          schrieb am zuletzt editiert von
          #38

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

          haselchenH 1 Antwort Letzte Antwort
          0
          • FeuersturmF Feuersturm

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

            haselchenH Offline
            haselchenH Offline
            haselchen
            Most Active
            schrieb am zuletzt editiert von
            #39

            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

            Synology DS218+ & 2 x Fujitsu Esprimo (VM/Container) + FritzBox7590 + 2 AVM 3000 Repeater & Homematic & HUE & Osram & Xiaomi, NPM 10.9.4, Nodejs 22.21.0 ,JS Controller 7.0.7 ,Admin 7.7.19

            AlmixxA 1 Antwort Letzte Antwort
            0
            • FeuersturmF Feuersturm

              Ich war letzte Nacht erfolgreich und konnte meine Änderung im Skript ergänzen. Aktiviert wird die neue Anzeige über diese Variable:

              var ersetze_datum_in_Worte = true;
              
              // 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.ical.html"
              // Geändert und erweitert in 12/2017 von bahnuhr
              // 02.02.2020 - Feuersturm - Anstatt der Daten für heute, morgen, übermorgen wird der String "Heute" "Morgen" "Übermorgen" angezeigt
               
               //Quelle: https://forum.iobroker.net/topic/26782/ical-kalender-farben-anpassen/2
               
              var idCal = "ical.0";
              var idCalTrigger   = idCal + ".data.trigger";
              var idCalTable     = idCal + ".data.table";
              var idCalHTML      = idCal + ".data.html";
              var idCalHTMLtable = 'javascript.0.icalToHtml.ical_0_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 = false;         // wenn true wird Balken links angezeigt; wenn false dann erfolgt keine Anzeige
              var ersetze_datum_in_Worte = true;    // wenn true wird anstatt des Datums für heut, morgen, übermorgen der String "Heute" "Morgen" "Übermorgen" angezeigt
              
              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(ersetze_datum_in_Worte == true) {
                          if(entry.date == Datum_holen("tm"))
                          {
                              entry.date = "Heute";
                          } 
                          else if (entry.date == Datum_morgen_holen("tm")){
                              entry.date ="Morgen";
                          }
                          else if (entry.date == Datum_uebermorgen_holen("tm")){
                              entry.date="Übermorgen";
                          }
                      }        
               
               
                      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:#01DF01;";
                      else if (entry._class.includes("ical_tomorrow")) _color = "color:#FFBF00";
                      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>";
               
                          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();
              

              zusätzlich werden zwei neue Funktionen benötigt, um das Datum für morgen und übermorgen zu ermitteln. Diese Funktionen hab ich im Skript von @bahnuhr ergänzt

               
              //Quelle: https://forum.iobroker.net/topic/26782/ical-kalender-farben-anpassen/12
              // Tag, Monat, Jahr -> aktuelles Datum als String               -> Aufruf der Funktion mit:   Datum_holen("tmj") oder Datum_holen("tm") oder Datum_holen("lang")
              function Datum_holen(x) {
                  var vTag = new Date().getDate(),
                      vMonat = new Date().getMonth()+1,
                      vJahr = new Date().getFullYear();
                  if (vTag < 10) {vTag = "0" + vTag}
                  if (vMonat < 10) {vMonat = "0" + vMonat}
                  var sDatum_tmj = vTag + "." + vMonat + "." + vJahr.toString().substr(2,2);  // String mit Tag + Monat + Jahr (Jahr mit 2 Stellen)
                  var sDatum_tm = vTag + "." + vMonat + ".";  // String mit Tag + Monat 
                  var sDatum_lang = vTag + "." + vMonat + "." + vJahr;  // String mit Tag + Monat + Jahr (Jahr mit 4 Stellen)
               
                  if (x === "tmj") {
                      return(sDatum_tmj);
                  } else if (x === "tm") {
                      return(sDatum_tm);
                  } else {
                      return(sDatum_lang);
                  }
              }
              
              
              // Tag, Monat, Jahr -> Datum des morgigen Tages als String               
              //-> Aufruf der Funktion mit:   Datum_morgen_holen("tmj") oder Datum_morgen_holen("tm") oder Datum_morgen_holen("lang")
              function Datum_morgen_holen(x){
                
                  var sDatum_tmj = formatDate(new Date().getTime() + 1 * 24 * 3600000, 'DD.MM.YY'); // String mit Tag + Monat + Jahr (Jahr mit 2 Stellen)
                  var sDatum_tm = formatDate(new Date().getTime() + 1 * 24 * 3600000, 'DD.MM.');
                  var sDatum_lang = formatDate(new Date().getTime() + 1 * 24 * 3600000, 'DD.MM.YYYY');  // String mit Tag + Monat + Jahr (Jahr mit 4 Stellen)
              
                  if (x === "tmj") {
                      return(sDatum_tmj);
                  } else if (x === "tm") {
                      return(sDatum_tm);
                  } else {
                      return(sDatum_lang);
                  }
              }
              
              
              // Tag, Monat, Jahr -> Datum des Tages für Übermorgen als String               
              //-> Aufruf der Funktion mit:   Datum_uebermorgen_holen("tmj") oder Datum_uebermorgen_holen("tm") oder Datum_uebermorgen_holen("lang")
              function Datum_uebermorgen_holen(x){
              
                  var sDatum_tmj = formatDate(new Date().getTime() + 2 * 24 * 3600000, 'DD.MM.YY'); // String mit Tag + Monat + Jahr (Jahr mit 2 Stellen)
                  var sDatum_tm =  formatDate(new Date().getTime() + 2 * 24 * 3600000, 'DD.MM.');
                  var sDatum_lang = formatDate(new Date().getTime() + 2 * 24 * 3600000, 'DD.MM.YYYY');  // String mit Tag + Monat + Jahr (Jahr mit 4 Stellen)
              
                  if (x === "tmj") {
                      return(sDatum_tmj);
                  } else if (x === "tm") {
                      return(sDatum_tm);
                  } else {
                      return(sDatum_lang);
                  }
              }
               
              // Stunde, Minute -> aktuelle Uhrzeit als String                 -> Aufruf der Funktion mit:   Zeit_holen("hms") oder Zeit_holen("hm")
              function Zeit_holen(x) {
                  var vStunde = new Date().getHours(),
                      vMinute = new Date().getMinutes(),
                      vSekunde = new Date().getSeconds();
                  if (vMinute <10) {vMinute = "0" + vMinute}
                  if (vSekunde <10) {vSekunde = "0" + vSekunde}
                  var sZeit_hms = vStunde + ":" + vMinute + ":" + vSekunde;  // String mit Stunde + Minute + Sekunde
                  var sZeit_hm = vStunde + ":" + vMinute;    // String mit Stunde + Minute 
                  if (x === "hms") {
                      return(sZeit_hms);
                  } else {
                      return(sZeit_hm);
                  }
              }
              

              So sieht es jetzt bei mir aus:
              4679f03b-c13e-4dc8-b454-3bb86cc01f30-grafik.png

              N Offline
              N Offline
              nyuk
              schrieb am zuletzt editiert von
              #40

              @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?

              FeuersturmF 2 Antworten Letzte Antwort
              0
              • FeuersturmF Feuersturm

                @n3ucr0n Sollte jetzt wieder besser sein:
                2a8566aa-bad6-4929-bb08-599df15c85da-grafik.png

                Probier es bitte einmal aus:

                // 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.ical.html"
                // Geändert und erweitert in 12/2017 von bahnuhr
                // 02.02.2020 - Feuersturm - Anstatt der Daten für heute, morgen, übermorgen wird der String "Heute" "Morgen" "Übermorgen" angezeigt
                // 19.06.2020 - Feuersturm - Über den Schalter abstand_zwischen_Tagen wird aktiviert, dass ein Absatz zwischen den Terminen der nächsten Tage entsteht
                // 20.06.2020 - Feuersturm - Korrektur damit bei aktiviertem "balken" diese wieder korrekt angezeigt werden, wenn auch "abstand_zwischen_Tagen" aktiv ist
                
                 //Quelle: https://forum.iobroker.net/topic/26782/ical-kalender-farben-anpassen/2
                 
                var idCal = "ical.2";
                var idCalHTMLtable = 'javascript.0.icalToHtml.ical_2_html';
                var idCalTrigger   = idCal + ".data.trigger";
                var idCalTable     = idCal + ".data.table";
                var idCalHTML      = idCal + ".data.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 ersetze_datum_in_Worte = true;    // wenn true wird anstatt des Datums für heut, morgen, übermorgen der String "Heute" "Morgen" "Übermorgen" angezeigt
                var abstand_zwischen_Tagen = true; // 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(ersetze_datum_in_Worte == true) {
                            if(entry.date == Datum_holen("tm"))
                            {
                                entry.date = "Heute";
                            } 
                            else if (entry.date == Datum_morgen_holen("tm")){
                                entry.date ="Morgen";
                            }
                            else if (entry.date == Datum_uebermorgen_holen("tm")){
                                entry.date="Übermorgen";
                            }
                        }        
                 
                 
                        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;
                                }
                            }
                        }
                
                        if (i>0 && (abstand_zwischen_Tagen == true)){
                            if (calTable.val[i].date != calTable.val[i-1].date){
                                html+="<tr><td></td><td></td></tr>";
                                html+="<tr><td></td><td></td></tr>";
                                html+="<tr><td></td><td></td></tr>";
                                html+="<tr><td></td><td></td></tr>";
                            }
                        }
                
                        var _color = "color:"+calendar.color;
                        if (entry._class.includes("ical_today")) _color = "color:#01DF01;";
                        else if (entry._class.includes("ical_tomorrow")) _color = "color:#FFBF00";
                        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>";
                
                        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>";   
                    console.log(html); 
                    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();
                 
                
                

                bahnuhrB Offline
                bahnuhrB Offline
                bahnuhr
                Forum Testing Most Active
                schrieb am zuletzt editiert von
                #41

                @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


                Wenn ich helfen konnte, dann Daumen hoch (Pfeil nach oben)!
                Danke.
                gute Forenbeiträge: https://forum.iobroker.net/topic/51555/hinweise-f%C3%BCr-gute-forenbeitr%C3%A4ge
                ScreenToGif :https://www.screentogif.com/downloads.html

                1 Antwort Letzte Antwort
                0
                • N nyuk

                  @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?

                  FeuersturmF Online
                  FeuersturmF Online
                  Feuersturm
                  schrieb am zuletzt editiert von
                  #42

                  @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 Antwort Letzte Antwort
                  0
                  • N nyuk

                    @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?

                    FeuersturmF Online
                    FeuersturmF Online
                    Feuersturm
                    schrieb am zuletzt editiert von
                    #43

                    @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 Antwort Letzte Antwort
                    0
                    • FeuersturmF Feuersturm

                      @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 Offline
                      T Offline
                      Toni61
                      schrieb am zuletzt editiert von Toni61
                      #44

                      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

                      FeuersturmF 1 Antwort Letzte Antwort
                      0
                      • T 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

                        FeuersturmF Online
                        FeuersturmF Online
                        Feuersturm
                        schrieb am zuletzt editiert von
                        #45

                        @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 Antwort Letzte Antwort
                        0
                        • haselchenH haselchen

                          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

                          AlmixxA Offline
                          AlmixxA Offline
                          Almixx
                          schrieb am zuletzt editiert von Almixx
                          #46

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

                          1 Antwort Letzte Antwort
                          0
                          • FeuersturmF Feuersturm

                            @n3ucr0n
                            Danke für das Lob. Der Größte Lob geht aber (auch von mir) an @bahnuhr, er hat das Skript erstellt. Ich hab es nur um meine Bedürfnisse erweitert.

                            zu Punkt 1:
                            Die Farbe für Übermorgen vergibst du mit dieser Zeile:

                            else if (entry._class.includes("ical_dayafter")) _color = "color:cfcfcf";
                            

                            Funktioniert bei mir ohne Probleme.

                            zu 2.
                            Bei den Uhrzeiten gibt es noch ein komisches Verhalten, was ich noch nicht weiter untersucht habe.
                            Wenn man das Skript mehrfach startet startet, weil man gerade am programmieren ist verschwinden die Uhrzeiten. Was hilft ist, wenn das Skript läuft und mann dann die ical Instanz einmal pausiert und neu startet. Danach ist alles gut und die Zeiten bleiben angezeigt.

                            A Offline
                            A Offline
                            andyf2000
                            schrieb am zuletzt editiert von
                            #47

                            @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 Antwort Letzte Antwort
                            0
                            • bahnuhrB Offline
                              bahnuhrB Offline
                              bahnuhr
                              Forum Testing Most Active
                              schrieb am zuletzt editiert von
                              #48

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

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


                              Wenn ich helfen konnte, dann Daumen hoch (Pfeil nach oben)!
                              Danke.
                              gute Forenbeiträge: https://forum.iobroker.net/topic/51555/hinweise-f%C3%BCr-gute-forenbeitr%C3%A4ge
                              ScreenToGif :https://www.screentogif.com/downloads.html

                              L 1 Antwort Letzte Antwort
                              0
                              • bahnuhrB bahnuhr

                                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 Offline
                                L Offline
                                lucajordi
                                schrieb am zuletzt editiert von
                                #49

                                @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...

                                bahnuhrB FeuersturmF 2 Antworten Letzte Antwort
                                0
                                • L lucajordi

                                  @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...

                                  bahnuhrB Offline
                                  bahnuhrB Offline
                                  bahnuhr
                                  Forum Testing Most Active
                                  schrieb am zuletzt editiert von
                                  #50

                                  @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


                                  Wenn ich helfen konnte, dann Daumen hoch (Pfeil nach oben)!
                                  Danke.
                                  gute Forenbeiträge: https://forum.iobroker.net/topic/51555/hinweise-f%C3%BCr-gute-forenbeitr%C3%A4ge
                                  ScreenToGif :https://www.screentogif.com/downloads.html

                                  L 1 Antwort Letzte Antwort
                                  0
                                  • L lucajordi

                                    @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...

                                    FeuersturmF Online
                                    FeuersturmF Online
                                    Feuersturm
                                    schrieb am zuletzt editiert von Feuersturm
                                    #51

                                    @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 Antwort Letzte Antwort
                                    0
                                    • FeuersturmF 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 Offline
                                      L Offline
                                      lucajordi
                                      schrieb am zuletzt editiert von
                                      #52

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

                                      1 Antwort Letzte Antwort
                                      0
                                      • bahnuhrB bahnuhr

                                        @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 Offline
                                        L Offline
                                        lucajordi
                                        schrieb am zuletzt editiert von
                                        #53

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

                                        immernoch das selbe...

                                        bahnuhrB 1 Antwort Letzte Antwort
                                        0
                                        • L lucajordi

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

                                          immernoch das selbe...

                                          bahnuhrB Offline
                                          bahnuhrB Offline
                                          bahnuhr
                                          Forum Testing Most Active
                                          schrieb am zuletzt editiert von
                                          #54

                                          @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.


                                          Wenn ich helfen konnte, dann Daumen hoch (Pfeil nach oben)!
                                          Danke.
                                          gute Forenbeiträge: https://forum.iobroker.net/topic/51555/hinweise-f%C3%BCr-gute-forenbeitr%C3%A4ge
                                          ScreenToGif :https://www.screentogif.com/downloads.html

                                          L 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

                                          369

                                          Online

                                          32.4k

                                          Benutzer

                                          81.5k

                                          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