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

[Masterfunk]

Danke für das Widget.
Hab nur das Problem, dass in "Fully keine Termine angezeigt werden.
In allen anderen Browsern gehts.
Hat jemand einen Tip?

Gruß Detlef

[h3llsp4wn]

Eigentlich nutzt fully soweit ich weiß das web-kit, was darunter liegt. Also sollte es klappen. Ich hatte fully auch mal in Nutzung. Müsste ich noch mal installieren und schauen.
Ich meine aber in Fully gab's keine großen Debug-Möglichkeiten. Muss ich mir bei Gelegenheit mal anschauen.

[Bootscreen]

sorry, bin heute erst zum testen gekommen. Leider muss ich fragen. Wie aktivier ich das mit dem Popup nun? ich hab den Inhalt des Archives entpackt und an Ort und Stelle kopiert. Aber was ich jetzt noch wo einbinden?

[h3llsp4wn]

Hm - eigentlich musst Du nichts machen (ok - ich hätte dafür auch noch einen Schalter einbauen können) - je nach Gerät solltest Du beim Klick oder tippen auf ein Ereignis das Popup bekommen.
Ein Klick außerhalb und es verschwindet wieder.

Habe aber gerade eben schon festgestellt, dass ich nicht gesetzte Felder ausblenden sollte (wenn kein Ort o.ä. angegeben ist).

[Masterfunk]

Eigentlich nutzt fully soweit ich weiß das web-kit, was darunter liegt. Also sollte es klappen. Ich hatte fully auch mal in Nutzung. Müsste ich noch mal installieren und schauen.
Ich meine aber in Fully gab's keine großen Debug-Möglichkeiten. Muss ich mir bei Gelegenheit mal anschauen.

Hab jetzt mal auf dem kleinen Tablet (Nexus7) mit 6.0 Marshmallow getestet.
Da lauft es ohne Probleme auch unter Fully.

Nur auf meinem HP Slate21 mit 4.4 KitKat wird nichts angezeigt.
Liegt es eventuell an der web-kit Version?

Gruß Detlef

[knopf_piano]

Hi h3llsp4wn,
Ich hab's jetzt auch am Laufen.
Wenn ich jetzt rechts oben woche/Monat vor/zurück anwähle, erhalte ich für die neue Ansicht jedoch keine Einträge bzw. es wird nichts aktualisiert.
konsole sagt:

Code Auswählen Erweitern

TypeError: event.getFirstPropertyValue(...) is null
Das ist in ical_events.js

debugging sagt dann folgendes aus (siehe screenshot) mit Verweis auf jquery.min.js

bin nicht so tief in js...

Wenn ich zwischen Wochen/Monatsansicht dann wechsle, sehe ich dann die termine für den nächsten Monat.

hast du gleiches Verhalten?

Grüße
---
EDIT: tritt sporadisch auf, manchmal klappt's, manchmal nicht

ps: wieviele Kalender vertägt das widget? bei 8 wird einer verschluckt
Ansonsten top sache! danke!

[h3llsp4wn]

@Masterfunk:
Ok - ich habe noch ein altes Tablet mit 4.4 drauf - da kann ich mal testen, was die Browser so sagen - ich vermute, dass es an der Web-Kit Version liegt.

@knopf_piano:
Nur kurz - welche Version hast Du aktuell im Einsatz? Die letzte von mir hier aus dem Post vom 08.11.?

Sieht erst mal so aus, als würden da Daten fehlen - ich kann mir kaum vorstellen, dass Du Termine im Kalender ohne Start- oder Endetermin?
Serientermine hatte ich eigentlich zwischenzeitlich noch mal angepasst. Könnte also das Format sein oder aber Daten. Ich könnte mal einen Handler
einbauen, der für den Fall, dass es keine Termine gibt einfach "heute" 0:00 annimmt, dann könnte man mal schauen - ich fürchte aber da fehlen
dann zum Event auch noch andere Daten.

Sporadisch deutet für mich aber auf Probleme beim Abruf von FHEM hin - ich habe gerade am Kalender (und auch bei meiner Heizungssteuerung)
Probleme mit dem Datenabruf in größeren Mengen. Da alles async läuft, kommen dann ggf. die Antworten manchmal zu spät. Das war vorher (als
FTUI noch alles initial geholt hat etwas anderes) - mit dem nachladen der Daten für die Devices hängt es etwas. Da müsste man quasi alle Kalender
manuell solange laden, bis Sie wirklich da sind. Dann hängt aber auch die ganze UI für den Zeitraum. Ich könnte mal alle Events/Kalender als
Debug einbauen, dann sehen wir ggf. wo er sporadisch aussteigt.

Ich hatte testweise mal für 10 Kalender (geklonte) das Widget gestartet - allerdings mit wenigen Terminen.

Hast Du FHEM/FTUI über Apache/ngnix o.ä. laufen oder noch direkt?

[stefan-dd]

Tolles Widget!

Wie funktioniert die Sache mit mehreren Kalendern?
Entweder kommt gar keiner, oder nur der erste.
So geht es nicht:

Code Auswählen Erweitern

data-device='["Kalender_Termine","Abfall"]'
Wie muss es richtig sein, was ist noch zu beachten?
Danke

[joesy]

Ich habe heute den neuesten Code getestet. Es ist kein Popup erschienen, im Debugger habe ich dann eine Exception gesehen. Das Problem ist wohl, dass data.start und data.end Objekte sind die moment Funktion einen String erwartet. Ich habe das mit folgender Änderung lösen können.

Code Auswählen Erweitern

--- widget_fullcalview.js       2016-11-16 18:10:16.592265822 +0100
+++ widget_fullcalview.js.new   2016-11-16 18:10:16.592265822 +0100
@@ -138,8 +138,8 @@
                                                var content = '<h3>'+data.title+'</h3>' +
                                                '<p><b>Beschreibung:</b> '+data.description+'<br />' +
                                                '<p><b>Ort:</b> '+data.location+'<br />' +
-                                               '<p><b>Start:</b> '+moment(data.start.format('DD.MM.YYYY HH:mm')+'<br />' +
-                                               (data.end && '<p><b>Ende:</b> '+moment(data.end).format('DD.MM.YYYY HH:mm')+'</p>' || '');
+                                               '<p><b>Start:</b> '+moment(data.start.toString())).format('DD.MM.YYYY HH:mm')+'<br />' +
+                                               (data.end && '<p><b>Ende:</b> '+moment(data.end.toString())).format('DD.MM.YYYY HH:mm')+'</p>' || '');
                                                tooltip.set({
                                                        'content.text': content
                                                })


Nach dieser Änderung erscheint das Popup. Es gibt aber noch zwei Probleme. Bei Termin am Monatsende ist ein Teil nicht sichtbar, weil das Popup unterhalb des Eintrages geöffnet wird. Und das Popup verschwindet nicht mehr. Wenn ich auf einen anderen Termin klicke, verschwindet der erste und ein neues Popup erscheint. Es bleibt aber immer das letzte Popup sichtbar.

Ansonsten gefällt mir das schon gut mit den Detailinfos zu den Terminen.

joesy

[joesy]

@stefan-dd

Es sieht so aus, dass wenn man mehrere Kalender darstellen will, auch für die Parameter data-eventcolors und data-eventtextcolor die gleiche Anzahl von Werten gesetzt zu haben. Fehlen hier Wert oder es sind mehr Werte eingetragen, wird der Kalender nicht dargestellt.

Code Auswählen Erweitern

data-device='["Feiertage","Abfall"]'
data-eventcolors='["#E6FF57","red"]'
data-eventtextcolors='["black","white"]'


Joesy

[joesy]

Das Problem, warum sich das Popup nicht schliesst, hat sich gelöst. Das dayClick-Event zum Schliessen des Popup nicht nicht erzeugt. Für das dayClick-Event müssen die Callback Parameter übergeben werden, auch wenn diese im ausführenden Code nicht benötigt werden.

Code Auswählen Erweitern

dayClick: function( ) { tooltip.hide() },
ändern in

Code Auswählen Erweitern

dayClick: function(data, event, view ) { tooltip.hide() },

joesy

[h3llsp4wn]

@joesy: Danke für's bugfixen

Da die FTUI 1.0 ja jetzt nicht mehr gilt, werde ich mal den aktuellen Stand dokumentieren müssen.

@stefan-dd: Wie joesy schon geschrieben hat, wenn mehrere Kalender, dann müssen auch die anderen Parameter verdoppelt werden. Müsste eigentlich auch ein Fehler bzgl. Anzahl Parameter in der Konsole ausgeben.

[joesy]

@h3llsp4wn

@joesy: Danke für's bugfixen

Gerne

Ich habe die Tage noch mit dem Widget experimentiert. Mir würde es gefallen, wenn mehrere Kalender angezeigt werden, über Buttons gezielt einzelne Kalender oder Kombinationen von Kalender selektiert werden können.

Mit Hilfe der customButtons lassen sich einfach im Header zusätzliche Buttons hinzufügen. Ich habe dazu header center verwendet. Leider habe ich kaum JS Kenntnisse.  Daher geht das ganze vermutlich wesentlich besser und eleganter.

Probleme/offene Punkte:

• Bei vielen Kalender geht im Header der Platz aus
• Wiederkehrende Termine bleiben stehen
• Buttons werden nicht als selektiert dargestellt

Wie kann ich die wiederkehrenden Termine aus den einzelnen Kalender ein- und ausblenden?

Hier meine bisherigen Änderungen

Code Auswählen Erweitern

--- widget_fullcalview.js       2016-11-18 11:33:55.081704247 +0100
+++ widget_fullcalview.js.new   2016-11-18 11:33:27.034651714 +0100
@@ -23,7 +23,7 @@
        var ics_sources =[];
        var firstRun = [];
        var recur_done = false;
-
+       var selected_cals = [];

        var tooltip = $('<div style="position: absolute;"/>').qtip({
                id: 'fullcalendar',
@@ -119,13 +119,32 @@

                                elem.data('get', eventdataUpdate);
                                me.addReading(elem,'get');
-
+
+                               var buttons = "";
+                               var myButtons = {};
+                               for ( var i=0; i <eventsources.length; i++ ) {
+                                       var name = eventsources[i];
+                                       myButtons[name] = new Object();
+                                       myButtons[name].text = name;
+                                       myButtons[name].click = function() {
+                                                                       single_calendar ( event );
+                                                               }
+                                       buttons += ' ' + name;
+                               }
+                               myButtons['Alle'] = new Object();
+                               myButtons['Alle'].text = 'Alle';
+                               myButtons['Alle'].click = function() {
+                                                                        single_calendar ( event );
+                                                                }
+                               buttons += ' ' + 'Alle';
+
                                $('#calendar').fullCalendar({
                                        eventLimit: eventLimitVar, // allow "more" link when too many events
+                                       customButtons: myButtons,
                                        header:
                                        {
                                                left:   headerLeftVar,
-                                               center: headerCenterVar,
+                                               center: buttons, //headerCenterVar,
                                                right:  headerRightVar
                                        },
                                        defaultView: defaultViewVar,
@@ -138,17 +157,17 @@
                                                var content = '<h3>'+data.title+'</h3>' +
                                                '<p><b>Beschreibung:</b> '+data.description+'<br />' +
                                                '<p><b>Ort:</b> '+data.location+'<br />' +
-                                               '<p><b>Start:</b> '+moment(data.start).format('DD.MM.YYYY HH:mm')+'<br />' +
-                                               (data.end && '<p><b>Ende:</b> '+moment(data.end.format('DD.MM.YYYY HH:mm')+'</p>' || '');
+                                               '<p><b>Start:</b> '+moment(data.start.toString()).format('DD.MM.YYYY HH:mm')+'<br />' +
+                                               (data.end && '<p><b>Ende:</b> '+moment(data.end.toString()).format('DD.MM.YYYY HH:mm')+'</p>' || '');
                                                tooltip.set({
                                                        'content.text': content
                                                })
                                                .reposition(event).show(event);
                                        },
-                                       dayClick: function() { tooltip.hide() },
-                                       eventResizeStart: function() { tooltip.hide() },
-                                       eventDragStart: function() { tooltip.hide() },
-                                       viewDisplay: function() { tooltip.hide() }
+                                       dayClick: function(data, event, view ) { tooltip.hide() },
+                                       eventResizeStart: function( data, event, view) { tooltip.hide() },
+                                       eventDragStart: function(data, event, view) { tooltip.hide() },
+                                       viewDisplay: function(data, event, view) { tooltip.hide() }
                                });

                        }
@@ -184,6 +203,39 @@
                });
        };

+       function single_calendar ( event ) {
+
+               var cal = event.currentTarget.childNodes[0].data;
+               recur_events = [];
+               recur_done = false;
+               if ( cal === 'Alle' ) {
+                       selected_cals = eventsources;
+               }
+               else {
+                       if ( selected_cals.indexOf( cal ) > -1 )
+                               selected_cals.splice( selected_cals.indexOf( cal ), 1 );
+                       else
+                               selected_cals.push( cal );
+               }
+               for (var n=0; n < eventsources.length; n++) {
+                       (function(clsn){
+                               $('#calendar').fullCalendar('removeEvents', function(event) { return event.eID == eventsources[clsn];});
+                       })(n);
+
+                       for (var i=0; i < selected_cals.length; i++) {
+                               if (eventsources[n] === selected_cals[i]) {
+                                       (function(clsn){
+                                               load_ics(ics_sources[clsn]);
+                                               add_recur_events();
+                                       })(n);
+
+                               }
+                       }
+               }
+       };
+
+
+
   return $.extend(new Modul_widget(), {
       widgetname: 'fullcalview',
       init:init,


Vielleicht kann das noch jemand gebrauchen.

joesy

[Sharp]

Tolle Arbeit!

Die Umsetzung hat super funktioniert und ist absolut stabil.
Zur Zeit nutze ich den FHEM auf einem raspberry pi und lese die Kalendereinträge aus der NextCloud in FHEM ein.

Jetzt zu meiner Frage.

In der Nextcloud werden Kalendereinträge wiederholt, so dass ich jeden Montag den gleichen Termin angezeigt haben möchte (z. B. Fußballtraining Sohn).
In der Nextcloud sowie im FHEM über CALVIEW werden die Termineinträge problemlos angezeigt.
In eurem FTUI Widget FULLCALVIEW werden allerdings die Kalendereinträge nicht angezeigt, die wiederholt werden.

Könnt ihr dieses Problem bestätigen?

Viele Grüße
Sharp

[morph]

Hi,

also ich bekomme das ganze nicht zum laufen.

Ich bekomme keine Anzeige im Tablet UI.

wie kann ich wo überprüfen an was es liegt?

Ich muss dazu sagen, ich versteh nicht allzuviel von Fachbegriffen, also bitte ich zu entschuldigen wenn ihr mir genauer erklären müsst was ich machen soll.

Danke aufjedenfall für eure Mühen


meine Def. in Fhem:

Code Auswählen Erweitern


define Patrick_Kalender Calendar ical url https://xxx-calendars.icloud.com/published/2/xxxxxxxxxxxxx 3600
attr Patrick_Kalender hideLaterThan 5d
attr Patrick_Kalender hideOlderThan 0d
attr Patrick_Kalender room System
   
define cal_Patrick CALVIEW Patrick_Kalender
attr cal_Patrick modes next
attr cal_Patrick room System


Daten hab ich hier auch drin

So sieht es in TabletUI aus

Code Auswählen Erweitern


<li data-row="2" data-col="2" data-sizex="5" data-sizey="4" class="halbTransparent">
<header>Kalender</header>
<div data-type="fullcalview"
data-device="cal_patrick"
data-defaultview="basicWeek"
data-eventlimit="true"
data-timeformat="H:mm"
data-lang="de"
data-weeknumbers="true"
data-headerleft="title"
data-headercenter=""
data-headerright="today month basicWeek prev,next"
data-contentheight="350"
data-eventsource_1="Patrick_Kalender"
data-eventcolor_1="#E6FF57"
data-eventtextcolor_1="black"
data-eventsource_2="fhemAbfall"
data-eventcolor_2="#808080"
data-eventtextcolor_2="white"
class="darker small inline"/>

</li>