ical Kalender Farben anpassen?

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... ?!

Feuersturm

@lucajordi
Es geht um diesen Datenpunkt. Der Screenshot stammt aus deinem Beitrag:

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

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.

Im "Basic String" Widget musst du dann den Pfad zum Datenpunkt hinterlegen welcher im Skript gefüllt wird (idCalHTMLtable)

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

bahnuhr

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

lucajordi

@bahnuhr

Auch wenn deine Anleitung schon für Dummies wie mich ist:

lucajordi

Homoran

@lucajordi sagte in ical Kalender Farben anpassen?:

Auch wenn deine Anleitung schon für Dummies wie mich ist:

was hast du denn da gemacht?
(code bitte nicht als Screenshot posten!)

Wenn das der einzeiler von @bahnuhr ist, kann da nichts in Zeile 172 und 174 stehen.

Hast du globale Skripte in Verwendung?

EDIT:
Was willst du uns mit dem Screenshot des script_enabled zeigen?

bahnuhr

Er macht halt nicht das was man ihm sagt !

Warum erstellt du einen DP unter ...common...
Ich habe dir doch ein Script gegeben. Warum nimmst du dieses nicht ?
Und dann noch die Zeile 12 von deinem eigentlichen Script geändert, und es würde laufen.

@Homoran
Rainer, hast recht.
Da geht etliches schief.
Zeile 172 und 174 können bei einem Einzeiler nicht entstehen!

@lucajordi
Vielleicht stellst du mal deine Scripte hier ein.
Dann können wir dir helfen.
a) entweder mein Script sowie das Extra Script um den DP zu erzeugen.
b) oder das Script von @Feuersturm ; dort wird wohl auch der DP per Script erzeugt.

lucajordi

@bahnuhr

Unglaublich, aber geht jetzt!

Denke da war zuviel durcheinander und irgendwo noch etwas versteckt...

Habe jetzt mal alle Scripte, etc gelöscht und neu erstellt und siehe da:

Ich danke euch allen für eure Geduld und eure Hilfe!
Schwere Geburt, aber dank euch erfolgreich!

lucajordi

Guten Morgen!

Eine Frage noch:

Wo kann ich die Farben für alle Einträge setzen?

Mochte das alle Eintrage in der gleichen Farbe erscheinen, bis auf den Eintrag, der
in weniger als 2 Tagen stattfindet...

so habe ich es versucht:

bahnuhr

sieht doch gut aus.

Und was klappt da jetzt nicht ?
(wie wäre es mit: Hardcopy, Script, etc.)

lucajordi

@bahnuhr
der erste Termin für today wird in rot angezeigt, alle anderen in schwarz...

Script ist dein original Script mit den o. g. Änderungen...

bahnuhr

@lucajordi sagte in ical Kalender Farben anpassen?:

@bahnuhr
der erste Termin für today wird in rot angezeigt, alle anderen in schwarz...

Script ist dein original Script mit den o. g. Änderungen...

Eben hattest du noch ein Script drin. Schade, wieder raus genommen. Warum ?

Habs bei mir nachvollzogen:
Script geändert in :

Ausgabe in VIS:

Fazit:
klappt einwandfrei.

lucajordi

@bahnuhr

Script wurde irgendwie verstückelt angezeigt...

Hier nochmal: (Auszug)

// Script stammt von uhula und sputnik
// Das Script greift auf die ical.0.html zu und ändert den Text.
// Gespeichert wird das geänderte Script in "javascript.0.Sonstige.ical.html"
// Geändert und erweitert in 12/2017 von bahnuhr

var idCal = "ical.0";
var idCalTrigger = idCal + ".data.trigger";
var idCalTable = idCal + ".data.table";
var idCalHTML = idCal + ".data.html";
var idCalHTMLtable = 'javascript.0.Sonstige.Ical.html';

var anz_ganztags = false; // wenn true wird bei Ganztags-Terminen als time auch "ganzer Tag" angezeigt; wenn false erfolgt gar keine Anzeige
var anz_time = true; // wenn true werden die Uhrzeiten angezeigt; wenn false erfolgt gar keine Anzeige
var balken = false; // wenn true wird Balken links angezeigt; wenn false dann erfolgt keine Anzeige
var abstand_zwischen_Tagen = 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 ( 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:orange";

    var _bgcolor = "";
    if(calendar.name == "TB") {
        if(entry.event == "Bioabfall") {
            _bgcolor = "#a0e878";
            _color="color:orange";
        }
        else if(entry.event == "Restabfall") {
            _bgcolor = "#ce6f6f"; 
            _color="color:orange";
        }
        else if(entry.event == "Sperrmüll") {
            _bgcolor = "#508fdc";
            _color="color:orange";
        }
        else if(entry.event == "Gelber Sack") {
            _bgcolor = "#eee06d";
            _color="color:orange";
        }
    }
    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>";

bahnuhr

@lucajordi sagte in ical Kalender Farben anpassen?:

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

Dann ist deine Standard Kalenderfarbe in Google "schwarz"

Kannst du aber auch ändern in:
var _color = "color:white";

dann würde alles in weißer Schrift erscheinen.

bahnuhr

P.S.
Scripte setzt man in "code"

lucajordi

@bahnuhr
Danke dir!

Jetzt klappts:

bahnuhr

@lucajordi sagte in ical Kalender Farben anpassen?:

Danke dir!

Wer helfen konnte, Daumen hoch.
Wäre auch schön.

bahnuhr

Guten Abend,

ich hatte ical 1.7.4 drauf.
Da lief das Script einwandfrei.

Jetzt Adapter upgedated auf 1.11.2. Und nun bekomme ich Fehlermeldungen im log:

javascript.0	2021-08-02 19:10:06.225	error	(1133) at Script.runInContext (vm.js:130:18)
javascript.0	2021-08-02 19:10:06.225	error	(1133) at script.js.Scripte.Sonstige.Ical:154:3
javascript.0	2021-08-02 19:10:06.225	error	(1133) at script.js.Scripte.Sonstige.Ical:130:1
javascript.0	2021-08-02 19:10:06.224	error	(1133) at iCalToHTMLTable (script.js.Scripte.Sonstige.Ical:34:24)
javascript.0	2021-08-02 19:10:06.224	error	(1133) script.js.Scripte.Sonstige.Ical: TypeError: Cannot read property 'indexOf' of undefined

Auf der ical-Seite steht unter changelog:

Da ja auf diesen DP zugegriffen wird, vermute ich mal, dass es damit zusammen hängen könnte.

Da ich mit stringeify und parse immer noch ein bisschen auf Kriegsfuß stehe bitte ich um Nachhilfe.

Was muss man ändern damit das Script wieder fehlerfrei läuft.
@apollon77
Kannst du helfen, du bist ja auch fleißig am ändern des Adapters.

mfg
Dieter

Anbei das aktuelle Script (müsste aber weiter vorne auch schon drin sein):


// Script stammt von uhula und sputnik
// Das Script greift auf die ical.0.html zu und ändert den Text.
// Gespeichert wird das geänderte Script in "javascript.0.Sonstige.ical.html"
// Geändert und erweitert in 12/2017 von bahnuhr


var idCal = "ical.0";
var idCalTrigger   = idCal + ".data.trigger";
var idCalTable     = idCal + ".data.table";
var idCalHTML      = idCal + ".data.html";
var idCalHTMLtable = 'javascript.0.Sonstige.Ical.html';

var anz_ganztags = false;   // wenn true wird bei Ganztags-Terminen als time auch "ganzer Tag" angezeigt; wenn false erfolgt gar keine Anzeige
var anz_time = true;        // wenn true werden die Uhrzeiten angezeigt; wenn false erfolgt gar keine Anzeige
var balken = false;         // wenn true wird Balken links angezeigt; wenn false dann erfolgt keine Anzeige
var abstand_zwischen_Tagen = false; // wenn true wird ein Abstand zwischen den Terminen gesetzt, wenn diese nicht am gleichen Tag stattfinden

function iCalToHTMLTable() {
   var html     = "<table style='font-size:0.9em;'><tbody>";
   var calTable = 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
       log (entry);
       if (entry.date.indexOf("&#8594") >= 0) {    // Pfeil ist enthalten
           if (entry.date.indexOf(":") >= 0) {         // Uhrzeit ist enthalten
               _time = "bis " + (entry.date).substring(entry.date.length-5,entry.date.length);
               entry.date = Datum_holen("tm");
           } else {
               _time= "ganzer Tag";
               entry.date = Datum_holen("tm");
           }
       } else {                                    // Pfeil ist nicht enthalten
           if (entry.date.indexOf(":") >= 0) {         // Uhrzeit ist enthalten
               _time = (entry.date).substring(entry.date.length-11,entry.date.length);
           } else {
               _time= "ganzer Tag";
           }
           entry.date = getFormattedDate(_date);
       }


       if ( entry._calName != calendar.name ) {
           calendar = {};
           for (var c = 0; c < instopt.calendars.length; c++ ) {
               if (entry._calName == instopt.calendars[c].name ) {
                   calendar = instopt.calendars[c];
                   break;
               }
           }
       }

       var _color = "color:"+calendar.color;
       if (entry._class.includes("ical_today")) _color = "color:red;";
       else if (entry._class.includes("ical_tomorrow")) _color = "color:orange";
       else if (entry._class.includes("ical_dayafter")) _color = "color:yellow";

       var _bgcolor = "";
       if(calendar.name == "Müll") {
           if(entry.event == "Bio Tonne") {
               _bgcolor = "#a0e878";
               _color="color:#a0e878";
           }
           else if(entry.event == "Restmüll Tonne") {
               _bgcolor = "#ce6f6f"; 
               _color="color:#ce6f6f";
           }
           else if(entry.event == "Blaue Tonne") {
               _bgcolor = "#508fdc";
               _color="color:#508fdc";
           }
           else if(entry.event == "Gelbe Tonne") {
               _bgcolor = "#eee06d";
               _color="color:#eee06d";
           }
       }
       else _bgcolor = calendar.color;
       
       if (balken === false) _bgcolor = "";
       
       if (_bgcolor !== "") html+="<tr style='background:transparent; background-image: linear-gradient("+_bgcolor+","+_bgcolor+"); background-size: 6px 90%; background-repeat: no-repeat;'>";
       else html+="<tr>";

if (i>0 && (abstand_zwischen_Tagen == true)){
           if (calTable.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;
}
*/

bahnuhr

So, habs hinbekommen.
Der Gedanke mit ...parse war richtig.
Das Script muss an einigen wenigen Stellen geändert werden.

Anbei die aktuelle Version, die nun auch mit der neuesten ical 1.11.2 funktioniert.


// Script stammt von uhula und sputnik
// Das Script greift auf die ical.0.html zu und ändert den Text.
// Gespeichert wird das geänderte Script in "javascript.0.Sonstige.ical.html"
// Geändert und erweitert in 12/2017 von bahnuhr


var idCal = "ical.0";
var idCalTrigger   = idCal + ".data.trigger";
var idCalTable     = idCal + ".data.table";
var idCalHTML      = idCal + ".data.html";
var idCalHTMLtable = 'javascript.0.Sonstige.Ical.html';

var anz_ganztags = false;   // wenn true wird bei Ganztags-Terminen als time auch "ganzer Tag" angezeigt; wenn false erfolgt gar keine Anzeige
var anz_time = true;        // wenn true werden die Uhrzeiten angezeigt; wenn false erfolgt gar keine Anzeige
var balken = false;         // wenn true wird Balken links angezeigt; wenn false dann erfolgt keine Anzeige
var abstand_zwischen_Tagen = false; // wenn true wird ein Abstand zwischen den Terminen gesetzt, wenn diese nicht am gleichen Tag stattfinden

function iCalToHTMLTable() {
   var html     = "<table style='font-size:0.9em;'><tbody>";
   var calTable = JSON.parse(getState(idCalTable).val);
   var inst     = getObject("system.adapter."+idCal);
   var instopt  = inst.native;
   var calendar = {};

   for (var i = 0; i < calTable.length; i++) { 
       log (calTable[i]);
       var entry = calTable[i];
       var _date = new Date(entry._date);
       var _time = "";


       // "_time und date" Variable festlegen
       log (entry);
       if (entry.date.indexOf("&#8594") >= 0) {    // Pfeil ist enthalten
           if (entry.date.indexOf(":") >= 0) {         // Uhrzeit ist enthalten
               _time = "bis " + (entry.date).substring(entry.date.length-5,entry.date.length);
               entry.date = Datum_holen("tm");
           } else {
               _time= "ganzer Tag";
               entry.date = Datum_holen("tm");
           }
       } else {                                    // Pfeil ist nicht enthalten
           if (entry.date.indexOf(":") >= 0) {         // Uhrzeit ist enthalten
               _time = (entry.date).substring(entry.date.length-11,entry.date.length);
           } else {
               _time= "ganzer Tag";
           }
           entry.date = getFormattedDate(_date);
       }


       if ( entry._calName != calendar.name ) {
           calendar = {};
           for (var c = 0; c < instopt.calendars.length; c++ ) {
               if (entry._calName == instopt.calendars[c].name ) {
                   calendar = instopt.calendars[c];
                   break;
               }
           }
       }

       var _color = "color:"+calendar.color;
       if (entry._class.includes("ical_today")) _color = "color:red;";
       else if (entry._class.includes("ical_tomorrow")) _color = "color:orange";
       else if (entry._class.includes("ical_dayafter")) _color = "color:yellow";

       var _bgcolor = "";
       if(calendar.name == "Müll") {
           if(entry.event == "Bio Tonne") {
               _bgcolor = "#a0e878";
               _color="color:#a0e878";
           }
           else if(entry.event == "Restmüll Tonne") {
               _bgcolor = "#ce6f6f"; 
               _color="color:#ce6f6f";
           }
           else if(entry.event == "Blaue Tonne") {
               _bgcolor = "#508fdc";
               _color="color:#508fdc";
           }
           else if(entry.event == "Gelbe Tonne") {
               _bgcolor = "#eee06d";
               _color="color:#eee06d";
           }
       }
       else _bgcolor = calendar.color;
       
       if (balken === false) _bgcolor = "";
       
       if (_bgcolor !== "") html+="<tr style='background:transparent; background-image: linear-gradient("+_bgcolor+","+_bgcolor+"); background-size: 6px 90%; background-repeat: no-repeat;'>";
       else html+="<tr>";

if (i>0 && (abstand_zwischen_Tagen == true)){
           if (calTable[i].date != calTable[i-1].date){
               html+="<tr><td></td></tr>";
               html+="<tr><td></td></tr>";
               html+="<tr><td></td></tr>";
               html+="<tr><td></td></tr>";    
           }
       }

           var abstand = "15px;";
           if (balken === false) abstand = "3px;";
           html+="<td style='font-size:1.1em; padding-left:"+abstand+_color+"'>"+entry.date+"</td>";

       if ((_time === "ganzer Tag" && anz_ganztags === false) || anz_time === false) {
           html+="<td style='font-size:1.1em; padding-left:5px;"+_color+"'>"+entry.event+"</td>";                      // nur event anzeigen
       } else {
           html+="<td style='font-size:1.1em; padding-left:5px;"+_color+"'>"+_time + "  " + entry.event+"</td>";       // time + event wird angezeigt
       }
       html+="</tr>";
   }

   html+="</body></table>";    
   setState(idCalHTMLtable, html);    
}

function getFormattedDate(date) {
   var month = (1 + date.getMonth()).toString();
   month = month.length > 1 ? month : '0' + month;
   var day = date.getDate().toString();
   day = day.length > 1 ? day : '0' + day;
   return day + '.' + month + '.';
}

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

iCalToHTMLTable();


// als CSS einfügen ------------------------------------------------------------------
/*
.icalWarn { font-weight:normal; }
.icalWarn2  { color:red; }
.icalPreWarn { font-weight:normal; }
.icalPreWarn2  { color:orange; }
.icalPrePreWarn { font-weight:normal; }
.icalPrePreWarn2  { color:yellow; }
.icalNormal { font-weight:normal; }

.icalNormal.iCal-Müll {
   font-weight:normal;
   color:#f87149;
}
.icalNormal.iCal-Märkte {
   font-weight:normal;
   color:#bc7dd8;
}
*/

Community Forum

NEWS

ical Kalender Farben anpassen?

Support us

403

32.4k

81.5k

1.3m