FTUI Widget Calview - Versionsgeschichte

Pahenning am 2. August 2024 um 14:36 Uhr

2024-08-02T14:36:55Z

← Nächstältere Version		Version vom 2. August 2024, 16:36 Uhr
Zeile 1:		Zeile 1:
	Das [[{{PAGENAME}}\|Calview Widget]] ist ein Widget für [[FHEM Tablet UI]], welches Einträge aus einem [[CALVIEW]]-Device anzeigen kann.		Das [[{{PAGENAME}}\|Calview Widget]] ist ein Widget für [[FHEM Tablet UI V2]], welches Einträge aus einem [[CALVIEW]]-Device anzeigen kann.

	==Attribute==		==Attribute==
Zeile 343:		Zeile 343:
	Die hier angelegten CSS-Klassen gelten für jeden Kalender; über CSS-Selektoren können natürlich auch für jeden Kalender eigene CSS-Klassen angelegt werden.		Die hier angelegten CSS-Klassen gelten für jeden Kalender; über CSS-Selektoren können natürlich auch für jeden Kalender eigene CSS-Klassen angelegt werden.

	[[Kategorie:FHEM Tablet UI\|Calview]]		[[Kategorie:FHEM Tablet UI V2\|Calview]]

OdfFhem: "Einfärbung von Kalendereinträgen (sourcecolor)" an neuen Modulstand angepasst

2019-05-30T03:35:38Z

"Einfärbung von Kalendereinträgen (sourcecolor)" an neuen Modulstand angepasst

← Nächstältere Version		Version vom 30. Mai 2019, 05:35 Uhr
Zeile 240:		Zeile 240:


	Die gewünschte Darstellung im FTUI erreicht man, indem man ~~die folgenden Bedingungen erfüllt~~		Die gewünschte Darstellung im FTUI erreicht man, indem man das Widget-Attribut '''data-sourcecolor''' verwendet und auf den Wert ''yes'' setzt.
	# das Widget-Attribut '''data-~~detail~~''' ~~muss die (nicht darstellbare) Spalte~~ ''~~sourcecolor~~'' ~~enthalten~~
	~~# das~~ Widget-Attribut '''data-~~sourcecolor~~''' ~~muss den Wert~~ ''~~yes~~'' ~~haben~~		{{Hinweis\|
			*In früheren Widget-Versionen musste zusätzlich im Widget-Attribut '''data-detail''' die Spalte ''sourcecolor'' mit der Breite 0 enthalten sein; dies ist nicht mehr notwendig.}}

	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<div data-type="calview" data-device="TestkalenderView"		<div data-type="calview"
	data-get="all"		data-device="TestkalenderView"
	data-detail='["~~bdate~~","~~summary~~","~~sourcecolor~~"]'		data-get="all"
	data-detailwidth='["20","80","00"]'		data-detail='["weekdayname","bdate","summary"]'
	data-sourcecolor="yes"/>		data-detailwidth='["10","20","70"]'
			data-sourcecolor="yes"></div>
	</syntaxhighlight>		</syntaxhighlight>


	Anzumerken bleibt noch, dass das Widget-Attribut '''data-color''' bei Verwendung von sourcecolor ignoriert wird.		Anzumerken bleibt noch, dass das Widget-Attribut '''data-color''' bei Verwendung von ''sourcecolor'' ignoriert wird. Die '''data-daysleft'''-Attribute allerdings haben Vorrag vor ''sourcecolor'' und führen - je nach daysleft-Konfiguration - zum Überschreiben der sourcecolor.

	===Beispiel unter Verwendung der vorgegebenen CSS-Klassen===		===Beispiel unter Verwendung der vorgegebenen CSS-Klassen===

OdfFhem: Überflüssiges Attribut aus Beispiel entfernt

2019-05-25T05:16:17Z

Überflüssiges Attribut aus Beispiel entfernt

← Nächstältere Version		Version vom 25. Mai 2019, 07:16 Uhr
Zeile 261:		Zeile 261:
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<div data-type="calview" data-device="TestkalenderView"		<div data-type="calview" data-device="TestkalenderView"
	~~data-class=""~~
	data-class-usage="row"		data-class-usage="row"
	data-daysleft-values='[2,9,16]'		data-daysleft-values='[2,9,16]'

OdfFhem: "Beispiel unter Verwendung der vorgegebenen CSS-Klassen" hinzugefügt

2019-05-25T05:14:53Z

"Beispiel unter Verwendung der vorgegebenen CSS-Klassen" hinzugefügt

@@ Zeile 2: / Zeile 2: @@
 ==Attribute==
 {|class="wikitable"
 !Attribut
@@ Zeile 39: / Zeile 43: @@
-;Nahende Termine hervorheben:
+===Nahende Termine hervorheben===
 Optional können nahende Termine optisch hervorgehoben werden; die Aktivierung erfolgt durch das Verwenden von '''data-daysleft-values'''. Die anderen Attribute sind allesamt optional. Fehlt ein optionales Attribut oder enthält leere Einträge, wird der für normale Termine gültige Wert angenommen; andernfalls wird der für normale Termine gültige Wert durch den angegebenen Wert ersetzt.
@@ Zeile 59: / Zeile 63: @@
-;Titelzeile:
+===Titelzeile===
 Optional kann eine zusätzliche Tabellenzeile als Titelzeile dargestellt werden; die Aktivierung erfolgt durch das Verwenden von '''data-header'''. Die anderen Attribute sind allesamt optional.
@@ Zeile 79: / Zeile 83: @@
-;Anwendungsbereich für class-Attribute:
+===Anwendungsbereich für class-Attribute===
 Termine werden jeweils als einzelne Zeile mit der definierten Anzahl von Spalten dargestellt. Angegebene Werte für data-header-class, data-class bzw. data-daysleft-classes können also entweder einmalig einer kompletten Zeile oder aber einzeln jeder Spalte zugewiesen werden. Abhängig hiervon kann sich die Darstellung ändern; beispielsweise blinkt im einen Fall eine ganze Zeile; im anderen Fall nur der Vordergrund.
@@ Zeile 93: / Zeile 97: @@
-;Swiper-Darstellung:
+===Swiper-Darstellung===
 Um z.B. viele Termine im Zugriff zu haben, aber nur wenig Platz zu benötigen, kann die Swiper-Darstellung genutzt werden. Hierbei stellt jeder Termin eine eigene Swiper-Seite dar; zwischen diesen kann manuell oder automatisch gewechselt werden.
@@ Zeile 249: / Zeile 253: @@
 Anzumerken bleibt noch, dass das Widget-Attribut '''data-color''' bei Verwendung von sourcecolor ignoriert wird.
 [[Kategorie:FHEM Tablet UI|Calview]]

OdfFhem: Abschnitt "CSS Klassen" hinzugefügt

2019-05-25T04:16:50Z

Abschnitt "CSS Klassen" hinzugefügt

@@ Zeile 109: / Zeile 109: @@
 |-
 |'''data-swiper-pagination'''||Schnellzugriff unterhalb der Termine einblenden||yes||data-swiper-pagination="no"
 |}

OdfFhem: Anwendungsbereich für class-Attribute

2019-05-25T03:32:18Z

Anwendungsbereich für class-Attribute

@@ Zeile 75: / Zeile 75: @@
 |-
 |'''data-header-background-color'''||Hintergrundfarbe - analog zu data-background-color ; optional||||data-header-background-color="white"
 |}

OdfFhem: Attribute für nahende Termine

2019-05-25T03:11:47Z

Attribute für nahende Termine

← Nächstältere Version		Version vom 25. Mai 2019, 05:11 Uhr
Zeile 35:		Zeile 35:
	\|-		\|-
	\|'''data-sourcecolor'''\|\|Als Textfarbe eines Eintrages die sourcecolor verwenden (s. Beispiel)\|\|no\|\|data-sourcecolor="yes"		\|'''data-sourcecolor'''\|\|Als Textfarbe eines Eintrages die sourcecolor verwenden (s. Beispiel)\|\|no\|\|data-sourcecolor="yes"
			\|}



			;Nahende Termine hervorheben:
			Optional können nahende Termine optisch hervorgehoben werden; die Aktivierung erfolgt durch das Verwenden von '''data-daysleft-values'''. Die anderen Attribute sind allesamt optional. Fehlt ein optionales Attribut oder enthält leere Einträge, wird der für normale Termine gültige Wert angenommen; andernfalls wird der für normale Termine gültige Wert durch den angegebenen Wert ersetzt.

			{\|class="wikitable"
			!Attribut
			!Beschreibung
			!Standard-Wert
			!Beispiel
			\|-
			\|'''data-daysleft-values'''\|\|Array von Tagen bis zum Termin (aufsteigend)\|\|\|\|data-daysleft-values='[1,3,8]'
			\|-
			\|'''data-daysleft-classes'''\|\|Array von CSS-Klasse(n) - analog zu data-daysleft-values ; optional\|\|\|\|data-daysleft-classes='["blink","",""]'
			\|-
			\|'''data-daysleft-colors'''\|\|Array von Textfarben - analog zu data-daysleft-values ; optional\|\|\|\|data-daysleft-colors='["red","yellow","green"]'
			\|-
			\|'''data-daysleft-background-colors'''\|\|Array von Hintergrundfarben - analog zu data-daysleft-values ; optional\|\|\|\|data-daysleft-background-colors='["gray","lightgray","white"]'
	\|}		\|}

Zeile 40:		Zeile 60:

	;Titelzeile:		;Titelzeile:
	Optional kann eine zusätzliche Tabellenzeile als Titelzeile dargestellt werden.		Optional kann eine zusätzliche Tabellenzeile als Titelzeile dargestellt werden; die Aktivierung erfolgt durch das Verwenden von '''data-header'''. Die anderen Attribute sind allesamt optional.

	{\|class="wikitable"		{\|class="wikitable"
Zeile 50:		Zeile 70:
	\|'''data-header'''\|\|Array - analog zu data-detail\|\|\|\|data-header='["am","um","Zusammenfassung"]'		\|'''data-header'''\|\|Array - analog zu data-detail\|\|\|\|data-header='["am","um","Zusammenfassung"]'
	\|-		\|-
	\|'''data-header-class'''\|\|CSS-Klasse(n) - analog zu data-class\|\|\|\|data-header-class="large"		\|'''data-header-class'''\|\|CSS-Klasse(n) - analog zu data-class ; optional\|\|\|\|data-header-class="large"
	\|-		\|-
	\|'''data-header-color'''\|\|Textfarbe - analog zu data-color\|\|\|\|data-header-color="hotpink"		\|'''data-header-color'''\|\|Textfarbe - analog zu data-color ; optional\|\|\|\|data-header-color="hotpink"
	\|-		\|-
	\|'''data-header-background-color'''\|\|Hintergrundfarbe - analog zu data-background-color\|\|\|\|data-header-background-color="white"		\|'''data-header-background-color'''\|\|Hintergrundfarbe - analog zu data-background-color ; optional\|\|\|\|data-header-background-color="white"
	\|}		\|}

OdfFhem: Attribute für Titelzeile ; kleinere Attribut-Anpassungen

2019-05-25T02:23:40Z

Attribute für Titelzeile ; kleinere Attribut-Anpassungen

← Nächstältere Version		Version vom 25. Mai 2019, 04:23 Uhr
Zeile 16:		Zeile 16:
	\|'''data-max'''\|\|Bestimmt, wie viele Termine angezeigt werden\|\|10\|\|data-max="20"		\|'''data-max'''\|\|Bestimmt, wie viele Termine angezeigt werden\|\|10\|\|data-max="20"
	\|-		\|-
	\|'''data-~~color~~'''\|\|~~Textfarbe als HEX~~-~~Angabe oder Farbnamen~~\|\|\|\|data-~~color~~="~~#ff0000~~"		\|'''data-class'''\|\|CSS-Klasse(n); alle im FTUI verfügbaren class-Werte nutzbar\|\|\|\|data-class="left-align small"
	\|-		\|-
	\|'''data-~~class~~'''\|\|~~Formatierung der Anzeige, es lassen sich alle im FTUI verfügbaren class~~-~~Werte einfügen.~~\|\|\|\|data-~~class~~="~~left-align small~~"		\|'''data-color'''\|\|Textfarbe als HEX-Angabe oder Farbname\|\|\|\|data-color="#ff0000"
	\|-		\|-
	\|'''data-~~detail~~'''\|\|~~Array von CALVIEW~~-~~Details, die angezeigt werden sollen~~\|\|~~<nowiki>["bdate", "btime", "summary~~", "~~location", "edate", "etime", "source", "age", "description"]</nowiki>\|\|~~		\|'''data-background-color'''\|\|Hintergrundfarbe als HEX-Angabe oder Farbname\|\|\|\|data-background-color="#0000ff"
	\|-		\|-
	\|'''data-~~detailwidth~~'''\|\|~~Breite der einzelnen Spalten in %~~\|\|\|\|data-~~detailwidth~~='["~~15","25","20~~","20","20"]'		\|'''data-detail'''\|\|Array von CALVIEW-Details, die angezeigt werden sollen\|\|<nowiki></nowiki>\|\|data-detail='["bdate","btime","summary"]'
	\|-		\|-
	\|'''data-~~dateformat~~'''\|\|~~Formatierung~~ der ~~Datumsanzeige ohne Jahreszahl~~\|\|~~long~~\|\|data-~~dateformat~~="~~short~~"		\|'''data-detailwidth'''\|\|Breite der einzelnen Spalten in %\|\|\|\|data-detailwidth='["20","20","60"]'
	\|-		\|-
	\|'''data-~~timeformat~~'''\|\|Formatierung der ~~Uhrzeitanzeige~~ ohne ~~Sekunden~~\|\|long\|\|data-~~timeformat~~="short"		\|'''data-dateformat'''\|\|Formatierung der Datumsanzeige (mit/ohne Jahreszahl)\|\|long\|\|data-dateformat="short"
	\|-		\|-
	\|'''data-showempty'''\|\|~~Zeigt einen Text an~~, wenn keine Termine ~~im angegebenen Zeitraum~~ vorhanden sind\|\|true\|\|data-showempty="~~false~~"		\|'''data-timeformat'''\|\|Formatierung der Uhrzeitanzeige (mit/ohne Sekunden)\|\|long\|\|data-timeformat="short"
			\|-
			\|'''data-showempty'''\|\|Infotext anzeigen, wenn keine Termine vorhanden sind<br>Mögliche Werte: ''true'', ''false'' oder ''individueller Text''\|\|true\|\|data-showempty="Derzeit keine Termine"
	\|-		\|-
	\|'''data-oneline'''\|\|Zu langen Text einer Spalte abschneiden (... wird ans Ende gesetzt) statt umzubrechen\|\|no\|\|data-oneline="yes"		\|'''data-oneline'''\|\|Zu langen Text einer Spalte abschneiden (... wird ans Ende gesetzt) statt umzubrechen\|\|no\|\|data-oneline="yes"
	\|-		\|-
	\|'''data-sourcecolor'''\|\|Als Textfarbe eines Eintrages die sourcecolor verwenden (s. Beispiel)\|\|no\|\|data-sourcecolor="yes"		\|'''data-sourcecolor'''\|\|Als Textfarbe eines Eintrages die sourcecolor verwenden (s. Beispiel)\|\|no\|\|data-sourcecolor="yes"
			\|}



			;Titelzeile:
			Optional kann eine zusätzliche Tabellenzeile als Titelzeile dargestellt werden.

			{\|class="wikitable"
			!Attribut
			!Beschreibung
			!Standard-Wert
			!Beispiel
			\|-
			\|'''data-header'''\|\|Array - analog zu data-detail\|\|\|\|data-header='["am","um","Zusammenfassung"]'
			\|-
			\|'''data-header-class'''\|\|CSS-Klasse(n) - analog zu data-class\|\|\|\|data-header-class="large"
			\|-
			\|'''data-header-color'''\|\|Textfarbe - analog zu data-color\|\|\|\|data-header-color="hotpink"
			\|-
			\|'''data-header-background-color'''\|\|Hintergrundfarbe - analog zu data-background-color\|\|\|\|data-header-background-color="white"
	\|}		\|}

OdfFhem: Attribute für Swiper-Darstellung ergänzt

2019-05-25T01:41:18Z

Attribute für Swiper-Darstellung ergänzt

@@ Zeile 33: / Zeile 33: @@
 |-
 |'''data-sourcecolor'''||Als Textfarbe eines Eintrages die sourcecolor verwenden (s. Beispiel)||no||data-sourcecolor="yes"
 |}

OdfFhem: Nicht (mehr) existierende Attribute aus den Beispielen entfernt

2019-04-29T16:02:09Z

Nicht (mehr) existierende Attribute aus den Beispielen entfernt

← Nächstältere Version		Version vom 29. April 2019, 18:02 Uhr
Zeile 94:		Zeile 94:
	data-detailwidth='["25","70","5"]'		data-detailwidth='["25","70","5"]'
	data-showempty="true"		data-showempty="true"
	~~data-onelinesum="yes"~~
	~~data-sourcecolor="yes"~~
	data-dateformat="short"		data-dateformat="short"
	data-timeformat="short"		data-timeformat="short"
	~~data-dayname="yes"~~
	data-oneline="yes"		data-oneline="yes"
	data-class='left-align'		data-class='left-align'