"TABLETUI zeigt alte Einträge aus CALVIEW welche nicht mehr existieren

[hermann1514]

huhu,

habe da mal wieder ein Problem:
Ich habe per CALVIEW einen Google Kalender eingetragen. Dieser wird auch entsprechend in den READINGS angezeigt. Im TBALETUI habe ich dann per LABEL die nächsten 7 READINGS aufgelistet. Funktioniert soweit ganz gut. Sobald aber keine 7 Termine zur Verfügung stehen, werden anstatt leere Zeilen einfach alte Einträge vom Kalender angezeigt. Im StatusFenster von FHEM sehe ich aber dann nur z.B denn nächsten einzigen Termin. Wenn immer 7 oder mehr Termine zur Verfügung stehen funktioniert alles soweit.

Kann ich das verhindern das alte Einträge angezeigt werden?

Hier mal der HTML Code für mein TABLETUI:

Code Auswählen Erweitern

<li class="seagreen" data-row="8" data-col="1" data-sizex="4" data-sizey="4" >

 
 
<header class="medium">Geburtstage und Jubiläen</header>

<div class="top-space">
<div data-type="label" data-device="calview_birthday" data-get="t_001_bdate" data-part="(\d\d\.\d\d\.).*" class="cell large inline left left-space row"></div>
<div data-type="label" data-device="calview_birthday" data-get="t_001_summary" class="cell large inline""></div>
</div>
<div class="top-space">
<div data-type="label" data-device="calview_birthday" data-get="t_002_bdate" data-part="(\d\d\.\d\d\.).*" class="cell large inline left left-space row"></div>
<div data-type="label" data-device="calview_birthday" data-get="t_002_summary" class="cell large inline"></div>
</div>
<div class="top-space">
<div data-type="label" data-device="calview_birthday" data-get="t_003_bdate" data-part="(\d\d\.\d\d\.).*" class="cell large inline left left-space row"></div>
<div data-type="label" data-device="calview_birthday" data-get="t_003_summary" class="cell large inline"></div>
</div>
<div class="top-space">
<div data-type="label" data-device="calview_birthday" data-get="t_004_bdate" data-part="(\d\d\.\d\d\.).*" class="cell large inline left left-space row"></div>
<div data-type="label" data-device="calview_birthday" data-get="t_004_summary" class="cell large inline"></div>
</div>
<div class="top-space">
<div data-type="label" data-device="calview_birthday" data-get="t_005_bdate" data-part="(\d\d\.\d\d\.).*" class="cell large inline left left-space row"></div>
<div data-type="label" data-device="calview_birthday" data-get="t_005_summary" class="cell large inline"></div>
</div>
<div class="top-space">
<div data-type="label" data-device="calview_birthday" data-get="t_006_bdate" data-part="(\d\d\.\d\d\.).*" class="cell large inline left left-space row"></div>
<div data-type="label" data-device="calview_birthday" data-get="t_006_summary" class="cell large inline"></div>
</div>
<div class="top-space">
<div data-type="label" data-device="calview_birthday" data-get="t_007_bdate" data-part="(\d\d\.\d\d\.).*" class="cell large inline left left-space row"></div>
<div data-type="label" data-device="calview_birthday" data-get="t_007_summary" class="cell large inline"></div>
</div>


</li>


Gruß
Hermann

[chris1284]

es gibt ein widget für calview in der tui.

hintergrund der alten readings in tui-label ist denke ich das es keinen neuen wert gibt  wenn die readings weg sind und so die readings in der tui erst wieder aktualisiert werden wenn sich die readings wieder in fhem auftauchen

[hermann1514]

Welches Widget meinst du denn? Das Reading Widget?

[chris1284]

widget_calview.js
bsp: für heute un morgen termine:

Code Auswählen Erweitern


<li data-row="2" data-col="6" data-sizex="4" data-sizey="2">
<header>Today</header>
<div data-type="calview" data-device="View_All" data-get="today" data-max="7" class="cell"></div>
<div data-type="calview" data-device="View_All" data-get="tomorrow" data-max="7" class="cell"></div>
</li>

es gibt aber auch https://github.com/knowthelist/fhem-tablet-ui/pull/131 (ob ess schon produktiv ist weiss ich nicht)

[setstate]

Mit

Code Auswählen Erweitern

class="autohide"
kann man alte Readings ausblenden. Müsste ich aber nochmal genau raussuchen.
Im Forum hier müssten auch eins zwei Beispiele zu finden sein.

Hier der Link. https://forum.fhem.de/index.php/topic,47937.msg395972.html#msg395972

[HoTi]

ähm im Calender bei dir das attribut HideOlderThan setzen?!?!

Dann zeigt dir CALVIEW keine alten Einträge mehr. Zumindest nicht älter als das was du ins Attribut einträgst...

[chris1284]

sobald aber keine 7 Termine zur Verfügung stehen, werden anstatt leere Zeilen einfach alte Einträge vom Kalender angezeigt.

ich glauber nicht dass das hilft. ich mein er redet davon wenn wirklich 0 termine in der view sind.
die überschrift ist dann falsch und müsste lauten "TABLETUI zeigt alte Einträge aus CALVIEW welche nicht mehr existieren"

[hermann1514]

Stimmt. So klingt es besser.

Habe das Problem noch immer.
Sobald noch Termine in der Zukunft sind, wird alles perfekt angezeigt.
Existieren aber keine Termine mehr, werden die letzten Termine doppelt angezeigt - obwohl in den Readings vom CALVIEW alles gut aussieht.

Kennst jemand das Problem?

Gruß
Hermann

[haempy]

Servus hermann1514

ich habe genau das gleiche Problem! Gibt es dazu schon eine Lösung?

[hermann1514]

Huhu,


kann sonst noch jemand das Problem nachvollziehen? Oder gibt es schon eine Lösung?

Gruß
Hermann

[klausw]

widget_calview.js
bsp: für heute un morgen termine:

Code Auswählen Erweitern


<li data-row="2" data-col="6" data-sizex="4" data-sizey="2">
<header>Today</header>
<div data-type="calview" data-device="View_All" data-get="today" data-max="7" class="cell"></div>
<div data-type="calview" data-device="View_All" data-get="tomorrow" data-max="7" class="cell"></div>
</li>

es gibt aber auch https://github.com/knowthelist/fhem-tablet-ui/pull/131 (ob ess schon produktiv ist weiss ich nicht)

Sollte dieses Modul auch mit der Version 2.2 funktionieren?
Bei mir bleiben die Felder leer

[chris1284]

Sollte dieses Modul auch mit der Version 2.2 funktionieren?

wohl nicht. ich habe v2 nicht im einsatz und werde denke ich erst damit rumspielen wenn sie final veröffentlicht wurde. die änderungen die setstate mal nannte sind im modul nicht drin

[klausw]

Ok, dann warte ich

[setstate]

es gibt aber auch https://github.com/knowthelist/fhem-tablet-ui/pull/131 (ob ess schon produktiv ist weiss ich nicht)

oh sch..., der pull request ist bei mir total verschütt gegangen. Keine Absicht!
Hab's gerade in die 1.* gemerged.
new -> widget_agenda.js

    configuration:
        data-max: maxmimum number of entries to show
        data-config: json to specify settings. e.g: data-config='{ "source1" : {"color":"#1C8C7A", "abbreviation":"F"}, "source2" : {"color":"#7D786F", "icon":"fa-ambulance"} }'
            source1, source2: names of CALVIEW entry source where config applies to
            icon: fa icon to use for entry
            abbreviation: character to use as symbol if no icon specified
            color: background color used for entry

    todo: refactoring, code/html cleanup
    known issues:
        layout issue when summary of entry exceeds one line
    untested: oa icon support

Schön wäre jetzt noch eine Version für die 2.2

für die widget_callview.js fehlt auch noch eine 2.2er Version
widget_fullcalview.js ist schon für 2.2 verfügbar.

[chris1284]

hallo setstate, habe das widget (hoffentlich korekt ) angepasst, es tut zumindest bei mir . Kannst noch mal bitte in den code schauen?
die dynamische aktualisierung beim ändern von den readings haut sehr gut hin ( im vergleich zur ersten tui version) TOP!!

https://forum.fhem.de/index.php?action=dlattach;topic=52137.0;attach=54064;image

PS gibts den punkt bild einbetten nicht mehr??

[chris1284]

von den leuten die das widget schon geladen haben wünsche ich mir eine rückmeldung ob es dort auch funktioniert.

wenn ja würde ich setstate bitten es einzuchecken. ich könnte bisher nichts negatives feststellen in der eval

[klausw]

von den leuten die das widget schon geladen haben wünsche ich mir eine rückmeldung ob es dort auch funktioniert.

wenn ja würde ich setstate bitten es einzuchecken. ich könnte bisher nichts negatives feststellen in der eval

Ich habe es heute getestet, leider ohne Erfolg. Es werden keine Termine angezeigt.


Die erste Zeile der Datei in Post 14 lautet:

Code Auswählen Erweitern

// Version Chris1284 25-11-2015 18:15 V1.0
Ist das trotzdem die korrekte Version?

List meines calview Device:

Code Auswählen Erweitern

Internals:
   CFGFN
   DEF        Kalender_FHEM next 14400
   INTERVAL   14400
   KALENDER   Kalender_FHEM
   NAME       View_Kalender_FHEM
   NR         43740
   NTFY_ORDER 50-View_Kalender_FHEM
   STATE      t: 6 td: 2 tm: 1
   TYPE       CALVIEW
   Readings:
     2016-06-28 15:59:44   c-term          6
     2016-06-28 15:59:44   c-today         2
     2016-06-28 15:59:44   c-tomorrow      1
     2016-06-28 15:59:44   state           t: 6 td: 2 tm: 1
     2016-06-28 15:59:44   t_001_bdate     28.06.2016
     2016-06-28 15:59:44   t_001_btime     12:00:00
     2016-06-28 15:59:44   t_001_edate     28.06.2016
     2016-06-28 15:59:44   t_001_etime     21:00:00
     2016-06-28 15:59:44   t_001_mode      next
     2016-06-28 15:59:44   t_001_source    Kalender_FHEM
     2016-06-28 15:59:44   t_001_summary   Versuch
     2016-06-28 15:59:44   t_002_bdate     28.06.2016
     2016-06-28 15:59:44   t_002_btime     17:30:00
     2016-06-28 15:59:44   t_002_edate     28.06.2016
     2016-06-28 15:59:44   t_002_etime     18:30:00
     2016-06-28 15:59:44   t_002_mode      next
     2016-06-28 15:59:44   t_002_source    Kalender_FHEM
     2016-06-28 15:59:44   t_002_summary   Test
     2016-06-28 15:59:44   t_003_bdate     29.06.2016
     2016-06-28 15:59:44   t_003_btime     12:00:00
     2016-06-28 15:59:44   t_003_edate     29.06.2016
     2016-06-28 15:59:44   t_003_etime     21:00:00
     2016-06-28 15:59:44   t_003_mode      next
     2016-06-28 15:59:44   t_003_source    Kalender_FHEM
     2016-06-28 15:59:44   t_003_summary   Versuch
     2016-06-28 15:59:44   t_004_bdate     30.06.2016
     2016-06-28 15:59:44   t_004_btime     14:30:00
     2016-06-28 15:59:44   t_004_edate     30.06.2016
     2016-06-28 15:59:44   t_004_etime     15:30:00
     2016-06-28 15:59:44   t_004_mode      next
     2016-06-28 15:59:44   t_004_source    Kalender_FHEM
     2016-06-28 15:59:44   t_004_summary   Test
     2016-06-28 15:59:44   t_005_bdate     01.09.2016
     2016-06-28 15:59:44   t_005_btime     00:00:00
     2016-06-28 15:59:44   t_005_edate     02.09.2016
     2016-06-28 15:59:44   t_005_etime     00:00:00
     2016-06-28 15:59:44   t_005_mode      next
     2016-06-28 15:59:44   t_005_source    Kalender_FHEM
     2016-06-28 15:59:44   t_005_summary   Test Sept voll
     2016-06-28 15:59:44   t_006_bdate     12.09.2016
     2016-06-28 15:59:44   t_006_btime     10:00:00
     2016-06-28 15:59:44   t_006_edate     12.09.2016
     2016-06-28 15:59:44   t_006_etime     11:00:00
     2016-06-28 15:59:44   t_006_mode      next
     2016-06-28 15:59:44   t_006_source    Kalender_FHEM
     2016-06-28 15:59:44   t_006_summary   Test Sept
     2016-06-28 15:59:44   today_001_bdate heute
     2016-06-28 15:59:44   today_001_btime 12:00:00
     2016-06-28 15:59:44   today_001_edate 28.06.2016
     2016-06-28 15:59:44   today_001_etime 21:00:00
     2016-06-28 15:59:44   today_001_mode  next
     2016-06-28 15:59:44   today_001_source Kalender_FHEM
     2016-06-28 15:59:44   today_001_summary Versuch
     2016-06-28 15:59:44   today_002_bdate heute
     2016-06-28 15:59:44   today_002_btime 17:30:00
     2016-06-28 15:59:44   today_002_edate 28.06.2016
     2016-06-28 15:59:44   today_002_etime 18:30:00
     2016-06-28 15:59:44   today_002_mode  next
     2016-06-28 15:59:44   today_002_source Kalender_FHEM
     2016-06-28 15:59:44   today_002_summary Test
     2016-06-28 15:59:44   tomorrow_001_bdate morgen
     2016-06-28 15:59:44   tomorrow_001_btime 12:00:00
     2016-06-28 15:59:44   tomorrow_001_edate 29.06.2016
     2016-06-28 15:59:44   tomorrow_001_etime 21:00:00
     2016-06-28 15:59:44   tomorrow_001_mode next
     2016-06-28 15:59:44   tomorrow_001_source Kalender_FHEM
     2016-06-28 15:59:44   tomorrow_001_summary Versuch
Attributes:
   group      Kalender_FHEM
   modes      next
   room       01_Testzimmer

FTUI html:

Code Auswählen Erweitern

<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.2.0
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2016 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * !!!! Evaluation version - run only in a staging enviroment !!!!
     *
     * - create a new folder named 'tablet_eval' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet_eval
     * - add 'define TABLETUIEVAL HTTPSRV ftui_eval ./www/tablet_eval Tablet-EVAL' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet_eval/
     */
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="116">
    <meta name="widget_base_height" content="131">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="gridster_disable" content="1">
    <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="2"> <!-- verbose level 1-6 = output to console;0 = not output -->
    <meta http-equiv="Cache-Control" content="no-store" />

    <link rel="stylesheet" href="lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="lib/font-awesome.min.css" />
    <link rel="stylesheet" href="lib/jquery.toast.min.css" />
    <link rel="stylesheet" href="css/fhem-tablet-ui-wdtimer.css" />
    <link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
    <!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->

    <script src="../pgm2/jquery.min.js"></script>
    <script src="lib/jquery.toast.min.js"></script>
    <script src="lib/jquery.gridster.min.js"></script>
    <script src="js/fhem-tablet-ui.js" defer></script>

    <title>FHEM-Tablet-UI Testseite</title>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="6" data-sizey="4" class="halbTransparent">
<header>Kalender Versuch</header>
<div data-type="calview" data-device="View_Kalender_FHEM" data-get="today" data-max="6" class="cell"></div>
<div data-type="calview" data-device="View_Kalender_FHEM" data-get="tomorrow" data-max="6" class="cell"></div>
<div data-type="calview" data-device="View_Kalender_FHEM" data-get="all" data-max="6" class="cell"></div>
</li>
    </ul>
    </div>
</body>
</html>


[chris1284]

ich honk habe auch mit dem alten head getestet.... ich schaue noch einmal drüber

[chris1284]

so richtig werde ich aus setstates angaben zur umstellung der widgets auch nicht schlau (liegt aber an mangelnden js kenntnissen)

[klausw]

ich honk habe auch mit dem alten head getestet.... ich schaue noch einmal drüber

Schade, hatte gehofft das der Fehler bei mir liegt. 

so richtig werde ich aus setstates angaben zur umstellung der widgets auch nicht schlau (liegt aber an mangelnden js kenntnissen)

Gibt es da eine Beschreibung?

[Mario67]

@klausw: Zur Umstellung von Widgets:
https://forum.fhem.de/index.php/topic,50945.msg425831.html#msg425831
und  https://forum.fhem.de/index.php/topic,50945.msg432122.html#msg432122
sowie die bisher umgestellten Widgets 

[chris1284]

tja und genau das versteh ich nicht ganz

[spacecowboy.21]

ich würde gerne

ganz oben in andere Farbe Einträge für "heute"
Als zweites Einträge für "morgen"

Und dann nach Datum so wie es jetzt auch schon ist.

Wenn für heute oder morgen kein Eintrag vorhanden ist sollte dort dann auch nichts stehen.

Ist dieses möglich ? Hat jemand einen Tipp?

[klausw]

tja und genau das versteh ich nicht ganz

ich habe mich mal bisschen reingefuchst
erster Test:

[chris1284]

zeigt bei mir an und wird beim ändern der readings auch direkt aktualisiert

allerdings zeigt er noch "undefined undefined" wenn die readings anzahl im device < als data-max ist (zb 10 termine und data max  12)

[klausw]

zeigt bei mir an und wird beim ändern der readings auch direkt aktualisiert

allerdings zeigt er noch "undefined undefined" wenn die readings anzahl im device < als data-max ist (zb 10 termine und data max  12)

Mit welcher Version hast du getestet?
data-max auf 12, 6 Termine im CALVIEW zeigt bei mir nur die 6 Termine an.

[klausw]

...
ganz oben in andere Farbe Einträge für "heute"
Als zweites Einträge für "morgen"
...
Wenn für heute oder morgen kein Eintrag vorhanden ist sollte dort dann auch nichts stehen.

anbei neue Version
neue Einstellungen:
data-start      none|notoday|notomorrow   (only for data-get="all" -> dont show Entrys from today or today and tomorrow)
data-color      Text color
data-detail      Array of details that should be shown, default: ["bdate", "btime", "summary", "location"]
data-showempty   show Text for "no Date", default: true

[n4rrOx]

oh sch..., der pull request ist bei mir total verschütt gegangen. Keine Absicht!
Hab's gerade in die 1.* gemerged.
new -> widget_agenda.jsSchön wäre jetzt noch eine Version für die 2.2
[...]

https://github.com/knowthelist/fhem-tablet-ui/pull/131#issuecomment-228151722 

[Micha14]

Ich hänge mich hier gleich mal mit an.
ich habe die Darstellung meiner Kalendertermine unter ftui jetzt auch umgestellt.
Es wurden immer noch alte Termine angezeigt, die ich einfach nicht löschen konnte.
Bei der Fehlersuche bin ich auf dieses schöne widget gestoßen, das die Anzeige wesentlich vereinfacht und auch richtig darstellt.
Vielen Dank für Eure Mühe
Nun zu den Wünschen.
Die Anzeige der Daten erfolgt zentriert.
Ich würde sie gern  in Tabellenform haben, was ich mit left-align versucht habe. der Übersicht halber waren vorher die Datum-Angaben in einer anderen Farbe als die Ereignisse,  geht das?
Die Jahreszahl ist auf dem Tablet und seiner Anzeige weitgehend uninteressant.
Deswegen habe ich versucht, das Datum zu beeinflussen, aber das geht leider nicht.
Meine Gerätedefinition sieht so aus:
  <div data-type="calview"
                    data-device="TerminKalenderView"
                    data-get="today"
                    data-max="6"
                    data-showempty="false"
                    data-color="yellow"
                    class="cell left-align"
                    data-part="(\d\d\.\d\d\.).*">
               </div>
               <div data-type="calview"
                    data-device="TerminKalenderView"
                    data-get="tomorrow"
                    data-max="6"
                    data-showempty="false"
                    data-color="yellow"
                    class="cell left-align"
                    data-part="(\d\d\.\d\d\.).*">
               </div>
               <div data-type="calview"
                    data-device="TerminKalenderView"
                    data-get="all"
                    data-start="notomorrow"
                    data-showempty="false"
                    data-max="6"
                    class="cell left-align"
                    data-part="(\d\d\.\d\d\.).*">
               </div>   
Liebe Grüße:-)

[chris1284]

@klausw: die eval-version von dir läuft so weit. ich werde mal schauen ob ich den code doch nooch verstanden bekomme...

[klausw]

@klausw: die eval-version von dir läuft so weit. ich werde mal schauen ob ich den code doch nooch verstanden bekomme...

ich habe es auch hinbekommen...ist also nicht so schwer

[chris1284]

bin gerade dabei die formatierung zu ändern in col-1-x damit es schön tabelarisch wird und alle unterienadner steht . und du hast recht es ist nicht sooo schwer

[alpha1974]

Hallo chris1284,

wie ist denn der aktuelle Stand des Calview-Widgets für die Eval-Version? Im eval-Tree liegt eine "// Version Chris1284 25-11-2015 18:15 V1.0", die am 20. April eingecheckt wurde.

Kann man irgendwo eine aktuelle Version von Dir finden? Bin über die Suche leider nicht fündig geworden.

Dank und Gruß
alpha1974

[chris1284]

dasa ist die aktuelle für eval

[alpha1974]

Klasse, vielen Dank!

Beim Testen ist mir aufgefallen, dass die Termine in jeder Zeile vertikal unten ausgerichtet sind. Das erschwert etwas die Lesbarkeit, wenn der Summary-Text nicht in eine Zeile passt. Die Summary wird in mehrere Zeilen umgebrochen (so soll es ja auch sein), ABER: Die letzte Zeile der Summary steht dann auf derselben Höhe wie das dazugehörige Datum und die Uhrzeit. Lesbarer fände ich ein Top-Alignment.

Ich habe schon versucht, das Widget dahingehend zu ändern, dass jede Zeile ein vertical-align:top bekommt (analog zu <tr style="font-size:100%;text-align:left;vertical-align:top">).

Leider bin ich dabei kläglich gescheitert. Wie setzt man das im Widget um?

Gruß
alpha1974

[lulatsch66]

Beim Testen ist mir aufgefallen, dass die Termine in jeder Zeile vertikal unten ausgerichtet sind. Das erschwert etwas die Lesbarkeit, wenn der Summary-Text nicht in eine Zeile passt. Die Summary wird in mehrere Zeilen umgebrochen (so soll es ja auch sein), ABER: Die letzte Zeile der Summary steht dann auf derselben Höhe wie das dazugehörige Datum und die Uhrzeit. Lesbarer fände ich ein Top-Alignment.

Ich habe schon versucht, das Widget dahingehend zu ändern, dass jede Zeile ein vertical-align:top bekommt (analog zu <tr style="font-size:100%;text-align:left;vertical-align:top">).

Leider bin ich dabei kläglich gescheitert. Wie setzt man das im Widget um?

1. user css Datei aktivieren:

Code Auswählen Erweitern


    <!-- define your personal style here, it wont be overwritten  -->
    <link rel="stylesheet" href="css/fhem-green-ui.css" />
    <link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />


2. in css/fhem-tablet-ui-user.css z.B.

Code Auswählen Erweitern


.gridster [class*='col-'], section [class*='col-'], .row [class*='col-'] {
    vertical-align: top;
}


Was ich jetzt noch als Problem hatte: die Größe der Spalten im calview widget ist überall "col-1-4". Kann man das vielleicht irgendwie einstellen?

Erstmal so per CSS gelöst - dazu bekommt jedes li Element noch zusätzliche class Einträge, z.B. "calview calview-today", "calview calview-tomorrow" etc, damit man die einzeln ansprechen kann: :

Code Auswählen Erweitern


/* 1. Spalte */
.calview > *:nth-child(4n + 1) {
    width: 18% !important;
}

/* 2. Spalte */
.calview > *:nth-child(4n + 2) {
    width: 18% !important;
}

/* 3. Spalte */
.calview > *:nth-child(4n + 3) {
    width: 39% !important;
}

/* 4. Spalte */
.calview > *:nth-child(4n) {
    width: 24% !important;
    font-size: 22px;
}