Hallo,
da ich derzeit über den Kalender in der smartVISU hauptsächlich die Mülltermine anzeige, aber das 'lange' Anzeigeformat schon immer als störend empfunden habe, habe ich eben mal 'quick & dirty' eine alternative Anzeige programmiert:
muell.png
Der Code ist sicher nicht schön, aber funktional (jQuery und ich sind immer noch keine Freunde).
Wer es verwenden möchte:
UND (grins, den kann ich mir nicht verkneifen): Der Code muss sicher erweitert werden, wenn das hier durchsetzt.
/tom
Edit 05.01.2017: .zip-Attachment für widgets/muell.html gelöscht, Code des Widgets nach letztem Bearbeitungsstand wie folgt:
da ich derzeit über den Kalender in der smartVISU hauptsächlich die Mülltermine anzeige, aber das 'lange' Anzeigeformat schon immer als störend empfunden habe, habe ich eben mal 'quick & dirty' eine alternative Anzeige programmiert:
muell.png
Der Code ist sicher nicht schön, aber funktional (jQuery und ich sind immer noch keine Freunde).
Wer es verwenden möchte:
- muell.html entweder im Deinem Pages-Verzeichnis oder unter Widgets erstellen, Code siehe unten.
- Aufruf wie folgt:
Code:{% import "muell.html" as muell %} {{ muell.list('muelltermine', 'Mülltermine', 50, 5, 3) }} - Parameter (Nr. 2 bis 5 können auch weggelassen werden, dann wird der Standard genommen):
1/ Eindeutige ID
2/ Überschrift ("")
3/ Anzahl der insgesamt aus dem Kalender zu lesenden Termine (50)
4/ Anzahl der anzuzeigenden Mülltermine (5)
5/ Refresh-Intervall (1h) - Es werden genau die Termine gelistet, die im Kalender die folgenden Titel/Namen haben: Gelbe Tonne, Braune Tonne, Grüne Tonne, Blaue Tonne, Schwarze Tonne.
- Herausfinden, ob/wie statt einer festen Anzahl von Terminen ein bestimmter Zeitraum ausgelesen werden kann (z.B.: Hole die nächsten zwei Wochen statt der nächsten 50 Termine). Das calendar-Plugin scheint immerhin standardmäßig die nächsten 4 Wochen zu holen, egal wie viele Termine angegeben werden.
- Mit den Limitierungen des calendar-Plugins beschäftigen:
- scheinbar keine Übertragung des Kalendernamens eines Termins
(über Kalendernamen könnte man anzuzeigende Termine ein-/ausschließen),
- scheinbar keine Übertragung der am Termin hängenden Kategorien
(könnte ebenfalls zum Filtern von Terminen benutzt werden).
UND (grins, den kann ich mir nicht verkneifen): Der Code muss sicher erweitert werden, wenn das hier durchsetzt.
/tom
Edit 05.01.2017: .zip-Attachment für widgets/muell.html gelöscht, Code des Widgets nach letztem Bearbeitungsstand wie folgt:
HTML-Code:
/**
* -----------------------------------------------------------------------------
* @package smartVISU
* @author Martin Gleiß
* @copyright 2012 - 2015
* @modifier (2016) Tom Bombadil of KNX User Forum, aka René Jahncke
* @license GPL [http://www.gnu.de]
* -----------------------------------------------------------------------------
*/
/**
* Displays a tiny trash list
*
* @param unique id for this widget
* @param a title to display
* @param the number of calendar-entries to parse, default 100
* @param the number of displayed columns, default 5
* @param the refresh interval for this widget (using relative time format), default 1h
*/
{% macro list(id, title, count, cols, repeat) %}
{% set uid = uid(page, id) %}
<div id="{{ uid }}" data-widget="calendar.list" class="calendarlist" data-repeat="{{ repeat|default('1h') }}">
{% if title %} <h2>{{ title }}</h2> {% endif %}
<ul data-role="listview" style='width:100%;align:center;overflow:hidden;'>
</ul>
</div>
<script type="text/javascript">
$('#{{ page }}').on('pagecreate', function (event, ui) {
$('#{{ uid }}').on( {
'init' : function (event) {
var uid = this.id;
var heute = new Date();
var morgen = new Date(heute.getTime()+(1000 * 60 * 60 * 24 * 1));
var spalte = 0;
var muell_html = "<table class ='ui-btn-up-a' style='width:100%;text-align:center;overflow:hidden;'><tr>";
var heute_tag = heute.getDate();
if (heute_tag < 10) heute_tag = "0" + heute_tag;
var heute_monat = heute.getMonth() + 1;
if (heute_monat < 10) heute_monat = "0" + heute_monat;
heute = heute_tag + '.' + heute_monat + '.';
var morgen_tag = morgen.getDate();
if (morgen_tag < 10) morgen_tag = "0" + morgen_tag;
var morgen_monat = morgen.getMonth() + 1;
if (morgen_monat < 10) morgen_monat = "0" + morgen_monat;
morgen = morgen_tag + '.' + morgen_monat + '.';
$.getJSON('lib/calendar/service/{{ config_calendar_service }}.php?url={{ config_calendar_url|url_encode() }}&count={{ count|default(25) }}', function (data) {
for (var i in data) {
if (spalte === {{ cols|default(5) }}) break;
switch (data[i].title) {
case 'Gelbe Tonne': data[i].color='#FFFF00'; break;
case 'Blaue Tonne': data[i].color='#0000FF'; break;
case 'Schwarze Tonne': data[i].color='#000000'; break;
case 'Braune Tonne': data[i].color='#993300'; break;
case 'Grüne Tonne': data[i].color='#008000'; break;
default: data[i].color='#FF0000';
}
if (data[i].color != '#FF0000') {
data[i].weekday = data[i].weekday.substring(0,2);
data[i].date = data[i].period.substring(0,6);
muell_html += "<td";
if (data[i].date == heute) muell_html += " style='border-bottom: red 10px inset; overflow: hidden;'";
if (data[i].date == morgen) muell_html += " style='border-bottom: orange 10px inset; overflow: hidden;'";
muell_html += "><svg xmlns='http://www.w3.org/2000/svg' viewBox='260 100 250 220' width='64px' height='64px'><g><path d='m316 129l124-12 0 26 -124 5Z' fill='" + data[i].color + "'/>"
muell_html += "<path d='m329 242l14 0c30-10 70 18 47 50l0 8 31 0 7-147 -99 0' fill='" + data[i].color + "'/>"
muell_html += "<ellipse cx='356' cy='275' rx='28' ry='26' style='stroke-width:0.5;stroke:#333;fill:" + data[i].color + "'/></g></svg>"
muell_html += "<div class='ui-li-heading'>" + data[i].weekday + ' ' + data[i].date + '</div></td>';
spalte += 1;
}
}
muell_html += '</tr></table>';
$('#' + uid + ' ul').html(muell_html).trigger('prepare').listview('refresh').trigger('redraw');
})
.error(notify.json);
},
'repeat': function(event) {
$('#{{ uid }}').trigger('init');
}
});
});
</script>
{% endmacro %}
Kommentar