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

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

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

ical Kalender Farben anpassen?

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
112 Beiträge 22 Kommentatoren 15.6k 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.
  • liv-in-skyL liv-in-sky

    @sit-in das ganze gibt es auch in einer anderen art zum anzeigen der ical instanzen

    https://forum.iobroker.net/topic/40691/html-tabelle-für-ical-adapter-mehrere-instanzen?page=1

    S Offline
    S Offline
    sit-in
    schrieb am zuletzt editiert von
    #91

    @liv-in-sky Danke, aber ich würde vorerst lieber bei diesem Thema bleiben und versuchen dieses am Laufen zu bekommen. :)

    1 Antwort Letzte Antwort
    0
    • S sit-in

      @bahnuhr Ich habe nun noch einmal das ganze thema durch gelesen und probiert...

      Aktueller Stand:

      1. Letztes Script von Dir, Bahnuhr, eingesetzt:
      // 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 = false;         // 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 = JSON.parse(getState(idCalTable).val);
      
         var inst     = getObject("system.adapter."+idCal);
      
         var instopt  = inst.native;
      
         var calendar = {};
      
       
      
         for (var i = 0; i < calTable.length; i++) { 
      
             log (calTable[i]);
      
             var entry = calTable[i];
      
             var _date = new Date(entry._date);
      
             var _time = "";
      
       
      
       
      
             // "_time und date" Variable festlegen
      
             log (entry);
      
             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[i].date != calTable[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; }
      
      {1}
      
      .icalNormal.iCal-Müll {
      
         font-weight:normal;
      
         color:#f87149;
      
      }
      
      .icalNormal.iCal-Märkte {
      
         font-weight:normal;
      
         color:#bc7dd8;
      
      }
      
      */
      
       
      
       
      
      

      Datenpunkt über ein extra script erzeugt:

      createState('javascript.0.Sonstige.Ical.html', '', {type: 'string',name: 'ical_geändert',read: true,write: true,role: 'per Script'}); 
      

      Die Scripte heißen bei mir so:

      464a23d9-37ac-44ac-b527-7d7ba96523cc-grafik.png

      Der Datenpunkt ist vorhanden/wurde durch das Script erstellt:
      c72a3ce6-7477-4fdc-8f29-befe20babd97-grafik.png

      Datenpunkt auch in der Vis bzw. im Widget "Basic - String (unescaped" verknüpft. Dennoch wird nichts angezeigt:
      57c552b7-2569-4ab0-bec4-fdf54af0e2a0-grafik.png

      Was mir auch auffällt sind die Fehler, die mir unterhalb des Scripts angezeigt werden:
      011edc5a-2e00-44b5-af76-528efc1e89df-grafik.png

      Ich probiere seit gestern nun schon seit einigen Stunden hin- und her... Dennoch komme ich nicht auf die Lösung und finde den Fehler nicht... -.-

      bahnuhrB Online
      bahnuhrB Online
      bahnuhr
      Forum Testing Most Active
      schrieb am zuletzt editiert von bahnuhr
      #92

      @sit-in

      hier nochmal das aktuelle Script was bei mir läuft:

      
      // 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 logging = false;
      
      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 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).val;
          var inst     = getObject("system.adapter."+idCal);
          var instopt  = inst.native;
          var calendar = {};
      
          for (var i = 0; i < calTable.length; i++) { 
              if (logging) log (calTable[i]);
              var entry = calTable[i];
              var _date = new Date(entry._date);
              var _time = "";
      
      
              // "_time und date" Variable festlegen
              if (logging) log (entry);
              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[i].date != calTable[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();
      
      
      
      

      Und dies als globales Script oder unten drunter setzen:

      
      // globale Variablen
      
      // 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);
          }
      }
      
      // 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);
          }
      }
      
      

      und jede zeile dann mal vergleichen.


      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

      S T Skyx3S E 4 Antworten Letzte Antwort
      2
      • S sit-in

        @bahnuhr Ich habe nun noch einmal das ganze thema durch gelesen und probiert...

        Aktueller Stand:

        1. Letztes Script von Dir, Bahnuhr, eingesetzt:
        // 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 = false;         // 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 = JSON.parse(getState(idCalTable).val);
        
           var inst     = getObject("system.adapter."+idCal);
        
           var instopt  = inst.native;
        
           var calendar = {};
        
         
        
           for (var i = 0; i < calTable.length; i++) { 
        
               log (calTable[i]);
        
               var entry = calTable[i];
        
               var _date = new Date(entry._date);
        
               var _time = "";
        
         
        
         
        
               // "_time und date" Variable festlegen
        
               log (entry);
        
               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[i].date != calTable[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; }
        
        {1}
        
        .icalNormal.iCal-Müll {
        
           font-weight:normal;
        
           color:#f87149;
        
        }
        
        .icalNormal.iCal-Märkte {
        
           font-weight:normal;
        
           color:#bc7dd8;
        
        }
        
        */
        
         
        
         
        
        

        Datenpunkt über ein extra script erzeugt:

        createState('javascript.0.Sonstige.Ical.html', '', {type: 'string',name: 'ical_geändert',read: true,write: true,role: 'per Script'}); 
        

        Die Scripte heißen bei mir so:

        464a23d9-37ac-44ac-b527-7d7ba96523cc-grafik.png

        Der Datenpunkt ist vorhanden/wurde durch das Script erstellt:
        c72a3ce6-7477-4fdc-8f29-befe20babd97-grafik.png

        Datenpunkt auch in der Vis bzw. im Widget "Basic - String (unescaped" verknüpft. Dennoch wird nichts angezeigt:
        57c552b7-2569-4ab0-bec4-fdf54af0e2a0-grafik.png

        Was mir auch auffällt sind die Fehler, die mir unterhalb des Scripts angezeigt werden:
        011edc5a-2e00-44b5-af76-528efc1e89df-grafik.png

        Ich probiere seit gestern nun schon seit einigen Stunden hin- und her... Dennoch komme ich nicht auf die Lösung und finde den Fehler nicht... -.-

        bahnuhrB Online
        bahnuhrB Online
        bahnuhr
        Forum Testing Most Active
        schrieb am zuletzt editiert von bahnuhr
        #93

        @sit-in sagte in ical Kalender Farben anpassen?:

        Was mir auch auffällt sind die Fehler, die mir unterhalb des Scripts angezeigt werden:

        Gibt es diesen DP bei dir:
        66d93059-c0b7-45ef-b5ca-705822b1fcd8-image.png

        Denn darauf bezieht sich der Fehler.

        Wenn ja, was steht hinter als Wert drin.


        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
        • bahnuhrB Online
          bahnuhrB Online
          bahnuhr
          Forum Testing Most Active
          schrieb am zuletzt editiert von
          #94

          Hab gerade gesehen, dass das ja alles schon im thread drin stand.
          na ja, dann halt jetzt doppelt.


          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
          • bahnuhrB bahnuhr

            @sit-in

            hier nochmal das aktuelle Script was bei mir läuft:

            
            // 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 logging = false;
            
            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 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).val;
                var inst     = getObject("system.adapter."+idCal);
                var instopt  = inst.native;
                var calendar = {};
            
                for (var i = 0; i < calTable.length; i++) { 
                    if (logging) log (calTable[i]);
                    var entry = calTable[i];
                    var _date = new Date(entry._date);
                    var _time = "";
            
            
                    // "_time und date" Variable festlegen
                    if (logging) log (entry);
                    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[i].date != calTable[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();
            
            
            
            

            Und dies als globales Script oder unten drunter setzen:

            
            // globale Variablen
            
            // 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);
                }
            }
            
            // 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);
                }
            }
            
            

            und jede zeile dann mal vergleichen.

            S Offline
            S Offline
            sit-in
            schrieb am zuletzt editiert von
            #95

            @bahnuhr

            Mahlzeit! :)

            Ich habe deine Scripts nochmal eingefügt und siehe da: Es funktioniert! :)
            Abgesehen von den Balken, die scheinen irgendwie nur sporadisch angezeigt zu werden und sind auch immer rot, unabhängig von den anderen Farben. Aber ich habe sie einfach wieder deaktiviert.

            Werde nun mal noch versuchen den Müllkalendar mit einzubringen.

            VIELEN DANK nochmal und ein schönes Wochenende!

            T 1 Antwort Letzte Antwort
            0
            • S sit-in

              @bahnuhr

              Mahlzeit! :)

              Ich habe deine Scripts nochmal eingefügt und siehe da: Es funktioniert! :)
              Abgesehen von den Balken, die scheinen irgendwie nur sporadisch angezeigt zu werden und sind auch immer rot, unabhängig von den anderen Farben. Aber ich habe sie einfach wieder deaktiviert.

              Werde nun mal noch versuchen den Müllkalendar mit einzubringen.

              VIELEN DANK nochmal und ein schönes Wochenende!

              T Offline
              T Offline
              thorkillar
              schrieb am zuletzt editiert von
              #96

              Mahlzeit!
              Das Skript ist wirklich wunderbar und ich habe es mehrfach und auch in abgewandelter Form als Stundenplananzeige für unsere Söhne im Einsatz.

              Das klappt, danke Deiner Hilfe @bahnuhr, auch wunderbar.
              Nun habe ich nochmals eine paar Anpassungen, die ich mit meinen Kenntnissen leider nicht hin bekomme.
              Ich würde gern, dass das Skript Termine aus einem Kalender gruppiert und anzeigt, wie viele Tag es noch sind.
              Als Beispiel:

              Zahnarzt => in 320 Tagen
              Kinderarzt => Kein Termin
              Urlaub => in 160 Tagen

              1 Antwort Letzte Antwort
              0
              • bahnuhrB bahnuhr

                @sit-in

                hier nochmal das aktuelle Script was bei mir läuft:

                
                // 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 logging = false;
                
                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 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).val;
                    var inst     = getObject("system.adapter."+idCal);
                    var instopt  = inst.native;
                    var calendar = {};
                
                    for (var i = 0; i < calTable.length; i++) { 
                        if (logging) log (calTable[i]);
                        var entry = calTable[i];
                        var _date = new Date(entry._date);
                        var _time = "";
                
                
                        // "_time und date" Variable festlegen
                        if (logging) log (entry);
                        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[i].date != calTable[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();
                
                
                
                

                Und dies als globales Script oder unten drunter setzen:

                
                // globale Variablen
                
                // 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);
                    }
                }
                
                // 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);
                    }
                }
                
                

                und jede zeile dann mal vergleichen.

                Skyx3S Offline
                Skyx3S Offline
                Skyx3
                schrieb am zuletzt editiert von Skyx3
                #97

                @bahnuhr besteht irgendwie die Möglichkeit die angezeigten Termine auf maximal 5 zu beschränken? Wie man hier in meinem Dashboard sieht, ist leider nicht für mehr Platz. Ich habe aber weder in ical noch im Skript dafür irgendeine Möglichkeit gefunden.

                PS: Vielen Dank für das Skript :-)
                Screenshot_2023-06-08-23-57-01-723.jpg

                bahnuhrB 1 Antwort Letzte Antwort
                0
                • Skyx3S Skyx3

                  @bahnuhr besteht irgendwie die Möglichkeit die angezeigten Termine auf maximal 5 zu beschränken? Wie man hier in meinem Dashboard sieht, ist leider nicht für mehr Platz. Ich habe aber weder in ical noch im Skript dafür irgendeine Möglichkeit gefunden.

                  PS: Vielen Dank für das Skript :-)
                  Screenshot_2023-06-08-23-57-01-723.jpg

                  bahnuhrB Online
                  bahnuhrB Online
                  bahnuhr
                  Forum Testing Most Active
                  schrieb am zuletzt editiert von
                  #98

                  @skyx3

                  Wenn das widget doch nur so groß ist, dass nur 5 Zeilen angezeigt werden, dann passt doch alles.
                  Versteh jetzt das Problem nicht so ganz.


                  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

                  Skyx3S 1 Antwort Letzte Antwort
                  0
                  • bahnuhrB bahnuhr

                    @skyx3

                    Wenn das widget doch nur so groß ist, dass nur 5 Zeilen angezeigt werden, dann passt doch alles.
                    Versteh jetzt das Problem nicht so ganz.

                    Skyx3S Offline
                    Skyx3S Offline
                    Skyx3
                    schrieb am zuletzt editiert von
                    #99

                    @bahnuhr
                    Das Beispeil war blöd, er ist 0 Uhr umgsprungen und hatte ein paar Ganztagstermine rausgeworfen. Die Größe des Kalenderfeldest ist fix, wenn jetzt ein sechster Termin angezeigt wird, dann siehst du hier wie der erste und der letzte Termin verschoben/abgeschnitten wird:

                    5ddb03b1-541f-4ea7-9c9c-46bdf40554ed-grafik.png

                    HomoranH 1 Antwort Letzte Antwort
                    0
                    • Skyx3S Skyx3

                      @bahnuhr
                      Das Beispeil war blöd, er ist 0 Uhr umgsprungen und hatte ein paar Ganztagstermine rausgeworfen. Die Größe des Kalenderfeldest ist fix, wenn jetzt ein sechster Termin angezeigt wird, dann siehst du hier wie der erste und der letzte Termin verschoben/abgeschnitten wird:

                      5ddb03b1-541f-4ea7-9c9c-46bdf40554ed-grafik.png

                      HomoranH Nicht stören
                      HomoranH Nicht stören
                      Homoran
                      Global Moderator Administrators
                      schrieb am zuletzt editiert von
                      #100

                      @skyx3 mach doch einen Scrollbalken an die Seite

                      kein Support per PN! - Fragen im Forum stellen - es gibt fast nichts, was nicht auch für andere interessant ist.

                      Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                      der Installationsfixer: curl -fsL https://iobroker.net/fix.sh | bash -

                      bahnuhrB 1 Antwort Letzte Antwort
                      0
                      • HomoranH Homoran

                        @skyx3 mach doch einen Scrollbalken an die Seite

                        bahnuhrB Online
                        bahnuhrB Online
                        bahnuhr
                        Forum Testing Most Active
                        schrieb am zuletzt editiert von
                        #101

                        @homoran

                        genau


                        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

                        Skyx3S 1 Antwort Letzte Antwort
                        0
                        • bahnuhrB bahnuhr

                          @homoran

                          genau

                          Skyx3S Offline
                          Skyx3S Offline
                          Skyx3
                          schrieb am zuletzt editiert von
                          #102

                          @bahnuhr
                          Danke Euch, das ist nicht die VIS sondern Lovelace, da gibt es keinen Scrollbalken. Aber OK dann muss ich mal schauen wie ich mit einem Blocky den Datenbankpunkt nachbearbeite wenn mehr als 5 Zeilen vorhanden sind. Hätte ja sein können das es schon eine Möglichkeit gibt, die ich nicht gesehen habe.

                          1 Antwort Letzte Antwort
                          0
                          • bahnuhrB bahnuhr

                            @sit-in

                            hier nochmal das aktuelle Script was bei mir läuft:

                            
                            // 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 logging = false;
                            
                            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 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).val;
                                var inst     = getObject("system.adapter."+idCal);
                                var instopt  = inst.native;
                                var calendar = {};
                            
                                for (var i = 0; i < calTable.length; i++) { 
                                    if (logging) log (calTable[i]);
                                    var entry = calTable[i];
                                    var _date = new Date(entry._date);
                                    var _time = "";
                            
                            
                                    // "_time und date" Variable festlegen
                                    if (logging) log (entry);
                                    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[i].date != calTable[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();
                            
                            
                            
                            

                            Und dies als globales Script oder unten drunter setzen:

                            
                            // globale Variablen
                            
                            // 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);
                                }
                            }
                            
                            // 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);
                                }
                            }
                            
                            

                            und jede zeile dann mal vergleichen.

                            E Offline
                            E Offline
                            einfachjannik
                            schrieb am zuletzt editiert von
                            #103

                            @bahnuhr

                            Hallo,

                            soweit funktioniert es bei mir aber ich bekomme es nicht hin, dass das Jahr angezeigt wird, gibt es dafür eine Lösung?

                            bahnuhrB 1 Antwort Letzte Antwort
                            0
                            • E einfachjannik

                              @bahnuhr

                              Hallo,

                              soweit funktioniert es bei mir aber ich bekomme es nicht hin, dass das Jahr angezeigt wird, gibt es dafür eine Lösung?

                              bahnuhrB Online
                              bahnuhrB Online
                              bahnuhr
                              Forum Testing Most Active
                              schrieb am zuletzt editiert von
                              #104

                              @einfachjannik sagte in ical Kalender Farben anpassen?:

                              soweit funktioniert es bei mir aber ich bekomme es nicht hin, dass das Jahr angezeigt wird, gibt es dafür eine Lösung?

                              Ist nicht vorgesehen. DP sind alle ohne Jahr.

                              Lösung:
                              Script selber umschreiben.


                              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
                              • O Offline
                                O Offline
                                OliS
                                schrieb am zuletzt editiert von OliS
                                #105

                                Edit:
                                keine Ahnung warum. Nichts geändert und 30 Minuten später tut es plötzlich?
                                Oder muss für eine richtige Anzeige zwingen der Adapter seine Daten aktualisieren?

                                Hallo zusammen,

                                auf der Suche nach den änderbaren Farben bin ich hier gelandet und hab das mal ausprobiert. Alles top, aber ich kann nur entweder gar keine Zeit für die Termindauer anzeigen lassen oder "ganzer Tag". Wahrscheinlich habe ich es überlesen, aber wie schafft man es bei ganztägigen Terminen nichts anzeigen zu lassen und bei Terminen mit Dauer diese Dauer?

                                Danke schonmal!

                                1 Antwort Letzte Antwort
                                0
                                • L Offline
                                  L Offline
                                  lucajordi
                                  schrieb am zuletzt editiert von
                                  #106

                                  Hallo zusammen,

                                  wie bekomme ich es denn hin, das auch die restlichen Geburtstage alle in Orange sind?

                                  6d8d9ce4-419b-4a3b-b167-950eb5436616-image.png

                                  Gruß Thorsten

                                  L 1 Antwort Letzte Antwort
                                  0
                                  • L lucajordi

                                    Hallo zusammen,

                                    wie bekomme ich es denn hin, das auch die restlichen Geburtstage alle in Orange sind?

                                    6d8d9ce4-419b-4a3b-b167-950eb5436616-image.png

                                    Gruß Thorsten

                                    L Offline
                                    L Offline
                                    lucajordi
                                    schrieb am zuletzt editiert von
                                    #107

                                    Script sieht so aus:

                                    5464454d-d793-44d9-8e45-2cbf76d5629a-image.png

                                    FeuersturmF 1 Antwort Letzte Antwort
                                    0
                                    • L lucajordi

                                      Script sieht so aus:

                                      5464454d-d793-44d9-8e45-2cbf76d5629a-image.png

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

                                      @lucajordi schau mal ob die rote Farbe aus den Einstellungen vom ical Adapter kommen
                                      31b0ec10-9316-43de-8a57-8873b2c5af84-grafik.png

                                      Bei deinen Geburtstagen die angezeigt werden sind das ja alles Einträge, welche nicht heute, morgen und übermorgen sind, somit wird diese Definition greifen

                                               var _color = "color:"+calendar.color;
                                      

                                      oder ersetze es mal stumpf mit

                                      var _color = "color:orange";
                                      
                                      L 1 Antwort Letzte Antwort
                                      0
                                      • FeuersturmF Feuersturm

                                        @lucajordi schau mal ob die rote Farbe aus den Einstellungen vom ical Adapter kommen
                                        31b0ec10-9316-43de-8a57-8873b2c5af84-grafik.png

                                        Bei deinen Geburtstagen die angezeigt werden sind das ja alles Einträge, welche nicht heute, morgen und übermorgen sind, somit wird diese Definition greifen

                                                 var _color = "color:"+calendar.color;
                                        

                                        oder ersetze es mal stumpf mit

                                        var _color = "color:orange";
                                        
                                        L Offline
                                        L Offline
                                        lucajordi
                                        schrieb am zuletzt editiert von
                                        #109

                                        Moin,

                                        hab soweit alles hinbekommen, aber wer kann mir denn noch sagen, wie ich hinter der Uhrzeit und vor dem Event noch2-3 Leerzeichen bekomme?
                                        85c370d0-7d71-4ceb-a045-1cf9204f6e99-image.png

                                        Scriptausschnitt ist dieser:

                                        64b8dab3-b664-4de5-992c-a6110335d1a9-image.png

                                        FeuersturmF 1 Antwort Letzte Antwort
                                        0
                                        • L lucajordi

                                          Moin,

                                          hab soweit alles hinbekommen, aber wer kann mir denn noch sagen, wie ich hinter der Uhrzeit und vor dem Event noch2-3 Leerzeichen bekomme?
                                          85c370d0-7d71-4ceb-a045-1cf9204f6e99-image.png

                                          Scriptausschnitt ist dieser:

                                          64b8dab3-b664-4de5-992c-a6110335d1a9-image.png

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

                                          @lucajordi Bitte beim nächsten Mal den Code nicht als Screenshot einfügen, sondern mittels der Codetags </>

                                          Versuch es mal wie folgt:
                                          Ich hab vor dem entry.event mal ein &nbsp; pro Leerzeichen eingefügt:

                                                   if ((_time === "ganzer Tag" && anz_ganztags === false) || anz_time === false) {
                                                       html+="<td style='font-size:1.1em; padding-left:5px;"+_color+"'>"+ "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + entry.event+"</td>";                      // nur event anzeigen        
                                                   } else {
                                                       html+="<td style='font-size:1.1em; padding-left:5px;"+_color+"'>"+_time + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + entry.event+"</td>";       // time + event wird angezeigt
                                                   }
                                          
                                          L 1 Antwort Letzte Antwort
                                          1
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          552

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden

                                          • Du hast noch kein Konto? Registrieren

                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Home
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe