Neues FTUI Widget - fullcalview - Kalenderanzeige (ab FTUI 2.2)

[HoTi]

Hallo,

wird es ein update auf das neue Modul geben? wäre schon super!

[h3llsp4wn]

Hallo zusammen,

da bin ich wohl das Bottleneck - danke für Euer Feedback. Kann auch verstehen, dass man keinen Bock hat ständig externe Module/Widgets mitzupflegen. Ich werde mir die Tage mal Calview anschauen - ich hatte nur den Kalender genommen, da ich so schlank wie möglich sein wollte. Das Update des Cal-Moduls sollte nicht das Problem sein, aber das wollte ich dann offiziell angehen, wenn ich aber an den Calview rankomme, kann man sich das ja ggf. auch sparen.

Da setstate ja wohl noch einen größeren Umbau plant, wollte ich noch abwarten, ob der die 2.0 wirklich "live" bringt, da dann wohl alle nachziehen müssen.



Cheers,

h3ll

PS:
Ich hab hier noch die Buderus km 200 hier liegen, für die ich noch nix gemacht habe und mein Sonos-Frontend würde ich auch gerne hübscher machen - zumal hier noch ein Connect rumliegt ... zu viele Projekte auf einmal ... also die TabletUI hat auf jeden Fall eingeschlagen.

[h3llsp4wn]

Hallo zusammen,

anbei eine neue Version des Widgets für die Evaluierungsversion (ftui 2.2! von setstate).
Alle notwendigen Dateien sind im angehängten Zip enthalten und müssen in das FTUI/tablet Verzeichnis entpackt werden.

Folgende Änderungen:
- keine Änderung am Calendar PM Modul erforderlich
- jeder eingebundene Kalender wird sep. aufgebaut und auch upgedated
- es können beliebig viele Kalender eingebunden werden

Das ganze basiert weiterhin auf:

• fullcalendar => nach \tablet\fullcalendar entpacken (hier zum download ->https://github.com/arshaw/fullcalendar/releases/download/v2.6.0/fullcalendar-2.6.0.zip)
  
• icalendar2fullcalender (allerdings in einer angepassten Version für Farbgebung und Update) ->https://github.com/2733/icalendar2fullcalendar

Einbindung in FTUI:

Code Auswählen Erweitern


<div data-type="fullcalview"
data-device='["Abfall","allKalender"]'
data-defaultview="basicWeek"
data-eventlimit="true"
data-timeformat="H:mm"
data-lang="de"
data-weeknumbers="true"
data-headerleft="title"
data-headerright="today month basicWeek prev,next"
data-contentheight="350"
data-get='["Abfall:lastUpdate","allKalender:lastUpdate"]'
data-eventcolors='["red","#E6FF57"]'
data-eventtextcolors='["white","black"]' />



Cheers,

h3ll

[roman1528]

Hallo zusammen,

anbei eine neue Version des Widgets für die Evaluierungsversion (ftui 2.2! von setstate).
Alle notwendigen Dateien sind im angehängten Zip enthalten und müssen in das FTUI/tablet Verzeichnis entpackt werden.

Folgende Änderungen:
- keine Änderung am Calendar PM Modul erforderlich
- jeder eingebundene Kalender wird sep. aufgebaut und auch upgedated
- es können beliebig viele Kalender eingebunden werden

Das ganze basiert weiterhin auf:

• fullcalendar => nach \tablet\fullcalendar entpacken (hier zum download ->https://github.com/arshaw/fullcalendar/releases/download/v2.6.0/fullcalendar-2.6.0.zip)
  
• icalendar2fullcalender (allerdings in einer angepassten Version für Farbgebung und Update) ->https://github.com/2733/icalendar2fullcalendar

Einbindung in FTUI:

Code Auswählen Erweitern


<div data-type="fullcalview"
data-device='["abfallKalender:lastUpdate","allKalender:lastUpdate"]'
data-defaultview="basicWeek"
data-eventlimit="true"
data-timeformat="H:mm"
data-lang="de"
data-weeknumbers="true"
data-headerleft="title"
data-headerright="today month basicWeek prev,next"
data-contentheight="350"
data-get='["abfallKalender:lastUpdate","allKalender:lastUpdate"]'
data-eventsources='["abfallKalender","allKalender"]'
data-eventcolors='["red","#E6FF57"]'
data-eventtextcolors='["white","black"]' />



Cheers,

h3ll

Super Cool...
Eine kurze Erleuterung zu data-device wäre allerdings ganz nett...

Wird nun auf CalView oder auf Calendar zugegriffen?
Was ist das ":lastUpdate"?
Ich habe morgen für 10 Uhr einen Termin in meinen Google-Kalender eingetragen.
Im FullCalView-Widget steht allerdings nichts drin... CalView und Calendar in FHEM sind aktuell.

Grüße^^

EDIT

Wozu noch data-get und data-eventsources?? ist ja alles doppelt gemoppelt

[h3llsp4wn]

Hallo Roman,

danke für's Feedback. Es wird auf die Calendar Devices zugegriffen. D.h. man kann die einzelnen Kalender aus FHEM die dargestellt werden sollen
auflisten. Da ich diese extern am FTUI vorbei abfrage, benötige ich einen Trigger, um zu ermitteln, dass sich ggf. ein Calendar geändert hat - dies geschieht über lastUpdate - sobald sich dies ändert wird der entsprechende Kalender neu gezeichnet.

Das Doppel habe ich jetzt soweit möglich entfernt, bleiben noch die Devices und die Get-Definition - die könnte man wahrscheinlich
auch noch generieren (lassen).

Hast Du den Google-Kalender in FHEM als Calendar hinterlegt und diesen als Device entsprechend hinterlegt? Wird im log
ein Request 'fhem?detail=DEINKALENDER...' abgesetzt? Falls ja, könnte es noch ein Formatproblem sein - ich habe nicht allzu viele
Quellen testen können, die dann in FHEM abgelegt sind ...

Sorry - bin halt nicht der JS-Guru ...


Cheers,

h3ll

Änderungen habe ich oben im Topic hochgeladen und die Definition angepasst.

[roman1528]

Ja das sieht schon deutlich besser aus..

Aber 

Ich habe festgestellt, dass mindestens 2 Kalender in einem Array stehen müssen!

Nur ein einziger Kalender funktioniert nicht. Egal ob Array oder nicht.
Ja, data-eventcolors und data-eventtextcolors habe ich auch parallel, dementsprechend angepasst.

Grüße^^

[h3llsp4wn]

Danke ... hm ... also es werden Arrays erwartet (ok - auch das kann man natürlich noch anpassen für einen Kaldender).
Ich hab's bei mir eben noch einmal mit unterschiedlichen "Einzelkalendern" so getestet:

Code Auswählen Erweitern


<div data-type="fullcalview"
data-device='["Abfall"]'
data-defaultview="basicWeek"
data-eventlimit="true"
data-timeformat="H:mm"
data-lang="de"
data-weeknumbers="true"
data-headerleft="title"
data-headerright="today month basicWeek prev,next"
data-contentheight="350"
data-get='["Abfall:lastUpdate"]'
data-eventcolors='["red"]'
data-eventtextcolors='["white"]' />


... da funktioniert es bei mir. Kannst Du mal Deine Definition posten?

[roman1528]

Moin.

Ich bekomme jetzt gar nichts mehr angezeigt -.-
Habe extra die Files nochmal neu reinkopiert (vorher gelöscht) und trotzdem passiert nun gar nichts mehr 

So: funktioniert es tatsächlich. Keine Ahnung wo da gestern mein Fehler war... Sicher Cache-Probleme.

Code Auswählen Erweitern


<div data-type="fullcalview"
data-device='["Abfall"]'
data-defaultview="basicWeek"
data-eventlimit="true"
data-timeformat="H:mm"
data-lang="de"
data-weeknumbers="true"
data-headerleft="title"
data-headerright="today month basicWeek prev,next"
data-contentheight="350"
data-get='["Abfall:lastUpdate"]'
data-eventcolors='["red"]'
data-eventtextcolors='["white"]'>
</div>


So: ging es gestern! funktioniert es einwandfrei!

Code Auswählen Erweitern


<div data-type="fullcalview"
data-device='["Abfall","cal_Roman"]'
data-defaultview="basicWeek"
data-eventlimit="true"
data-timeformat="H:mm"
data-lang="de"
data-weeknumbers="true"
data-headerleft="title"
data-headerright="today month basicWeek prev,next"
data-contentheight="350"
data-get='["Abfall:lastUpdate","cal_Roman:lastUpdate"]'
data-eventcolors='["red","#E6FF57"]'
data-eventtextcolors='["white","black"]'>
</div>


bzw. so: geht es definitiv nicht... würde für einen Kalender ja aber ausreichen.

Code Auswählen Erweitern


<div data-type="fullcalview"
data-device="cal_Roman"
data-defaultview="basicWeek"
data-eventlimit="true"
data-timeformat="H:mm"
data-lang="de"
data-weeknumbers="true"
data-headerleft="title"
data-headerright="today month basicWeek prev,next"
data-contentheight="350"
data-get="cal_Roman:lastUpdate"
data-eventcolors="#E6FF57"
data-eventtextcolors="black">
</div>


Aber warum passiert da heute gar nichts mehr? Gestern war mit 2 (existiernden) Kalendern alles in Ordnung...

Ich weiß nicht was hier schon iweder los ist -.-

Grüße^^

[h3llsp4wn]

Hallo Roman,

vielleicht magst Du noch mal testen - ich habe noch kleinere Änderungen gemacht:

- es kann nun entweder ein Array oder einen Wert übergeben werden
- die GET Definition ist nicht mehr erforderlich

Somit müsste es jetzt so:

Code Auswählen Erweitern


<div data-type="fullcalview"
data-device='["Abfall","cal_Roman"]'
data-defaultview="basicWeek"
data-eventlimit="true"
data-timeformat="H:mm"
data-lang="de"
data-weeknumbers="true"
data-headerleft="title"
data-headerright="today month basicWeek prev,next"
data-contentheight="350"
data-eventcolors='["red","#E6FF57"]'
data-eventtextcolors='["white","black"]'>
</div>


Oder so:

Code Auswählen Erweitern


<div data-type="fullcalview"
data-device="cal_Roman"
data-defaultview="basicWeek"
data-eventlimit="true"
data-timeformat="H:mm"
data-lang="de"
data-weeknumbers="true"
data-headerleft="title"
data-headerright="today month basicWeek prev,next"
data-contentheight="350"
data-eventcolors="#E6FF57"
data-eventtextcolors="black">
</div>


Oder auch so:

Code Auswählen Erweitern

<div data-type="fullcalview"
data-device='["Abfall"]'
data-defaultview="basicWeek"
data-eventlimit="true"
data-timeformat="H:mm"
data-lang="de"
data-weeknumbers="true"
data-headerleft="title"
data-headerright="today month basicWeek prev,next"
data-contentheight="350"
data-eventcolors='["red"]'
data-eventtextcolors='["white"]'>
</div>


funktionieren. Ich denke jetzt ist es so schlank, wie Du es vorgeschlagen hast. Wenn's läuft, räume ich den ersten Post noch mal kpl. auf.


Hab gerade das GSD widget entdeckt ... sehr schön!

EDIT: Neue Version siehe unten!

[setstate]

2-3 Fragen zum Code:

- in "update" reagierst du jetzt auf jede Änderung aller Widgets, du hast keinen Filter auf ein Notify, was nur den Kalender betrifft. Also wenn dich die Temp. für das Label XY ändert, wird der Kalender kpl. neu gemacht.
- warum hast du ein Document on ready mit drin? Wenn init gerufen wird ist das Dokument schon ready und dein Widget kann sich generieren.
- ist das Widget Multi-Instanz tauglich? Was passiert, wenn du zwei auf eine Seite setzt? Du hast Variable in Benutzung die du von init nach Update rettest, aber die gelten dann für alle Instanzen gleich. Merkt man, wenn es unterschiedliche Parameter sind.

[roman1528]

Hallo Roman,

vielleicht magst Du noch mal testen - ich habe noch kleinere Änderungen gemacht:

- es kann nun entweder ein Array oder einen Wert übergeben werden
- die GET Definition ist nicht mehr erforderlich

Somit müsste es jetzt so:

Code Auswählen Erweitern


<div data-type="fullcalview"
data-device='["Abfall","cal_Roman"]'
data-defaultview="basicWeek"
data-eventlimit="true"
data-timeformat="H:mm"
data-lang="de"
data-weeknumbers="true"
data-headerleft="title"
data-headerright="today month basicWeek prev,next"
data-contentheight="350"
data-eventcolors='["red","#E6FF57"]'
data-eventtextcolors='["white","black"]'>
</div>


Oder so:

Code Auswählen Erweitern


<div data-type="fullcalview"
data-device="cal_Roman"
data-defaultview="basicWeek"
data-eventlimit="true"
data-timeformat="H:mm"
data-lang="de"
data-weeknumbers="true"
data-headerleft="title"
data-headerright="today month basicWeek prev,next"
data-contentheight="350"
data-eventcolors="#E6FF57"
data-eventtextcolors="black">
</div>


Oder auch so:

Code Auswählen Erweitern

<div data-type="fullcalview"
data-device='["Abfall"]'
data-defaultview="basicWeek"
data-eventlimit="true"
data-timeformat="H:mm"
data-lang="de"
data-weeknumbers="true"
data-headerleft="title"
data-headerright="today month basicWeek prev,next"
data-contentheight="350"
data-eventcolors='["red"]'
data-eventtextcolors='["white"]'>
</div>


funktionieren. Ich denke jetzt ist es so schlank, wie Du es vorgeschlagen hast. Wenn's läuft, räume ich den ersten Post noch mal kpl. auf.


Hab gerade das GSD widget entdeckt ... sehr schön!

Ja das GDS gefällt mich jetzt so auch recht gut 

Mach ich bei gelegenheit...das sieht sehr aufgeräumt und verständlicher aus  danke dafür

Ärgere mich (mal wieder) mit meiner drecks analogclock rum 

Grüße^^

[h3llsp4wn]

@Roman: Die Clock ist doch genial 

@setstate:
Danke für das Feedback!

- der ready ist natürlich flüssig - überflüssig
- Filter auf 'get' beim update eingebaut, baut bei mir initial den Kalender auf und reagiert jetzt nicht mehr auf alles, ich weiß gar nicht, warum ich dass entfernt habe ...
- Multinstanz - da hast Du völlig Recht - ich war nicht davon ausgegangen, dass jemand mehrere Instanzen eines Kalenders aufbauen wird, aber mit den "hidden" Tabs,
pre-load etc., könnte ja jemand mehrere Kalender aufbauen (wenn auch ggf. aus Darstellungsgründen im Hintergrund)

Wenn das ein Aufnahmekriterium ist, muss ich wohl noch mal ran 

[roman1528]

@Roman: Die Clock ist doch genial 

Ja ist sie.. Aber nicht Multi-Instanz fähig XD
Wenn man Sie mehrfach einbindet, bekommt sie trotz ".each(function(index)" immer die gleiche ID zugewiesen und überlagert sich somit selbst...
Und wer PageTab, Link oder PageButton verwendet bekommt sogar 3 oder mehr Uhren, auch wenn er sie nur 1 oder 2 mal eingebunden hat 
Gehört hier aber nicht wirklich mit rein....

@setstate:
Danke für das Feedback!

- Multinstanz - da hast Du völlig Recht - ich war nicht davon ausgegangen, dass jemand mehrere Instanzen eines Kalenders aufbauen wird, aber mit den "hidden" Tabs,
pre-load etc., könnte ja jemand mehrere Kalender aufbauen (wenn auch ggf. aus Darstellungsgründen im Hintergrund)

Sag mit unbedingt wie du das gelöst hast... wenn du es gelöst hast 

Deinen Kalender schaue ich mir heute auf jeden Fall noch an^^

Grüße^^

[morph]

Hi,

also, ich hab jetzt die 3 Dateien geladen und so kopiert wie gefordert. Leider zeigt er mir nichts an?!

Ich habe einen iCal Kalender in Fhem angelegt, dieses device habe ich eingetragen. Geht das nicht so einfach?

[h3llsp4wn]

@morph:
Hast Du auch die hier angegebenen JS Dateien heruntergeladen und entsprechend entpackt?

Was sagt der Debug?

Das ganze basiert weiterhin auf:

• fullcalendar => nach \tablet\fullcalendar entpacken (hier zum download ->https://github.com/arshaw/fullcalendar/releases/download/v2.6.0/fullcalendar-2.6.0.zip)