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

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.
  • FeuersturmF Feuersturm

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

    Probier es bitte einmal aus:

    // Script stammt von uhula und sputnik
    // Das Script greift auf die ical.0.html zu und ändert den Text.
    // Gespeichert wird das geänderte Script in "javascript.0.ical.html"
    // Geändert und erweitert in 12/2017 von bahnuhr
    // 02.02.2020 - Feuersturm - Anstatt der Daten für heute, morgen, übermorgen wird der String "Heute" "Morgen" "Übermorgen" angezeigt
    // 19.06.2020 - Feuersturm - Über den Schalter abstand_zwischen_Tagen wird aktiviert, dass ein Absatz zwischen den Terminen der nächsten Tage entsteht
    // 20.06.2020 - Feuersturm - Korrektur damit bei aktiviertem "balken" diese wieder korrekt angezeigt werden, wenn auch "abstand_zwischen_Tagen" aktiv ist
    
     //Quelle: https://forum.iobroker.net/topic/26782/ical-kalender-farben-anpassen/2
     
    var idCal = "ical.2";
    var idCalHTMLtable = 'javascript.0.icalToHtml.ical_2_html';
    var idCalTrigger   = idCal + ".data.trigger";
    var idCalTable     = idCal + ".data.table";
    var idCalHTML      = idCal + ".data.html";
     
    var anz_ganztags = false;   // wenn true wird bei Ganztags-Terminen als time auch "ganzer Tag" angezeigt; wenn false erfolgt gar keine Anzeige
    var anz_time = true;        // wenn true werden die Uhrzeiten angezeigt; wenn false erfolgt gar keine Anzeige
    var balken = true;         // wenn true wird Balken links angezeigt; wenn false dann erfolgt keine Anzeige
    var ersetze_datum_in_Worte = true;    // wenn true wird anstatt des Datums für heut, morgen, übermorgen der String "Heute" "Morgen" "Übermorgen" angezeigt
    var abstand_zwischen_Tagen = true; // wenn true wird ein Abstand zwischen den Terminen gesetzt, wenn diese nicht am gleichen Tag stattfinden
    
    function iCalToHTMLTable() {
        var html     = "<table style='font-size:0.9em;'><tbody>";
        var calTable = getState(idCalTable);
        var inst     = getObject("system.adapter."+idCal);
        var instopt  = inst.native;
        var calendar = {};
     
        for (var i = 0; i < calTable.val.length; i++) { 
            var entry = calTable.val[i];
            var _date = new Date(entry._date);
            var _time = "";
     
            // "_time und date" Variable festlegen
            if (entry.date.indexOf("&#8594") >= 0) {    // Pfeil ist enthalten
                if (entry.date.indexOf(":") >= 0) {         // Uhrzeit ist enthalten
                    _time = "bis " + (entry.date).substring(entry.date.length-5,entry.date.length);
                    entry.date = Datum_holen("tm");
                } else {
                    _time= "ganzer Tag";
                    entry.date = Datum_holen("tm");
                }
            } else {                                    // Pfeil ist nicht enthalten
                if (entry.date.indexOf(":") >= 0) {         // Uhrzeit ist enthalten
                    _time = (entry.date).substring(entry.date.length-11,entry.date.length);
                } else {
                    _time= "ganzer Tag";
                }
                entry.date = getFormattedDate(_date);
            }
    
            if(ersetze_datum_in_Worte == true) {
                if(entry.date == Datum_holen("tm"))
                {
                    entry.date = "Heute";
                } 
                else if (entry.date == Datum_morgen_holen("tm")){
                    entry.date ="Morgen";
                }
                else if (entry.date == Datum_uebermorgen_holen("tm")){
                    entry.date="Übermorgen";
                }
            }        
     
     
            if ( entry._calName != calendar.name ) {
                calendar = {};
                for (var c = 0; c < instopt.calendars.length; c++ ) {
                    if (entry._calName == instopt.calendars[c].name ) {
                        calendar = instopt.calendars[c];
                        break;
                    }
                }
            }
    
            if (i>0 && (abstand_zwischen_Tagen == true)){
                if (calTable.val[i].date != calTable.val[i-1].date){
                    html+="<tr><td></td><td></td></tr>";
                    html+="<tr><td></td><td></td></tr>";
                    html+="<tr><td></td><td></td></tr>";
                    html+="<tr><td></td><td></td></tr>";
                }
            }
    
            var _color = "color:"+calendar.color;
            if (entry._class.includes("ical_today")) _color = "color:#01DF01;";
            else if (entry._class.includes("ical_tomorrow")) _color = "color:#FFBF00";
            else if (entry._class.includes("ical_dayafter")) _color = "color:yellow";
     
            var _bgcolor = "";
            if(calendar.name == "Müll") {
                if(entry.event == "Bio Tonne") {
                    _bgcolor = "#a0e878";
                    _color="color:#a0e878";
                }
                else if(entry.event == "Restmüll Tonne") {
                    _bgcolor = "#ce6f6f"; 
                    _color="color:#ce6f6f";
                }
                else if(entry.event == "Blaue Tonne") {
                    _bgcolor = "#508fdc";
                    _color="color:#508fdc";
                }
                else if(entry.event == "Gelbe Tonne") {
                    _bgcolor = "#eee06d";
                    _color="color:#eee06d";
                }
            }
            else _bgcolor = calendar.color;
            
            if (balken === false) _bgcolor = "";
    
            if (_bgcolor !== "") html+="<tr style='background:transparent; background-image: linear-gradient("+_bgcolor+","+_bgcolor+"); background-size: 6px 90%; background-repeat: no-repeat;'>";
            else html+="<tr>";
    
            var abstand = "15px;";
            if (balken === false) abstand = "3px;";
            html+="<td style='font-size:1.1em; padding-left:"+abstand+_color+"'>"+entry.date+"</td>";
    
            if ((_time === "ganzer Tag" && anz_ganztags === false) || anz_time === false) {
                html+="<td style='font-size:1.1em; padding-left:5px;"+_color+"'>"+entry.event+"</td>";                      // nur event anzeigen        
            } else {
                html+="<td style='font-size:1.1em; padding-left:5px;"+_color+"'>"+_time + "  " + entry.event+"</td>";       // time + event wird angezeigt
            }
    
            html+="</tr>";
        }
     
        html+="</body></table>";   
        console.log(html); 
        setState(idCalHTMLtable, html);    
    }
     
    function getFormattedDate(date) {
        var month = (1 + date.getMonth()).toString();
        month = month.length > 1 ? month : '0' + month;
        var day = date.getDate().toString();
        day = day.length > 1 ? day : '0' + day;
        return day + '.' + month + '.';
    }
     
    on({id: idCalTable, change: "ne"}, function (obj) {
        iCalToHTMLTable();
    });
     
    iCalToHTMLTable();
     
    
    

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

    @Feuersturm sagte in ical Kalender Farben anpassen?:

    Sollte jetzt wieder besser sein:

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

    Und auch danke für das Lob.

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

    Denn von diesen stammt das Script.

    mfg
    Dieter


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

    1 Antwort Letzte Antwort
    0
    • N nyuk

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

      Ist das irgendwie Möglich?

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

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

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

      1 Antwort Letzte Antwort
      0
      • N nyuk

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

        Ist das irgendwie Möglich?

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

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

        T 1 Antwort Letzte Antwort
        0
        • FeuersturmF Feuersturm

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

          T Offline
          T Offline
          Toni61
          schrieb am zuletzt editiert von Toni61
          #44

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

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

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

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

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

          Toni61

          FeuersturmF 1 Antwort Letzte Antwort
          0
          • T Toni61

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

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

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

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

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

            Toni61

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

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

            var idCalHTMLtable = '.....';
            

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

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

            1 Antwort Letzte Antwort
            0
            • haselchenH haselchen

              Mahlzeit,

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

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

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

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

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

              1 Antwort Letzte Antwort
              0
              • FeuersturmF Feuersturm

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

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

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

                Funktioniert bei mir ohne Probleme.

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

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

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

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

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

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

                was mache ich falsch...

                LG andy

                1 Antwort Letzte Antwort
                0
                • bahnuhrB Online
                  bahnuhrB Online
                  bahnuhr
                  Forum Testing Most Active
                  schrieb am zuletzt editiert von
                  #48

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

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


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

                  L 1 Antwort Letzte Antwort
                  0
                  • bahnuhrB bahnuhr

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

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

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

                    @bahnuhr

                    Hallo, guten Morgen!

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

                    Wo habe ich das Brett vor dem Kopf?

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

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

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

                    Danke euch...

                    bahnuhrB FeuersturmF 2 Antworten Letzte Antwort
                    0
                    • L lucajordi

                      @bahnuhr

                      Hallo, guten Morgen!

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

                      Wo habe ich das Brett vor dem Kopf?

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

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

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

                      Danke euch...

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

                      @lucajordi sagte in ical Kalender Farben anpassen?:

                      @bahnuhr

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

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

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

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


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

                      L 1 Antwort Letzte Antwort
                      0
                      • L lucajordi

                        @bahnuhr

                        Hallo, guten Morgen!

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

                        Wo habe ich das Brett vor dem Kopf?

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

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

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

                        Danke euch...

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

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

                        L 1 Antwort Letzte Antwort
                        0
                        • FeuersturmF Feuersturm

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

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

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

                          1 Antwort Letzte Antwort
                          0
                          • bahnuhrB bahnuhr

                            @lucajordi sagte in ical Kalender Farben anpassen?:

                            @bahnuhr

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

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

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

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

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

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

                            immernoch das selbe...

                            bahnuhrB 1 Antwort Letzte Antwort
                            0
                            • L lucajordi

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

                              immernoch das selbe...

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

                              @lucajordi sagte in ical Kalender Farben anpassen?:

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

                              immernoch das selbe...

                              Das glaub ich nicht.

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

                              Dann funktioniert dies auch.


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

                              L 1 Antwort Letzte Antwort
                              0
                              • sigi234S Online
                                sigi234S Online
                                sigi234
                                Forum Testing Most Active
                                schrieb am zuletzt editiert von
                                #55

                                @bahnuhr

                                Getestet, funktioniert.

                                Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                                Immer Daten sichern!

                                bahnuhrB 1 Antwort Letzte Antwort
                                1
                                • sigi234S sigi234

                                  @bahnuhr

                                  Getestet, funktioniert.

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

                                  @sigi234 sagte in ical Kalender Farben anpassen?:

                                  Getestet, funktioniert.

                                  Ich weiß, aber trotzdem danke ;-)
                                  mfg
                                  Dieter


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

                                  1 Antwort Letzte Antwort
                                  0
                                  • bahnuhrB bahnuhr

                                    @lucajordi sagte in ical Kalender Farben anpassen?:

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

                                    immernoch das selbe...

                                    Das glaub ich nicht.

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

                                    Dann funktioniert dies auch.

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

                                    @bahnuhr said in ical Kalender Farben anpassen?:

                                    Sonstige.ical.html

                                    Ähhhh, welchen Datenpunkt muss ich anlegen?

                                    Dachte der wird durch das Script angelegt?

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

                                    FeuersturmF 1 Antwort Letzte Antwort
                                    0
                                    • L lucajordi

                                      @bahnuhr said in ical Kalender Farben anpassen?:

                                      Sonstige.ical.html

                                      Ähhhh, welchen Datenpunkt muss ich anlegen?

                                      Dachte der wird durch das Script angelegt?

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

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

                                      @lucajordi
                                      Es geht um diesen Datenpunkt. Der Screenshot stammt aus deinem Beitrag:
                                      153b78fe-6f4a-4655-89e9-04f926f644ec-grafik.png

                                      @bahnuhr verwendet var idCalHTMLtable = "javascript.0.Sonstige.ical.html;" bei mir heißt er var idCalHTMLtable = '0_userdata.0.icalToHtml.ical_0_html';

                                      Prüfe in ioBroker unter "Objekte" ob es deinen Datenpunkt bereits gibt:
                                      fb63b931-a091-4cef-b42b-a88f31361f92-grafik.png

                                      Wenn du diese Version https://forum.iobroker.net/topic/26782/ical-kalender-farben-anpassen/33 vom Skript genommen hast, musst du den Datenpunkt manuell anlegen. Das wird nicht vom Skript gemacht.

                                      Prüft bitte auch bei dir im Skript diesen Wert var idCal = "ical.2";
                                      Nach deinem Screenshot verwendest du nur ical.0. Dementsprechend musst du bei dir var idCal = "ical.0"; eintragen.
                                      9ea3cf95-ad5e-4483-a22f-a964ccfdbef1-grafik.png

                                      Im "Basic String" Widget musst du dann den Pfad zum Datenpunkt hinterlegen welcher im Skript gefüllt wird (idCalHTMLtable)
                                      a1a8af34-3b0a-4d9f-9a70-83160777bcbc-grafik.png

                                      L 1 Antwort Letzte Antwort
                                      0
                                      • FeuersturmF Feuersturm

                                        @lucajordi
                                        Es geht um diesen Datenpunkt. Der Screenshot stammt aus deinem Beitrag:
                                        153b78fe-6f4a-4655-89e9-04f926f644ec-grafik.png

                                        @bahnuhr verwendet var idCalHTMLtable = "javascript.0.Sonstige.ical.html;" bei mir heißt er var idCalHTMLtable = '0_userdata.0.icalToHtml.ical_0_html';

                                        Prüfe in ioBroker unter "Objekte" ob es deinen Datenpunkt bereits gibt:
                                        fb63b931-a091-4cef-b42b-a88f31361f92-grafik.png

                                        Wenn du diese Version https://forum.iobroker.net/topic/26782/ical-kalender-farben-anpassen/33 vom Skript genommen hast, musst du den Datenpunkt manuell anlegen. Das wird nicht vom Skript gemacht.

                                        Prüft bitte auch bei dir im Skript diesen Wert var idCal = "ical.2";
                                        Nach deinem Screenshot verwendest du nur ical.0. Dementsprechend musst du bei dir var idCal = "ical.0"; eintragen.
                                        9ea3cf95-ad5e-4483-a22f-a964ccfdbef1-grafik.png

                                        Im "Basic String" Widget musst du dann den Pfad zum Datenpunkt hinterlegen welcher im Skript gefüllt wird (idCalHTMLtable)
                                        a1a8af34-3b0a-4d9f-9a70-83160777bcbc-grafik.png

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

                                        @feuersturm

                                        @feuersturm
                                        ok, denke ich habe das soweit angepasst, aber immer
                                        noch das gleiche...

                                        Ihr müsst auch nicht antworten, wenn ich euch auf den S... gehe...

                                        Screenshot 2021-03-07 115905.png
                                        Screenshot 2021-03-07 115827.png
                                        Screenshot 2021-03-07 115759.png
                                        c9b07557-bdfa-4c27-a5e4-4bb635bd174b-image.png

                                        bahnuhrB 1 Antwort Letzte Antwort
                                        0
                                        • L lucajordi

                                          @feuersturm

                                          @feuersturm
                                          ok, denke ich habe das soweit angepasst, aber immer
                                          noch das gleiche...

                                          Ihr müsst auch nicht antworten, wenn ich euch auf den S... gehe...

                                          Screenshot 2021-03-07 115905.png
                                          Screenshot 2021-03-07 115827.png
                                          Screenshot 2021-03-07 115759.png
                                          c9b07557-bdfa-4c27-a5e4-4bb635bd174b-image.png

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

                                          @lucajordi

                                          Du musst ! einen extra DP anlegen.
                                          Ändere zeile 12 wieder ab in:
                                          var idCalHTMLtable = 'javascript.0.Sonstige.Ical.html';

                                          Und dann erzeugst du ein Extra Script und lässt dieses laufen:

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

                                          Dadurch wird der DP erzeugt. Kannst diesen aber auch manuell anlegen.

                                          Und dann diesen Datenpunkt im Widget in VIS eintragen.
                                          Also nicht ! ical.0...
                                          sondern
                                          javascript.0....


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

                                          L 1 Antwort Letzte Antwort
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          790

                                          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