Beispiele
Individuelles Design in der CalendarWeek
Individuelles Design in der CalendarWeek

In diesem Beitrag zeigen wir euch Schritt für Schritt, wie ihr mithilfe von Layouts und ergänzenden Widgets eine individuell gestaltete Card für die customCalendarWeek
aufbauen könnt.
💡 Ihr lernt dabei nicht nur, wie sich Widgets elegant ineinander verschachteln lassen, sondern erhaltet auch direkt die passenden Beispielcodes aus unserem Setup.
Ob als direkte Vorlage (Tabellennamen, Felder und IDs müsst ihr natürlich auf euer System anpassen) – oder als Inspiration für eure eigenen Designs im typischen arcRiderWidget-Stil: Dieser Guide hilft euch dabei, euren Kalender optisch und funktional aufs nächste Level zu bringen.
Benötigte Widgets
Let’s build together 🚀
Bevor wir loslegen, sorgt bitte dafür, dass eure Ninox-Datenbank die nötigen Tabellen und Felder enthält – entweder nutzt ihr bestehende Strukturen oder erstellt sie neu.
Für das Layout der Card in diesem Use Case verwenden wir folgende Tabellen:
Tabellen | |
---|---|
![]() |
|
Tipp: Für die die Dynamische Auswahl können Hilfs/Settings Tabellen erstellt werden, wo Farb- und Iconwerte hinterlegt und dann in den jeweiligen Widgets aufgerufen werden können.
So sind die Werte zentral und müssen nicht immer wieder manuell eingegeben werden, wenn man sie auch auf anderen Oberflächen in verschiedenen Widgets einsetzen möchte.

Individuelles Design der Card
Widgets übersichtlich integrieren
Das Layout der calenderCard und die einzelnen zu integrierenden Widgets, werden in der Tabelle Termine erstellt, deren Records zum Schluss im customCalendarWeek aufgerufen werden.

Hier erstellen wir für jede Zeile der Card ein fx-Feld mit je einem Layout und fx-Felder für Elemente, wie weitere Layouts, Select, Button. Das bietet gute Übersichtlichkeit beim Coden der Layouts, außerdem können verschiedene Designs schneller ausgetauscht/ersetzt/getestet werden.
Line 1

Schritt 1: Wir beginnen mit den ausgelagerten Elementen für die erste Zeile.
select_status

Verwendete Widgets: customSelect + customLayout
Code:
layout_line1_left

Verwendete Widgets: customLayout + customIcon + customText
Code:
Schritt 2: Dann werden beide Elemente in das Layout für die erste Zeile gesetzt.
calendarCard_line1

Verwendete Widgets: customLayout
Code:
Line 2

Schritt 1: Wir beginnen wieder mit dem ausgelagerten Element für die zweite Zeile.
button_customer

Verwendete Widgets: customButton + customIcon
Code:
Schritt 2: Dann wird das Element in das Layout in die zweite Zeile eingesetzt.
calendarCard_line2

Verwendete Widgets: customLayout + customText
Code:
Line 3

Schritt 1: Die dritte Zeile ist in zwei Layouts aufgeteilt, außerdem brauchen wir ein fx-Feld für die Berechnung der auf 3 Teilnehmer begrenzte Anzeige.
paginatedList_teilnehmer
Code:
layout_buttons

Verwendete Widgets: customLayout + customButton + customIcon
Code:
layout_teilnehmer

Verwendete Widgets: customLayout + customImage
Code:
Schritt 2: Als nächstes werden beide customLayouts in das Layout der dritten Zeile eingesetzt.
calendarCard_line3

Verwendete Widgets: customLayout
Code:
Card Design zusammenfügen
Abschließend können die Zeilen im letzten Layout der calendarCard zusammengefügt werden. Damit die Card bei kürzeren Terminen noch vollständig angeschaut werden kann, denkt dran in den scrollSettings, scrollY: true zu setzen.

Verwendete Widgets: customLayout
Code:
Tipp: Durch die Auslagerung der einzelnen Elemente, könnt ihr super schnell weitere Designs erstellen und andere Ansichten erschaffen. Zum Beispiel die Zeilen tauschen:

Code:
Finish Design
Die fertige Card kann Abschließend im Widget customCalendarWeek eingesetzt werden. Das Layout unserer calendarCard wird bei den timeEntries im Parameter customLayout aufgerufen.
Wichtig! Wenn ihr die Hintergrundfarbe und einen borderRadius im Layout der Card definiert, müsst ihr dran denken, die backgroundColor bei den styles Parameter der timeEntries auf "transparent" sowie padding auf "0px" zu stellen.
Vollständiger Anwendungscode der customCalendarWeek: