Custom Calendar (Week)

Mit dem neuen Widget Custom Calendar Week kannst du einen Kalender in beliebige Tabellen deiner Ninox-Datenbank integrieren und individuell mit deinen Daten befüllen. Das Design ist flexibel anpassbar, sodass du das Erscheinungsbild nach deinen Wünschen gestalten kannst. Die einzelnen Kalendereinträge sind frei konfigurierbar und bieten dir maximale Flexibilität.

Zu den praktischen Funktionen gehören:

• Drag & Drop zur einfachen Verwaltung von Terminen

• Darstellung mehrtägiger & ganztägiger Events für eine übersichtliche Planung

• Hervorheben besonderer Tage wie Feiertage oder Urlaubszeiten, um wichtige Tage auf einen Blick zu erkennen

• Einstellung der Zeitachse, sodass du die Anzeige flexibel anpassen kannst – beispielsweise auf eine Sichtbarkeit von nur 8 Stunden statt der vollen 24 Stunden.

• Filtern von Einträgen per Ninox Skript

• Integration von Einträgen aus verschiedenen Ninox Tabellen

• Offline Verfügbarkeit ist gewährleistet

So wird die Organisation deiner Termine in Ninox effizient und benutzerfreundlich gestaltet.

Anwendungscode

let current := this;
let filterPerson := 'Filter Person';
arcCustomCalendarWeek({
		uniqueId: "cal-39",
		embedded: false,
		weekdaySettings: {
			week: Week,
			year: Year
		},
		weekStart: 1,
		timeZoneBalance: -1,
		timeSettings: {
			timeStart: time(6, 30),
			duration: time(15, 30)
		},
		currentTime: "rgba(0,0,255,0.5)",
		dayHighlights: [{
				date: today(),
				color: "rgba(0,255,0,0.1)"
			}, {
				weekday: 6,
				color: "rgba(255,0,0,0.1)"
			}, {
				weekday: 7,
				color: "rgba(255,0,0,0.1)"
			}],
		lang: clientLang(),
		timeSlotWidth: if width then width + "px" else "250px" end,
		timeSlotHeight: "80px",
		styles: {
			backgroundColor: "rgba(0,0,255,0.01)"
		},
		timeEntries: (select 'Time Entries'
			where if filterPerson then
				Person = filterPerson
			else
				true
			end).[{
                title: Kalendertitel,
				subtitle: Description,
				value: "",
                customLayout: if current.showWidget = true then
					arcCustomLayout({
							uniqueId: Nr,
							embedded: true,
							fullscreen: false,
							direction: "vertical",
							alignX: "center",
							alignY: "center",
							width: "",
							height: "",
							gap: "5px",
							backgroundColor: "",
							paddingY: "",
							paddingX: "",
							blocks: [{
									width: "",
									height: "auto",
									lineHeight: "",
									alignX: "left",
									color: "",
									styles: "",
									value: Description
								}, {
									width: "",
									height: "auto",
									lineHeight: "",
									alignX: "left",
									color: "",
									value: text('Date From')
								}]
						})
				end,
				dateFrom: 'Date From',
				dateTo: 'Date To',
				timeFrom: 'Time From',
				timeTo: 'Time To',
				styles: {
					backgroundColor: color(Person),
					color: "#fff",
					borderRadius: "8px"
                    padding: "5px"
				},
				dragAction: {
					recordId: Nr,
					dateFrom: "A",
					timeFrom: "B",
					dateTo: "C",
					timeTo: "D"
				},
				clickAction: {
					type: "popup",
					recordId: Nr
				}
			}]
	})

Allgemeine Settings

weekdaySettings

Mir den wekkdaySettings legst du fest, welche Kalenderwoche eines bestimmten Jahres angezeigt werden soll.

		weekdaySettings: {
			week: Week, // Kannst du mt einem Ninox-Hilfsfeld (Zahl) festlegen
			year: Year // Kannst du mt einem Ninox-Hilfsfeld (Zahl) festlegen
		},

weekStart

weekStart bestimmt an welchem Wochentag dein Kalender beginnt. In den USA beispielsweise bei 0 (gleichzusetzen mit Sonntag). Gängig ist 1 (für Montag).

weekStart: 1,

timeZoneBalance

timeZoneBalance gleicht die Zeitzone aus. Für Deutschland solltest du -1 einstellen, da Ninox andere Zeitzonen Standards verwendet.

timeZoneBalance: -1,

timeSettings

In den timeSettings legst du fest, wie du deine Zeitachse definieren möchtest. Du musst beispielsweise nicht immer 24 Stunden anzeigen. Du kannst also festlegen, dass dein Tag auch erst um 6 Uhr starten soll und nur bis 22 Uhr angezeigt wird. Es können nur volle Stunden ausgegeben werden. Gibst du also 06:30 Uhr als Startzeit an, rundet das System auf 06:00 Uhr ab.

timeSettings: {
		timeStart: time(6, 30), // Zeitfeld oder Milisekunden
		duration: time(15, 30) // Dauer des Tages als Zeitfeld oder in Millisekunden
		},

currentTime

Mit einem schmalen Balken wird dir die aktuelle Uhrzeit angezeigt. currentTime definiert die Farbe des Balkens.

currentTime: "rgba(0,0,255,0.5)", // RGB Codes 
currentTime: "#f95757" // HEX Codes

dayHighlights

Du kannst bei den dayHighlights definieren, welche Tage farblich hervorgehoben werden sollen. Dabei kannst du unterscheiden zwischen konkreten Daten oder Wochentagen.

dayHighlights: [{
				date: today(),
				color: "rgba(0,255,0,0.1)"
			}, {
				weekday: 6,
				color: "rgba(255,0,0,0.1)"
			}, {
				weekday: 7,
				color: "rgba(255,0,0,0.1)"
			}],

lang

Diese Funktion wird standardmäßig eingestellt und muss nicht angepasst werden.

lang: clientLang(),

timeSlotWidth

Mit timeSlotWidth stellst du die Breite deiner Wochentage ein.

timeSlotWidth: if width then width + "px" else "250px" end,

timeSlotHeight

Mit timeSlotHeigt stellst du die Höhe der Zeilen für die Uhrzeiten ein.

timeSlotHeight: "80px",

styles

Mit styles kannst du individuelle Einstellungen wie die Hintergrundfarbe des gesamten Kalenders einstellen. Zum Beispiel für Dark Mode.

	styles: {
			backgroundColor: "rgba(0,0,255,0.01)"
		},

timeEntries

In den timeEntries legst du fest, auf welche Ninox-Tabelle (Zeiteinträge) du dich beziehen möchtest. Alle weiteren Parameter beziehen sich auf die konkreten Zeiteinträge.

title

Der Titel kann entweder selbstgewählt werden und wird in der ersten Zeile des Zeiteintrages ausgegeben. Oder du lässt den Titel mit "" stehen und es wird die Uhrzeit des Zeiteintrages angezeigt.

title: "", // Default: Gibt die Uhrzeit des Kalendereintrages an
title: Kalendertitel, // Ninox Feld 

subtitle

Der subtitle ist die Beschreibung unter dem Titel. Hier kannst du Beispielsweise den Grund des Zeiteintrages hinterlegen.

subtitle: Description, // Ninox Feld 
subtitle: "Urlaub" // Textfeld

value

Der value ist sozusagen die dritte Zeile deines Zeiteintrages. Hier kannst du mit Layouts oder anderen Widgets ganz individuelle Dinge anzeigen, die deine Zeiteinträge betreffen.

value: "",

customLayout

Bei dem neuen Parameter customLayout: kann nun ein eigenes Layout für den timeEntry hinterlegt werden. Ist hier etwas eingetragen, werden title, subtitle, value damit ersetzt bzw. nicht ausgegeben.

customLayout: "",

dateFrom, dateTo, timeFrom, timeTo

Mit den folgenden Parametern liest du die Daten je Zeiteintrag aus. Hier müssen echte Datums- & Zeitfelder von Ninox angegeben werden.

⚠️ Wichtig: Wenn einer der Datumsparameter nicht ausgefüllt ist, wird automatisch der Tag des anderen Datumsfeldes genommen. Fehlen beide Datumsparameter, wird der Eintrag komplett ausgeblendet. Bei fehlender Uhrzeit wird die Uhrzeit des anderen Zeit-Parameters genommen und -5 /+5 Minuten gerechnet, um eine minimale Darstellung zu gewährleisten.

dateFrom: 'Date From',
dateTo: 'Date To',
timeFrom: 'Time From',
timeTo: 'Time To',

styles

Mit styles legst du die Farben und den borderRadius deines Zeiteintrages fest.

styles: {
					backgroundColor: color(Person),
					color: "#fff",
					borderRadius: "8px",
                    padding: ""
				},

dragAction

In der dragAction wird festgelegt, welche Datums- und Zeitfelder beim Ziehen oder Verschieben der Einträge auf der Kalenderoberfläche mit den neuen Daten aktualisiert werden.

⚠️ Wichtig: Diese Angaben sind zwingend erforderlich, damit Zeiteinträge per Dragging verändert werden können.

dragAction: {
					recordId: Nr, // 
					dateFrom: "A", // fieldId aus dem Record
					timeFrom: "B", // fieldId aus dem Record
					dateTo: "C", // fieldId aus dem Record
					timeTo: "D" // fieldId aus dem Record
				},

clickAction

Mit der clickAction ermöglichst du, dass der User auf den Zeiteintrag klicken kann und sich der Ninox Record öffnet.

clickAction: {
					type: "popup",
					recordId: Nr
				}