Material Design Widgets: Calendar Widget

TT-Tom

@damrak2022
Stop

Damrak2022

@tt-tom Hier nochmal aus Zeile 31

07:49:27.938	info	javascript.0 (952) script.js.common.Kalender.Kalender_ical: Gesundheit
07:49:27.939	info	javascript.0 (952) script.js.common.Kalender.Kalender_ical: Freizeit
07:49:27.940	info	javascript.0 (952) script.js.common.Kalender.Kalender_ical: Haushalt
07:49:27.941	info	javascript.0 (952) script.js.common.Kalender.Kalender_ical: Haushalt
07:49:27.942	info	javascript.0 (952) script.js.common.Kalender.Kalender_ical: Gesundheit
07:49:27.944	info	javascript.0 (952) script.js.common.Kalender.Kalender_ical: Arbeit
07:49:27.945	info	javascript.0 (952) script.js.common.Kalender.Kalender_ical: Freizeit
07:49:27.946	info	javascript.0 (952) script.js.common.Kalender.Kalender_ical: registered 1 subscription and 0 schedules

Script ist gestoppt

Habe das Semikolon am Anfang entfernt - selbe Ausgabe

TT-Tom

@damrak2022

Langsam habe nur das Handy am Start.

Das Script liest vermutlich nicht die Farben vom Adapter. Das muss ich mir Zuhause ansehen, am Rechner heute Abend.

Jetzt ist es so das der Name vom Kalender ermittelt wird und ihm dann vom Script eine Farbe für Hintergrund und Schrift zugewiesen wird.

Damrak2022

@tt-tom Ja, kein Problem, lass Dir Zeit. Aber es werden ja auch völlig falsche Kalendernamen eingelesen - siehe ical Screenshot.
Okay, bis später

TT-Tom

@damrak2022
Haben allen Kalender aktuell Daten, schau mal in den Objekten von iCal nach. Das würde erklären warum er nicht alle Kalender logt.

Das Script erstellt die Farben für Hintergrund und Schrift selber. Du musst die Funktion erweitern für deine Kalender. Aktuell sind es ja nur für drei.

Damrak2022

@tt-tom Momentan sieht das bei den Objekten so aus:
Bildschirmfoto 2022-06-12 um 08.57.32.png

Im Kalender selbst so:
Bildschirmfoto 2022-06-12 um 08.59.31.png

Da stehen Termin drin
Ich werde das erstmal erweitern

TT-Tom

@damrak2022

Melde mich heute Abend nochmal. Bin jetzt weg

Damrak2022

@tt-tom Ja, alles okay,

ich habe das jetzt erweitert, aber hier werden manche Einträge blass dargestellt und unten ist noch ein Teil der wahrscheinlich weg kann

TT-Tom

@damrak2022

Falsche Klammern, vergleiche mit der ersten if

Das erste else muss auch weg

Der untere Teil ist für die Schriftfarbe, wenn dein Hintergrund schwarz ist musst du hier weiß ein stellen für den Kalender

Damrak2022

@tt-tom Garnicht so einfach, wenn die Augen nicht mehr so Top sind und man sich mit JS nicht auskennt.
Jetzt habe ich das angepasst, aber 3 Einträge sind immer noch blass dargestellt
Bildschirmfoto 2022-06-12 um 11.13.32.png

Muss ich den unteren Bereich auch bis auf die 7 Kalender erweitern, und überall meine gewünschte Schriftfarbe einstellen?

TT-Tom

@damrak2022 sagte in Material Design Widgets: Calendar Widget:

Muss ich den unteren Bereich auch bis auf die 7 Kalender erweitern, und überall meine gewünschte Schriftfarbe einstellen?

Nein, nur für die, die nicht schwarz sein sollen.

Du hast oben immer noch ein Problem mit den Klammern.
Ab Office fehlt die Klammer } vor else und hinter dem letzten Return müssen zwei

Vergleiche mit dem Original, da kannst du es erkennen.

So bin mal wieder weg.

Damrak2022

@tt-tom Danke, aber mach Dir keinen Stress. Heute Abend, oder morgen ist völlig ausreichend

TT-Tom

@damrak2022

Ich schau heute Abend rein.

Damrak2022

@tt-tom Danke Dir

Damrak2022

@damrak2022 So sieht jetzt mein komplettes Script aus:


// momentjs is required as dependecies in javascript adapter
const moment = require("moment");

var instances = $(`[id=ical.*.data.table]`);
instances.on(ical2CalendarWidget);

// remove this, if you know to use your own datapoint
let datapointId = 'materialdesignwidgets.calendar.ical2calendar'
createState(datapointId, "[]", {
  read: true, 
  write: false, 
  desc: "JSON String for Calendar Widget", 
  type: "string", 
  def: "[]"
});

function ical2CalendarWidget() {
    try {
        let calList = [];

        for (var inst = 0; inst <= instances.length - 1; inst++) {
            let icalObj = getState(instances[inst]).val;

            if (icalObj) {
                for (var i = 0; i <= icalObj.length - 1; i++) {
                    let item = icalObj[i];

                    // extract calendar color
                    let calendarName = item._class.split(' ')[0].replace('ical_', '');
console.log(calendarName);
                    let startTime = moment(item._date);
                    let endTime = moment(item._end);
                    
                    let start = startTime.format("YYYY-MM-DD HH:mm");
                    let end = endTime.format("YYYY-MM-DD HH:mm");

                    if (startTime.format('HH:mm') === '00:00' && endTime.format('HH:mm') === '00:00') {
                        // is full-day event
                        if (endTime.diff(startTime, 'hours') === 24) {
                            // full-day event, one day
                            start = startTime.format("YYYY-MM-DD");
                            end = startTime.format("YYYY-MM-DD");
                        } else {
                            // full-day event, multiple days
                            start = startTime.format("YYYY-MM-DD");
                            end = endTime.format("YYYY-MM-DD");
                        }
                    }

                    // create object for calendar widget
                    calList.push({
                        name: item.event,
                        color: getMyCalendarColor(calendarName),
                        colorText: getMyCalendarTextColor(calendarName),
                        start: start,
                        end: end
                    })
                }

                function getMyCalendarColor(calendarName) {
                    // assign colors via the calendar names, use calendar name as set in ical
                     if (calendarName === 'ioBroker') {
                        return '#F16BBFB';
                    } else if (calendarName === 'Finanzen') {
                        return '#DA0B05'
                    } else if (calendarName === 'Gesundheit') {
                        return '#DA0B05'
                    }else if (calendarName === 'Urlaub')  {
                        return '#FC5307'
                    }else if (calendarName === 'Marktforschung Andy') {
                        return '#043DCC'
                    }else if (calendarName === 'Kfz')   {
                        return '#B3B3B3'
                    }else if (calendarName === 'Office')    {
                        return '#A3D87A'
                    }else if (calendarName === 'Haushalt')   {
                        return '#FDA49F'
                    }else if (calendarName === 'Freizeit')   {
                        return '#66028D'
                    }else if (calendarName === 'Arbeit') {
                        return '#FCC131'}}
                        
                function getMyCalendarTextColor(calendarName) {
                    // assign colors via the calendar names, use calendar name as set in ical
                    if (calendarName === 'ioBroker') {
                        return '#8bf46c';
                    } else if (calendarName === 'Finanzen') {
                        return '#8bf46c'
                    } else if (calendarName === 'Gesundheit') {
                        return '#8bf46c'
                    }else if (calendarName === 'Urlaub')  {
                        return '#8bf46c'
                    }else if (calendarName === 'Marktforschung Andy') {
                        return '#8bf46c'
                    }else if (calendarName === 'Kfz')   {
                        return '#8bf46c'
                    }else if (calendarName === 'Office')    {
                        return '#8bf46c'
                    }else if (calendarName === 'Haushalt')   {
                        return '#8bf46c'
                    }else if (calendarName === 'Freizeit')   {
                        return '#8bf46c'
                    }else if (calendarName === 'Arbeit') {
                        return '#8bf46c'}}
                    }
                }
            }

            // Enter the destination data point that is to be used as object ID in the widget                
            setState(datapointId, JSON.stringify(calList), true);
        }
    } catch (e) {
        console.error(`ical2MaterialDesignCalendarWidget: message: ${e.message}, stack: ${e.stack}`);
    }
}

ical2CalendarWidget();

Im Log gibt es diesen Fehler:

javascript.0
2022-06-12 11:42:20.854	error	script.js.common.Kalender.Kalender_ical compile failed:
at script.js.common.Kalender.Kalender_ical:108

Und danach noch diese:

javascript.0
2022-06-12 11:42:20.857	error	at processImmediate (internal/timers.js:466:21)

javascript.0
2022-06-12 11:42:20.857	error	at Immediate._onImmediate (/opt/iobroker/node_modules/iobroker.javascript/main.js:1472:17)

javascript.0
2022-06-12 11:42:20.857	error	at /opt/iobroker/node_modules/iobroker.javascript/main.js:2001:17

javascript.0
2022-06-12 11:42:20.856	error	at prepareScript (/opt/iobroker/node_modules/iobroker.javascript/main.js:1900:37)

javascript.0
2022-06-12 11:42:20.856	error	at createVM (/opt/iobroker/node_modules/iobroker.javascript/main.js:1647:28)

javascript.0
2022-06-12 11:42:20.856	error	at Object.createScript (vm.js:262:10)

javascript.0
2022-06-12 11:42:20.856	error	at new Script (vm.js:102:7)

javascript.0
2022-06-12 11:42:20.855	error	SyntaxError: Missing catch or finally after try

TT-Tom

@damrak2022

Hi du hast in der Zeile 105 zwei Klammern zu viel. Jede Klammer die du öffnest, musst du auch wieder schliessen. Bei Verschachtelungen musst du von innen nach aussen prüfen. Im Script-Editor bei IoBroker siehst du immer den Gegenspieler, wenn du den Cursor an eine Klammer setzt. Ich habe das Script jetzt angepasst sollte so laufen.

Ps was noch ein Problem machen kann ist das Leerzeichen im Kalender Marktforschung, hier ggf. mit einem Unterstrich arbeiten.

 
// momentjs is required as dependecies in javascript adapter
const moment = require("moment");
 
var instances = $(`[id=ical.*.data.table]`);
instances.on(ical2CalendarWidget);
 
// remove this, if you know to use your own datapoint
let datapointId = 'materialdesignwidgets.calendar.ical2calendar'
createState(datapointId, "[]", {
  read: true, 
  write: false, 
  desc: "JSON String for Calendar Widget", 
  type: "string", 
  def: "[]"
});
 
function ical2CalendarWidget() {
    try {
        let calList = [];
 
        for (var inst = 0; inst <= instances.length - 1; inst++) {
            let icalObj = getState(instances[inst]).val;
 
            if (icalObj) {
                for (var i = 0; i <= icalObj.length - 1; i++) {
                    let item = icalObj[i];
 
                    // extract calendar color
                    let calendarName = item._class.split(' ')[0].replace('ical_', '');
                    //console.log(calendarName);

                    let startTime = moment(item._date);
                    let endTime = moment(item._end);
                    
                    let start = startTime.format("YYYY-MM-DD HH:mm");
                    let end = endTime.format("YYYY-MM-DD HH:mm");
 
                    if (startTime.format('HH:mm') === '00:00' && endTime.format('HH:mm') === '00:00') {
                        // is full-day event
                        if (endTime.diff(startTime, 'hours') === 24) {
                            // full-day event, one day
                            start = startTime.format("YYYY-MM-DD");
                            end = startTime.format("YYYY-MM-DD");
                        } else {
                            // full-day event, multiple days
                            start = startTime.format("YYYY-MM-DD");
                            end = endTime.format("YYYY-MM-DD");
                        }
                    }
 
                    // create object for calendar widget
                    calList.push({
                        name: item.event,
                        color: getMyCalendarColor(calendarName),
                        colorText: getMyCalendarTextColor(calendarName),
                        start: start,
                        end: end
                    })
                }
 
                function getMyCalendarColor(calendarName) {
                    // assign colors via the calendar names, use calendar name as set in ical
                     if (calendarName === 'ioBroker') {
                        return '#F16BBFB';
                    } else if (calendarName === 'Finanzen') {
                        return '#DA0B05'
                    } else if (calendarName === 'Gesundheit') {
                        return '#DA0B05'
                    }else if (calendarName === 'Urlaub')  {
                        return '#FC5307'
                    }else if (calendarName === 'Marktforschung Andy') {
                        return '#043DCC'
                    }else if (calendarName === 'Kfz')   {
                        return '#B3B3B3'
                    }else if (calendarName === 'Office')    {
                        return '#A3D87A'
                    }else if (calendarName === 'Haushalt')   {
                        return '#FDA49F'
                    }else if (calendarName === 'Freizeit')   {
                        return '#66028D'
                    }else if (calendarName === 'Arbeit') {
                        return '#FCC131'
                    }
                }
                        
                function getMyCalendarTextColor(calendarName) {
                    // assign colors via the calendar names, use calendar name as set in ical
                    if (calendarName === 'ioBroker') {
                        return '#8bf46c';
                    } else if (calendarName === 'Finanzen') {
                        return '#8bf46c'
                    } else if (calendarName === 'Gesundheit') {
                        return '#8bf46c'
                    }else if (calendarName === 'Urlaub')  {
                        return '#8bf46c'
                    }else if (calendarName === 'Marktforschung Andy') {
                        return '#8bf46c'
                    }else if (calendarName === 'Kfz')   {
                        return '#8bf46c'
                    }else if (calendarName === 'Office')    {
                        return '#8bf46c'
                    }else if (calendarName === 'Haushalt')   {
                        return '#8bf46c'
                    }else if (calendarName === 'Freizeit')   {
                        return '#8bf46c'
                    }else if (calendarName === 'Arbeit') {
                        return '#8bf46c'
                    }
                }
            }
 
            // Enter the destination data point that is to be used as object ID in the widget                
            setState(datapointId, JSON.stringify(calList), true);
        }
    } catch (e) {
        console.error(`ical2MaterialDesignCalendarWidget: message: ${e.message}, stack: ${e.stack}`);
    }
}
 
ical2CalendarWidget();

Damrak2022

@tt-tom Danke, jetzt klappt alles. Den Kalender Marktforschung habe ich vorher angepasst.
Jetzt versuche ich mich an den restlichen Anpassungen.

Damrak2022

@tt-tom Eine Frage habe ich noch: Wo passe ich die Farben für die umrandeten Bereiche an?

Ich vermute per css von dem ich keine Ahnung habe.

TT-Tom

@damrak2022

Da bin ich raus. Das muss ich auch immer nachlesen und kopieren.

Damrak2022

@tt-tom Okay, vielleicht kann mir ja jemand anders erklären wie ich die gewünschten Bereiche auswähle. Wie ich die Farbe ändere habe ich mittlerweile gelesen.

NEWS

Material Design Widgets: Calendar Widget

Support us

893
Online

31.7k
Users

79.7k
Topics

1.3m
Posts

NEWS

Material Design Widgets: Calendar Widget

Support us

893Online

31.7kUsers

79.7kTopics

1.3mPosts

893
Online

31.7k
Users

79.7k
Topics

1.3m
Posts