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

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

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

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.
  • K kaiserm

    @bahnuhr Klasse, danke Dir.

    Sag mir aber bitte auch wie ich das globale Script einbinde ;-)

    Danke Dir.

    LG Martin

    K Offline
    K Offline
    kaiserm
    schrieb am zuletzt editiert von
    #16

    @kaiserm Habe den Datum_holen Teil auskommentiert. Läuft trotzdem einwandfrei?! :-)

    bahnuhrB 1 Antwort Letzte Antwort
    0
    • K kaiserm

      @kaiserm Habe den Datum_holen Teil auskommentiert. Läuft trotzdem einwandfrei?! :-)

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

      @kaiserm sagte in ical Kalender Farben anpassen?:

      @kaiserm Habe den Datum_holen Teil auskommentiert. Läuft trotzdem einwandfrei?! :-)

      Ja das läuft.
      Ich wollte das Datum aber ohne Jahreszahl darstellen.


      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

      K 1 Antwort Letzte Antwort
      0
      • bahnuhrB bahnuhr

        @kaiserm sagte in ical Kalender Farben anpassen?:

        @kaiserm Habe den Datum_holen Teil auskommentiert. Läuft trotzdem einwandfrei?! :-)

        Ja das läuft.
        Ich wollte das Datum aber ohne Jahreszahl darstellen.

        K Offline
        K Offline
        kaiserm
        schrieb am zuletzt editiert von
        #18

        @bahnuhr Zeigt es bei mir auch nicht an ;-)

        bahnuhrB 1 Antwort Letzte Antwort
        0
        • K kaiserm

          @bahnuhr Zeigt es bei mir auch nicht an ;-)

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

          @kaiserm sagte in ical Kalender Farben anpassen?:

          @bahnuhr Zeigt es bei mir auch nicht an ;-)

          Freut mich wenn es läuft.
          Script Datum Stelle ich morgen ein.
          Bin heute auf Tagung.


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

            Anbei mein globales Script:

            
            // 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 das ganze hier als "global"einfügen:

            ecd2bdd3-3bc3-4540-be2a-24c5dd7709bf-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

            RöstkartoffelR 1 Antwort Letzte Antwort
            1
            • bahnuhrB bahnuhr

              Anbei mein globales Script:

              
              // 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 das ganze hier als "global"einfügen:

              ecd2bdd3-3bc3-4540-be2a-24c5dd7709bf-image.png

              RöstkartoffelR Offline
              RöstkartoffelR Offline
              Röstkartoffel
              schrieb am zuletzt editiert von
              #21

              @bahnuhr sagte in (/post/327423):

              Und das ganze hier als "global"einfügen:

              ecd2bdd3-3bc3-4540-be2a-24c5dd7709bf-image.png

              Hallo bahnuhr, ich sehe in deinen Globalen Skripten ein Yamaha-Skript.
              Magst du mir verraten was du mit dem Skript machst?
              Danke.

              NUC7i3BNH mit Proxmox und ioBroker (VM Debian Buster), Raspi3 (Slave Smartmeter für eHZ easymeter), Hardware CCU2, SMA SB5000TL-21

              bahnuhrB 1 Antwort Letzte Antwort
              0
              • RöstkartoffelR Röstkartoffel

                @bahnuhr sagte in (/post/327423):

                Und das ganze hier als "global"einfügen:

                ecd2bdd3-3bc3-4540-be2a-24c5dd7709bf-image.png

                Hallo bahnuhr, ich sehe in deinen Globalen Skripten ein Yamaha-Skript.
                Magst du mir verraten was du mit dem Skript machst?
                Danke.

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

                @Röstkartoffel sagte in ical Kalender Farben anpassen?:

                Yamaha-Skript.

                Aber ja.

                Durch einen Kurzbefehl:
                yamaha(ip-adresse,text,sound-Nr.)
                steuere ich Ansagen von beliebigen Texten zu meiner yamaha musiccast anlage.

                Folgender Ablauf:
                Kurzbefehl in irgendeinem Script
                Im globalen Script wird dieser auseinander genommen und in Objekten eingetragen
                Dann wird ein script "Ansage des Textes" auf dem genannten Lautsprecher ausgeführt.

                Ist äußerst komplex mit den passenden api-befehlen von yamaha (musst du dir mal besorgen; oder im Internet googeln).
                Und das das Script an meine Verhältnisse angepasst.

                mfg


                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

                RöstkartoffelR 1 Antwort Letzte Antwort
                0
                • bahnuhrB bahnuhr

                  @Röstkartoffel sagte in ical Kalender Farben anpassen?:

                  Yamaha-Skript.

                  Aber ja.

                  Durch einen Kurzbefehl:
                  yamaha(ip-adresse,text,sound-Nr.)
                  steuere ich Ansagen von beliebigen Texten zu meiner yamaha musiccast anlage.

                  Folgender Ablauf:
                  Kurzbefehl in irgendeinem Script
                  Im globalen Script wird dieser auseinander genommen und in Objekten eingetragen
                  Dann wird ein script "Ansage des Textes" auf dem genannten Lautsprecher ausgeführt.

                  Ist äußerst komplex mit den passenden api-befehlen von yamaha (musst du dir mal besorgen; oder im Internet googeln).
                  Und das das Script an meine Verhältnisse angepasst.

                  mfg

                  RöstkartoffelR Offline
                  RöstkartoffelR Offline
                  Röstkartoffel
                  schrieb am zuletzt editiert von
                  #23

                  @bahnuhr
                  Danke für die Info.
                  Aber leider scheitert das schon, da mein Yamaha nicht MusicCast fähig ist.

                  NUC7i3BNH mit Proxmox und ioBroker (VM Debian Buster), Raspi3 (Slave Smartmeter für eHZ easymeter), Hardware CCU2, SMA SB5000TL-21

                  1 Antwort Letzte Antwort
                  0
                  • FeuersturmF Online
                    FeuersturmF Online
                    Feuersturm
                    schrieb am zuletzt editiert von
                    #24

                    Hat schon jemand einmal versucht, das Skript so zu erweitern, dass anstatt des heutigen Datums der String "Heute" bzw. "Morgen" bzw. "Übermorgen" angezeigt wird, so wie es der normale iCal Adapter ausgibt?
                    5d450ead-fa57-4f94-89ac-635aa9f10d2c-grafik.png
                    Links ist die Darstellung der Termine über ical.0.data.html und rechts wird der Datenpunkt javascript.0.Status.Ical.html angezeigt, welcher vom Skript erzeugt wird.

                    Falls es hier noch nichts gibt, würde ich mich in den nächsten Tagen einmal an der Umsetzung versuchen.

                    1 Antwort Letzte Antwort
                    0
                    • FeuersturmF Online
                      FeuersturmF Online
                      Feuersturm
                      schrieb am zuletzt editiert von Feuersturm
                      #25

                      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

                      W N N 3 Antworten Letzte Antwort
                      1
                      • 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

                        W Offline
                        W Offline
                        webseb79
                        schrieb am zuletzt editiert von
                        #26

                        @Feuersturm
                        Hallo Feuersturm,
                        kannst du mir sagen welches Widget du benutzt um dein ical-Html Script anzeigen zulassen und es sich automatisch auch aktualisiert?
                        Danke im voraus

                        Gruss Sebastian

                        FeuersturmF 1 Antwort Letzte Antwort
                        0
                        • W webseb79

                          @Feuersturm
                          Hallo Feuersturm,
                          kannst du mir sagen welches Widget du benutzt um dein ical-Html Script anzeigen zulassen und es sich automatisch auch aktualisiert?
                          Danke im voraus

                          Gruss Sebastian

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

                          Hall @webseb79, das widget heißt "String (unescaped). Dort einfach den Datenpunkt unter Object ID eintragen.
                          Die Inhalte werden zuverlässig aktualisiert. Das Skript überwacht den Datenpunkt ical.0.data.table (dieser Datenpunkt verbirgt sich hinter der Variable idCalTable) und sobald sich etwas in diesem Datenpunkt ändert, wird die Funktion iCalToHTMLTable() aufgerufen. Dies passiert im Skript mit diesem Abschnitt:

                          on({id: idCalTable, change: "ne"}, function (obj) {
                              iCalToHTMLTable();
                          });
                          

                          Wie häufig der Datenpunkt ical.0.data.table aktualisiert wird, legst du bei der ical Instanz fest. Bei mir erfolgt die Aktualisierung alle 15 min.
                          d078989c-91b0-4a65-a877-54aed8c86621-grafik.png

                          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
                            n3ucr0n
                            schrieb am zuletzt editiert von
                            #28

                            @Feuersturm
                            Hallo Feuersturm, danke für das Veröffentlichen Deiner Skripte.
                            Leider habe ich keine Ahnung von JS. Bisher habe ich immer alles über Blockly realisiert.

                            Deine Skripte funktionieren auch hervorragend.

                            Wie müsste ich nun mein (Dein :face_with_cowboy_hat: ) Skript verändern, das nach den Terminen der einzelnen Daten (Heute, morgen, übernomren, folgende Daten jeweils eine Leerzeile kommt bevor das "neue Datum" kommt?

                            Sprich:

                            Heute Termin A
                            Heute Termin B

                            Morgen Termin A

                            Übermorgen Termin A
                            Übermorgen Termin B
                            Übermorgen Termin C

                            FeuersturmF 2 Antworten Letzte Antwort
                            0
                            • N n3ucr0n

                              @Feuersturm
                              Hallo Feuersturm, danke für das Veröffentlichen Deiner Skripte.
                              Leider habe ich keine Ahnung von JS. Bisher habe ich immer alles über Blockly realisiert.

                              Deine Skripte funktionieren auch hervorragend.

                              Wie müsste ich nun mein (Dein :face_with_cowboy_hat: ) Skript verändern, das nach den Terminen der einzelnen Daten (Heute, morgen, übernomren, folgende Daten jeweils eine Leerzeile kommt bevor das "neue Datum" kommt?

                              Sprich:

                              Heute Termin A
                              Heute Termin B

                              Morgen Termin A

                              Übermorgen Termin A
                              Übermorgen Termin B
                              Übermorgen Termin C

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

                              @n3ucr0n Hi, ich versuche mich mal an deinem Wunsch. Stehe aber noch am Anfang meiner Programmierkarriere. Mal sehen was sich machen lässt :-)

                              1 Antwort Letzte Antwort
                              1
                              • N n3ucr0n

                                @Feuersturm
                                Hallo Feuersturm, danke für das Veröffentlichen Deiner Skripte.
                                Leider habe ich keine Ahnung von JS. Bisher habe ich immer alles über Blockly realisiert.

                                Deine Skripte funktionieren auch hervorragend.

                                Wie müsste ich nun mein (Dein :face_with_cowboy_hat: ) Skript verändern, das nach den Terminen der einzelnen Daten (Heute, morgen, übernomren, folgende Daten jeweils eine Leerzeile kommt bevor das "neue Datum" kommt?

                                Sprich:

                                Heute Termin A
                                Heute Termin B

                                Morgen Termin A

                                Übermorgen Termin A
                                Übermorgen Termin B
                                Übermorgen Termin C

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

                                @n3ucr0n Ich glaub ich habe es geschafft. So sieht es gerade bei mir aus:
                                f4e0206a-88ba-4c4e-8b8d-655769cd1cdf-grafik.png

                                Am Anfang im Skript ist ein neuer Schalter über welchen du die neue Funktion ein/aus schalten kannst

                                var abstand_zwischen_Tagen = true; // wenn true wird ein Abstand zwischen den Terminen gesetzt, wenn diese nicht am gleichen Tag stattfinden
                                

                                Das neue Skript:

                                // 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
                                
                                
                                 //Quelle: https://forum.iobroker.net/topic/26782/ical-kalender-farben-anpassen/2
                                 
                                var idCal = "ical.2";
                                var idCalTrigger   = idCal + ".data.trigger";
                                var idCalTable     = idCal + ".data.table";
                                var idCalHTML      = idCal + ".data.html";
                                var idCalHTMLtable = 'javascript.0.icalToHtml.ical_2_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
                                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;
                                                }
                                            }
                                        }
                                 
                                        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>";
                                
                                        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();
                                

                                N 1 Antwort Letzte Antwort
                                2
                                • FeuersturmF Feuersturm

                                  @n3ucr0n Ich glaub ich habe es geschafft. So sieht es gerade bei mir aus:
                                  f4e0206a-88ba-4c4e-8b8d-655769cd1cdf-grafik.png

                                  Am Anfang im Skript ist ein neuer Schalter über welchen du die neue Funktion ein/aus schalten kannst

                                  var abstand_zwischen_Tagen = true; // wenn true wird ein Abstand zwischen den Terminen gesetzt, wenn diese nicht am gleichen Tag stattfinden
                                  

                                  Das neue Skript:

                                  // 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
                                  
                                  
                                   //Quelle: https://forum.iobroker.net/topic/26782/ical-kalender-farben-anpassen/2
                                   
                                  var idCal = "ical.2";
                                  var idCalTrigger   = idCal + ".data.trigger";
                                  var idCalTable     = idCal + ".data.table";
                                  var idCalHTML      = idCal + ".data.html";
                                  var idCalHTMLtable = 'javascript.0.icalToHtml.ical_2_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
                                  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;
                                                  }
                                              }
                                          }
                                   
                                          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>";
                                  
                                          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();
                                  

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

                                  @Feuersturm Richtig klasse! Funktioniert =)

                                  Danke!!

                                  Edit: Ich habe grade die anderen True/False Optionen mal durchprobiert. Bezüglich des Punktes "var balken = true" scheint es nun ein Problem zu geben. Es werden die Balken nicht bei allen Terminen angezeigt.

                                  FeuersturmF 2 Antworten Letzte Antwort
                                  0
                                  • N n3ucr0n

                                    @Feuersturm Richtig klasse! Funktioniert =)

                                    Danke!!

                                    Edit: Ich habe grade die anderen True/False Optionen mal durchprobiert. Bezüglich des Punktes "var balken = true" scheint es nun ein Problem zu geben. Es werden die Balken nicht bei allen Terminen angezeigt.

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

                                    @n3ucr0n Werde ich mir mal ansehen. Bisher habe ich das Feature mit den Balken nicht verwendet.

                                    1 Antwort Letzte Antwort
                                    0
                                    • N n3ucr0n

                                      @Feuersturm Richtig klasse! Funktioniert =)

                                      Danke!!

                                      Edit: Ich habe grade die anderen True/False Optionen mal durchprobiert. Bezüglich des Punktes "var balken = true" scheint es nun ein Problem zu geben. Es werden die Balken nicht bei allen Terminen angezeigt.

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

                                      @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();
                                       
                                      
                                      

                                      N bahnuhrB 2 Antworten Letzte Antwort
                                      2
                                      • 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();
                                         
                                        
                                        

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

                                        @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 1 Antwort Letzte Antwort
                                        0
                                        • 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
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          398

                                          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