Listen-(Agenda)-Widget aus CALView

onkeldittmeyer · 13 November 2019, 00:56:11

Tag auch,

ich bin gerade dabei, mir ein Kalenderlistenwidget zusammenzubasteln. Mit der Wiki, dem Forum und viel Trial-and-Error bin ich auch fast am Ziel.

In groben Zügen steht das Ding:

Code Auswählen

          <li data-row="2" data-col="3" data-sizey="4" data-sizex="3" class="big">
                <div class="sheet">
                    <div class="row">
                       <div class="cell">Heute
                        <div data-type="calview"
                        data-device="Kalender"
                        data-get="today"
                        data-detail='["btime","summary"]'
                        data-detailwidth='["30","40"]'></div>
                       <div class="cell">Morgen
                        <div data-type="calview"
                        data-device="Kalender"
                        data-get="tomorrow"
                        data-detail='["btime","summary"]'
                        data-detailwidth='["30","40"]'></div>
                       <div class="cell">Ab Übermorgen
                        <div data-type="calview"
                        data-device="Kalender"
                        data-get="all"
                        data-start="notomorrow"
                        data-detail='["weekdayname","btime","summary"]'
                        data-detailwidth='["30","30","40"]'></div>
                    </div>
                </div>

            </li>

Ziel ist es, ein Widget zu haben, in dem drei Abschnitte dargestellt werden, nämlich "Heute", "Morgen" und "Ab Übermorgen".
Ursprünglich hatte ich die Idee, die nächsten sieben Tage, tageweise darzustellen, dazu habe ich aber keine Lösung gefunden und das deshalb verworfen.

Vielleicht kann mir jemand bei folgenden, vermutlich banalen, Problemen helfen:

1. Wie bewege ich html dazu, den ganzen Kram linksbündig auszuwerfen? Mit text-allign habe ich erfolglos herumexperimentiert (vermutlich der falsche Befehl?).
2. Gibt es irgendeine Möglichkeit, meine Überschriften (ich habe einfach den Text ("Heute" usw) an passender Stelle eingefügt) zu formatieren? Also mit Balken hinterlegen, Schriftgröße usw..?
3. Kann man Ganztagestermine auch ohne Zeit darstellen?

Vielen Dank!

OdfFhem · 13 November 2019, 07:46:18

@onkeldittmeyer

Hallo,

ich habe Deinen Entwurf mal ein wenig überarbeitet (es fehlten doch einige schließende div-Tags) und erweitert (Farbe, Text-Ausrichtung, Text-Größe). Soll nur einige Möglichkeiten verdeutlichen, soll nicht so in die Produktion übernommen werden - schau's Dir einfach mal an ...

Code Auswählen


      <div class="sheet">
        <div class="row">
          <div class="cell bg-lightgray">
            <header class="bg-red black normal">Heute</header>
            <div data-type="calview"
                 data-device="EinmalkalenderView"
                 data-get="today"
                 data-detail='["timeshort","summary"]'
                 data-detailwidth='["30","70"]'
                 data-class="left-align bg-black red">
            </div>
          </div>
          <div class="cell bg-white">
            <header class="bg-yellow black large">Morgen</header>
            <div data-type="calview"
                 data-device="EinmalkalenderView"
                 data-get="tomorrow"
                 data-detail='["timeshort","summary"]'
                 data-detailwidth='["30","70"]'
                 data-class="centered bg-black yellow">
            </div>
          </div>
          <div class="cell bg-lightgray">
            <header class="bg-green black big">Ab Übermorgen</header>
            <div data-type="calview"
                 data-device="EinmalkalenderView"
                 data-get="all"
                 data-start="notomorrow"
                 data-detail='["weekdayname","bdate","timeshort","summary"]'
                 data-detailwidth='["10","20","30","40"]'
                 data-class="right-align bg-black green">
            </div>
          </div>
        </div>
      </div>

Fraglich ist, ob Du wirklich 3 Kalender darstellen möchtest oder vielleicht doch lieber einen Kalender, in dem die heutigen und morgigen Termine hervorgehoben werden können (s. daysleft-Attribute).

onkeldittmeyer · 13 November 2019, 10:55:37

Hallo oldfhem!

Danke erstmal für Deine Variante.

Führt mich alles mehr in Richtung des Verstehens des Codes. Davon bin ich nämlich noch ganz schön weit entfernt. Ich habe verstanden, dass jedes <div> irgendwann ein </div> bekommen muss. Warum das so ist, verstehe ich allerdings nicht.

Wieso sind die Kalender bei Dir nebeneinander (was im Code löst das aus)? Ich hatte sie ja untereinander (so will ich es auch haben), weiß aber natürlich auch nicht warum.

Deine Frage bezüglich der drei Kalender verstehe ich nicht so ganz. Letztlich will ich eine Liste mit drei "Zwischenüberschriften". Nämlich "Heute", "Morgen" und "Ab übermorgen". Ich habe auch überlegt nur "übermorgen" zu nehmen und data-get für übermorgen eben auf die Termine von übermorgen zu begrenzen, ich muß aber noch rumdoktorn, ob das so überhaupt geht.

Die ursprüngliche Überlegung war ja:

Heute
Uhrzeit Termin
Morgen
Uhrzeit Termin
Freitag
Uhrzeit Termin
Samstag
Uhrzeit Termin

(usw., für eine Woche).

onkeldittmeyer · 13 November 2019, 11:15:16

OK, ich habe noch etwas am Code gebastelt. Dank Deiner Hilfe bin ich schon ziemlich nah an dem dran, was ich haben will:

Code Auswählen


<li data-row="2" data-col="3" data-sizey="3" data-sizex="2">
 <div class="sheet">
        <div class="row">
          <div class="cell bg-black">
            <header class="bg-gray white normal">Heute</header>
            <div data-type="calview"
                 data-device="Kalender"
                 data-get="today"
                 data-detail='["btime","summary"]'
                 data-detailwidth='["30","70"]'
                 data-class="left-align bg-black white normal">
            </div>
          </div>
          <div class="cell bg-black">
            <header class="bg-gray white normal">Morgen</header>
            <div data-type="calview"
                 data-device="Kalender"
                 data-get="tomorrow"
                 data-detail='["btime","summary"]'
                 data-detailwidth='["30","70"]'
                 data-class="left-align bg-black white normal">
            </div>
          </div>
          <div class="cell bg-black">
            <header class="bg-gray white normal">Ab Übermorgen</header>
            <div data-type="calview"
                 data-device="Kalender"
                 data-get="all"
                 data-start="notomorrow"
                 data-detail='["weekdayname","btime","summary"]'
                 data-detailwidth='["20","30","40"]'
                 data-class="left-align bg-black white normal">
            </div>
          </div>
        </div>
      </div>
</li>

Für einen Hinweis, wie ich die Dinger untereinander bekommen kann, wäre ich dankbar. Gibt es eine Möglichkeit, die Ganztagestermine ohne Uhrzeit darzustellen (und dann vielleicht sogar noch mit einem Balken als Hintergrund zu hinterlegen)?

OdfFhem · 13 November 2019, 12:06:10

@onkeldittmeyer

Eine Variante wäre die sheet-, row- und col-div-Tags zu entfernen ... bereinigter Code sähe dann so aus:

Code Auswählen


            <header class="bg-gray white normal">Heute</header>
            <div data-type="calview"
                 data-device="EinmalkalenderView"
                 data-get="today"
                 data-detail='["btime","summary"]'
                 data-detailwidth='["30","70"]'
                 data-class="left-align bg-black white normal">
            </div>
            <header class="bg-gray white normal">Morgen</header>
            <div data-type="calview"
                 data-device="EinmalkalenderView"
                 data-get="tomorrow"
                 data-detail='["btime","summary"]'
                 data-detailwidth='["30","70"]'
                 data-class="left-align bg-black white normal">
            </div>
            <header class="bg-gray white normal">Ab Übermorgen</header>
            <div data-type="calview"
                 data-device="EinmalkalenderView"
                 data-get="all"
                 data-start="notomorrow"
                 data-detail='["weekdayname","btime","summary"]'
                 data-detailwidth='["20","30","40"]'
                 data-class="left-align bg-black white normal">
            </div>

Eine andere Möglichkeit wäre, dass Du mehr row-div-Tags benutzt ... jede row eine neue sheet-Zeile.

Hilfreich könnte ein Blick auf https://wiki.fhem.de/wiki/FTUI_Layout_Sheet sein; dort gibt es auch ein paar Beispiele.

Hinweis: Darauf achten, dass die Addition der Werte aus data-detailwidth 100 ergibt ("20","30","40" fällt da schon mal durch).

Bzgl. der Ganztagestermine kann man zunächst mal nicht viel machen, da die darzustellenden Werte 1:1 aus dem CALVIEW-FHEM-Device übernommen werden.

onkeldittmeyer · 13 November 2019, 12:54:25

Top, Danke, so geht's.

Ich sag' ja, den HTML-code habe ich bei weitem nicht verstanden. Was genau li, col, sheet bewirken ist mir nicht klar. Aber ich habe ja auch erst vor drei Tagen damit angefangen.

Btw: Ich bekomme immer nur 10 Termine angezeigt, obwohl ich in CALView maxreadings auf 30 gesetzt habe. Hast Du eine Idee?

OdfFhem · 13 November 2019, 13:45:54

@onkeldittmeyer

Vorausgesetzt, Dein CALVIEW-FHEM-Device hat im Reading c-term einen größeren Wert als 10, dann liegt es höchstwahrscheinlich daran, dass Du data-max im CALVIEW-Widget nicht gesetzt hast; der Standardwert ist nämlich 10.

Du solltest in diesem Fall ein Attribut der folgenden Form ergänzen:

Code Auswählen


data-max="20"

onkeldittmeyer · 13 November 2019, 17:58:23

Auch das stimmt. Vielen Dank! Wer hat mein Widget jetzt eigentlich gebaut? Du oder ich?

Jedenfalls bin ich mit dem Ergebnis echt zufieden. Sieht gut aus. Ich werde noch etwas mit den Größen spielen. Leider gibt es keine Möglichkeit, noch die Termine von übermorgen als Gruppe abzugreifen, sonst würde ich es vielleicht wirklich auf die drei Tage beschränken, aber gut.

So benutzte ich es zunächst mal:

Code Auswählen


<li data-row="2" data-col="3" data-sizey="4" data-sizex="3">
 <header class="bg-gray white normal">Heute</header>
            <div data-type="calview"
                 data-device="Kalender"
                 data-get="today"
                 data-detail='["btime","summary"]'
                 data-detailwidth='["20","80"]'
                 data-class="left-align white big">
            </div>
            <header class="bg-gray white normal">Morgen</header>
            <div data-type="calview"
                 data-device="Kalender"
                 data-get="tomorrow"
                 data-detail='["btime","summary"]'
                 data-detailwidth='["20","80"]'
                 data-class="left-align white big">
            </div>
            <header class="bg-gray white normal">Ab Übermorgen</header>
            <div data-type="calview"
                 data-device="Kalender"
                 data-get="all"
                 data-max=17
                 data-start="notomorrow"
                 data-detail='["weekdayname","summary"]'
                 data-detailwidth='["20","80"]'
                 data-class="left-align white normal">
            </div>
</li>

OdfFhem · 13 November 2019, 19:14:38

@onkeldittmeyer

Um Termine quasi auszublenden, die später als übermorgen sind, kannst Du ein Attribut im Calendar-Device (nicht im CALVIEW-Device) setzen.

Das Attribut hideLaterThan legt z.B. fest, dass alle Termine, die mehr als 2 Tage in der Zukunft liegen, ignoriert werden.

Code Auswählen


attr <Calendar-Device> hideLaterThan 2d

Hast Du dieses Attribut gesetzt, muss man auch noch ein set <Calendar-Device> reload durchführen. Anschließend sollten die "weit" in der Zukunft liegenden Termine verschwunden sein ...

onkeldittmeyer · 13 November 2019, 20:35:41

Hatte ich schon probiert. Allerdings habe ich das "d" hinter der zwei nicht verwendet (nimmt der dann zwei Sekunden als Wert?). Mit Deinem "d" klappt es.

Jedenfalls ist das Widget jetzt (für mich) fertig:

Code Auswählen


<li data-row="2" data-col="3" data-sizey="4" data-sizex="3">
 <header class="bg-gray white normal">Heute</header>
            <div data-type="calview"
                 data-device="Kalender
                 data-get="today"
                 data-detail='["btime","summary"]'
                 data-detailwidth='["20","80"]'
                 data-class="left-align white big">
            </div>
            <header class="bg-gray white normal">Morgen</header>
            <div data-type="calview"
                 data-device="Kalender"
                 data-get="tomorrow"
                 data-detail='["btime","summary"]'
                 data-detailwidth='["20","80"]'
                 data-class="left-align white big">
            </div>
            <header class="bg-gray white normal">Übermorgen</header>
            <div data-type="calview"
                 data-device="Kalender"
                 data-get="all"
                 data-max=17
                 data-start="notomorrow"
                 data-detail='["btime","summary"]'
                 data-detailwidth='["20","80"]'
                 data-class="left-align white big">
            </div>
</li>

OdfFhem · 13 November 2019, 21:13:01

@onkeldittmeyer

Zahl ohne nähere Spezifikation wird als Sekundenangabe interpretiert.
86400 oder 86400s oder 1d führen zum identen Ergebnis.

onkeldittmeyer · 15 November 2019, 23:40:55

Ja, sowas habe ich mir nachher auch zusammengereimt. Demnach eine Sekunde. Ist natürlich was wenig....

onkeldittmeyer · 20 November 2019, 17:07:56

Muß nochmal nachhören.

Mein "finaler" Code:

Code Auswählen


<li data-row="2" data-col="3" data-sizey="3" data-sizex="3">
 <header class="bg-gray white small">Heute</header>
            <div data-type="calview"
                 data-device="Kalender"
                 data-get="today"
                 data-detail='["btime","summary"]'
                 data-detailwidth='["20","80"]'
                 data-class="left-align white large">
            </div>
            <header class="bg-gray white small">Morgen</header>
            <div data-type="calview"
                 data-device="Kalender"
                 data-get="tomorrow"
                 data-detail='["btime","summary"]'
                 data-detailwidth='["20","80"]'
                 data-class="left-align white large">
            </div>
            <header class="bg-gray white small">Übermorgen</header>
            <div data-type="calview"
                 data-device="Kalender"
                 data-get="all"
                 data-max=17
                 data-start="notomorrow"
                 data-detail='["btime","summary"]'
                 data-detailwidth='["20","80"]'
                 data-class="left-align white large">
            </div>
</li>

Jetzt funktionieren die Bereiche "heute" und "rmorgen" einwandfrei. Der Bereich Übermorgen macht allerdings Probleme. So ist da zum Beispiel ein Geburtstag aufgetaucht, der eigentlich nach "übermorgen" (also am 4. Tag) war.
Heute habe ich einen gestern in Google geänderten Termin doppelt drin. Also: Ich habe in Google aus dem Termin "Beispiel" den Termin "Beispiel neu" gemacht. In Google und allen Endgeräten ist auch nur der Termin "Beispiel neu" FTUI zeigt komischerweise beide Termine an.

Hat jemand eine Idee?

onkeldittmeyer · 20 November 2019, 17:57:51

Eigentlich sollte ich den vorherigen Beitrag löschen. Es war eigene Blödheit. Komischerweise bemerke ich solche Fehler immer erst, wenn ich Euch mit meinen Fragen traktiert habe.

Falls mal jemand dasselbe Problem haben sollte: Wer Termine nach "übermorgen"nicht haben will, sollte in FHEM hidelater "2d" (und nicht wie ich Held 3d) einstellen. In diesem Sinne....

onkeldittmeyer · 25 November 2019, 10:28:49

Nochmal eine Frage:

"hidelater 2d" bedeutet offenbar, dass alle Termine, die mehr als 48 Stunden in der Zukunft liegen versteckt werden. Das führt dann dazu, dass, wenn man morgens um 10.00 Uhr auf das Widget schaut, die Termine, die übermorgen nach 10.00 Uhr im Kalender stehen, nicht angezeigt werden.

Gibt es eine Möglichkeit, dem Widget beizubringen, nur die Termine zu verstecken, die nach dem zweiten Tag stattfinden?