Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[tempestas]

Hallo zusammen,

im Rahmen meiner Neugestaltung meiner Visualisierung habe ich meinen ical Calender etwas bearbeitet . Ziel war es, eine einstellbare Anzahl der nächsten Termine anzuzeigen anstatt immer alle Termine innerhalb des im Adapter eingstellten Zeitraums anzuzeigen. Auf die Anzeige selbst lege ich einen unsichtbaren Button, der mir beim Klick dann den umfänglichen Kalender anzeigt.

Als mögliche Erweiterung könnte man sich z.B. überlegen noch eine Warnung einzubauen, falls z.B. die Anzahl Termine HEUTE > angezeigte Termine ist. Das ist aktuell nicht eingebaut, da die Prüfung auch je nach iCal Einstellungen anders sein müsste und bei iCal ohne "Ersetze Datum mit Worten" dies ggf. deutlich aufwendiger wäre (zumindest fällt mir keine einfache Version ein).

Das Skript erstellt zwei States, einmal für den Counter (für Vis, wieviele Termine möchte ich anzeigen) und einmal für den entsprechend gekürzten Text. Letzterer ist dann anlog der normalen iCal Instanz über das Basic Str Unescaped Widget in VIS einzubinden und verhält sich analog der eingestellten iCal Einstellungen (Farben, Ersetze Datum mit Worten).

P.S.: wenn man die Anzahl angezeigter Termine auf 0 reduziert, werden wieder alle angezeigt.

Hier nun das Skript, viel Spaß damit. Freue mich über Rückmeldungen.

! ````
! // ###########################################################################################################
//
// SKRIPT LIEST DIE NÄCHSTEN X TERMINE (VARIABEL EINSTELLBAR) AUS ICAL AUS
//
// ############################################################################################################
! // Skript Einstellungen
! var debug = true;
! // States und ids anlegen
! createState('Termine.Text', "");
createState('Termine.Anzahl', 4);
! var instance = 'javascript.0.';
var idTermine = instance + 'Termine.Text';
var idTermineAnzahl = instance + 'Termine.Anzahl';
var idKalender = "ical.0.data.html";
! // FUNCTION
! function fTermine(){

// *********************        
// Termine auswerten aus html.
// *********************

! var termineCount = getState(idTermineAnzahl).val;
var inhalt = getState("ical.0.data.html"/HTML iCal table/);
var inhaltString = inhalt.val.toString();
var inhaltStringReplace = inhaltString;
var inhaltStringText;
var i_search;
! // Zählen, wie oft ersetzt wurde. Falls weniger ersetzt, als Termine gesucht werden, wird auf diesen Wert reduziert zwecks Abfangen von Fehlern

    var count = inhaltStringReplace.split("").length -1;      // im iCal Adapter ist  ""   zwischen den Terminen einzigartig, daher als Trenner
    var minCount = Math.min(count, termineCount);

    //**************************************************************************************
    // Suchfunktion für Termin-Cutoff
    // Sucht nach dem n-ten definierten Muster und gibt die Fundstelle zurück. 
    // Hinter dieser Fundstelle wird dann der Text gekürzt
    //*****************************************************************************************

!
function nthIndex(str, pat, n){
var L= str.length, i= -1;
while(n-- && i++<l){ i="str.indexOf(pat," i);/if/(i/</0)/break;/}/i_search="i;" */text/kürzen/auf/die/gewählte/anzahl/termine//nthindex(inhaltstringreplace,"</span="">", minCount); // nutzen der Suchfunktion zum Suchen der n-ten Zeichenkette
inhaltStringText = inhaltStringReplace.slice(0,i_search); // dort wird der Text abgeschnitten
for (k =0; k < termineCount; k++) {
}

    // *********************************************************************
    //      Reduzierte Termine in state Schreiben
    // *********************************************************************

    setState(idTermine, inhaltStringText);
    if(debug) log(inhaltStringText);   

}

! // Bei Start
! fTermine();
! // Trigger bei Änderung Anzahl Termine
! on(idTermineAnzahl, function() {
fTermine();
});
! // Trigger bei Änderung Kalender
! on(idKalender, function() {
fTermine();
});</l){>