Suche

arcRider Website

Support

Discord

Suche

arcRider Website

Support

Discord

Widgets

Custom Calendar (Week)

1.3.0

1.3.0

Widget bestellen

Custom Calendar (Week)

Mit dem Widget Custom Calendar Week bringst du eine leistungsstarke Kalenderansicht direkt in deine Ninox-Datenbank. Du kannst es nahtlos in beliebige Tabellen integrieren, flexibel gestalten und dynamisch mit deinen eigenen Daten befüllen. Ob Projektplanung, Ressourcenmanagement oder Terminübersicht – das Widget passt sich deinen Anforderungen an.

💡 Was du mit Custom Calendar machen kannst:

  • Individuelles Design: Passe Farben, Icons und Layout an deinen Stil oder dein Branding an.

  • Flexible Einträge: Gestalte die Darstellung deiner Termine, Aufgaben oder Ereignisse exakt so, wie du sie brauchst – mit beliebigen Feldern, Icons oder Tags.

  • Mehrtägige & ganztägige Events: Plane übersichtlich und erkenne längere Zeiträume auf einen Blick.

  • Drag & Drop: Verschiebe Termine direkt im Kalender – intuitiv und ohne Umwege.

  • Dynamische Filterung: Zeige nur relevante Einträge an – per Ninox-Skript steuerbar.

  • Hervorhebung besonderer Tage: Markiere Feiertage, Urlaub, Abwesenheiten oder individuelle Events.

  • Anpassbare Zeitachse: Zeige nur die Stunden, die für deinen Anwendungsfall wichtig sind – z. B. 8–18 Uhr statt 0–24.

  • Integration aus mehreren Tabellen: Verknüpfe Daten aus verschiedenen Quellen – ideal für verteilte Teams oder Projekte.

  • Offline-fähig: Auch ohne Internet bleibt dein Kalender nutzbar.

📅 Custom Calendar Week macht deine Terminplanung in Ninox übersichtlicher, interaktiver und deutlich effizienter – perfekt für alle, die mehr aus ihrer Datenbank herausholen wollen.

Anwendungscode

let current := this;
let filterPerson := 'Filter Person';
arcCustomCalendarWeek({
		uniqueId: "cal-39",
		embedded: false,
        weekdaySettings: {
            week: 12,
            year:2024
        },
        weekStart: "",
		dateSettings: {
			startDate: date(2025, 2, 2),
			endDate: "",
			duration: 7,
			highlights: [{
					date: date(2025, 2, 7),
					color: 'Color Highlights'
				}, {
					weekday: 6,
					color: "rgba(255,0,0,0.1)"
				}, {
					weekday: 7,
					color: "rgba(255,0,0,0.1)"
				}]
		},
		timeZoneBalance: -1,
		timeSettings: {
			timeStart: time(6, 30),
			duration: 8
		},
		currentTime: "rgba(0,0,255,0.5)",
		lang: clientLang(),
		timeSlotWidth: if width then width + "px" else "250px" end,
		timeSlotHeight: "80px",
        allDayHeight: "",
		styles: {
			backgroundColor: "rgba(0,0,255,0.01)"
		},
        createNew: {
			tableId: "B",
			dateFrom: "A",
			timeFrom: "B",
			dateTo: "C",
			timeTo: "D"
		},
		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– gezielte Steuerung der Kalenderwoche

Mit dem Parameter weekdaySettings kannst du genau festlegen, welche Kalenderwoche aus welchem Jahr im Kalender angezeigt werden soll.

 weekdaySettings: {
            week: 12,
            year:2024
        },

In diesem Beispiel wird die 12. Kalenderwoche des Jahres 2025 angezeigt.

Statt feste Werte einzutragen, kannst du auch auf Ninox-Felder verweisen, um die Daten zu dynamisieren.

⚠️ Wichtig: Wenn sowohl dateSettings als auch weekdaySettings gesetzt sind, haben dateSettings Vorrang und überschreiben die Angaben aus weekdaySettings.

dateSettings– Start, Dauer & Hervorhebung in der Wochenansicht

Mit der Parametergruppe dateSettings steuerst du, wann dein Kalender beginnt, wie lange er angezeigt wird und welche Tage besonders hervorgehoben werden sollen.

🔧 Einzelne Parameter in dateSettings:

  • startDate (Pflichtfeld)
    Definiert das Startdatum des Kalenders. Gib hier ein Datumsfeld an.
    → Kann dynamisch über Ninox-Felder gesteuert werden.

  • endDate (optional)
    Gibt das Enddatum des Kalenders an. Gib hier ein Datumsfeld an.
    → Hat Vorrang vor duration.

  • duration (optional)
    Bestimmt die Anzahl der anzuzeigenden Tage (Standard: 7).
    → Wird nur berücksichtigt, wenn endDate nicht gesetzt ist.

🔁 Logik der Anzeige-Dauer:

  • Nur startDate gesetzt → zeigt 7 Tage ab Startdatum

  • startDate + duration → zeigt die definierte Anzahl an Tagen

  • startDate + endDate → duration wird ignoriert

  • highlights (optional)
    Erlaubt das farbliche Hervorheben bestimmter Tage – ideal für Urlaube, Feiertage oder andere besondere Anlässe.
    → Du kannst sowohl konkrete Daten als auch Wochentage markieren (Details siehe unten).

dateSettings: {
	startDate: "",
	endDate: "",
    duration: 14,
	highlights: [{
			date: date(2024, 10, 31),
			color: 'Color Highlights'
		}, {
			weekday: 6,
			color: "rgba(255,0,0,0.1)"
		}, {
			weekday: 7,
			color: "rgba(255,0,0,0.1)"
		}]
}

🗓️ weekStart – Starttag der Kalenderwoche festlegen

Mit dem Parameter weekStart bestimmst du, an welchem Wochentag dein Kalender beginnen soll.

📌 Typ: Zahl (0–6)
📅 Werte:

  • 0 = Sonntag (z. B. in den USA üblich)

  • 1 = Montag (Standard in Mitteleuropa)

  • 2 = Dienstag

  • ...

  • 6 = Samstag

💡 Tipp: Für die meisten Nutzer im deutschsprachigen Raum ist 1 (Montag) die passende Wahl.

weekStart: 1,

timeZoneBalance – Zeitzonenkorrektur für präzise Anzeige

Der Parameter timeZoneBalance hilft dir dabei, Zeitzonenunterschiede auszugleichen, die durch die Darstellung in Ninox entstehen können.

🕒 Hintergrund:
Ninox verwendet intern eine andere Zeitzonen-Logik, was zu einer Verschiebung der Zeiten im Kalender führen kann.

🇩🇪 Empfehlung für Deutschland:
Setze den Wert auf -1, um die Anzeige an die mitteleuropäische Zeit (MEZ/MESZ) anzupassen.

📌 Typ: Zahl (in Stunden)

timeZoneBalance: -1,

⏰ timeSettings – individuelle Steuerung der Zeitachse

Mit der Parametergruppe timeSettings kannst du festlegen, welcher Zeitraum pro Tag im Kalender angezeigt werden soll. So lässt sich die Kalenderansicht besser an deinen Anwendungsfall anpassen – z. B. für typische Bürozeiten oder Schichtmodelle.

timeSettings: {
		timeStart: time(6, 30), // Zeitfeld oder Milisekunden
		duration: time(6, 30), // Duration in Milisekunden angeben. hier: 8 Stunden 
		},

📅 In diesem Beispiel startet der Kalender-Tag um 06:00 Uhr und endet um 22:00 Uhr.

🧠 Wichtig zu wissen:

  • Es werden nur volle Stunden unterstützt.

  • Gibt man z. B. 6.5 (für 06:30 Uhr) an, rundet das System auf 06:00 Uhr ab.

  • Der Standardbereich ohne eigene Konfiguration ist 0–24 Uhr (also ein kompletter Tag).

💡 Tipp:
Weniger sichtbare Stunden = kompaktere Darstellung = bessere Übersicht bei vielen Einträgen.

🕐 currentTime – farbliche Markierung der aktuellen Uhrzeit

Der Parameter currentTime steuert die Darstellung eines schmalen Balkens, der dir die aktuelle Uhrzeit im Kalender anzeigt – ähnlich wie in bekannten Kalender-Apps.

🎨 Funktion:
Mit diesem Parameter legst du die Farbe des Balkens fest, der die aktuelle Position im Tagesverlauf markiert.

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

lang

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

lang: clientLang(),

📏 timeSlotWidth – Breite der einzelnen Wochentage

Mit dem Parameter timeSlotWidth legst du fest, wie breit die einzelnen Tages-Spalten im Wochenkalender dargestellt werden.

Beispiel: 

timeSlotWidth:  "250px" ,

→ Jeder Wochentag wird mit 250 Pixeln Breite angezeigt.

📌 Hinweis:

  • Der Standardwert liegt bei ca. 100 px, kann aber je nach Layout-Anforderungen angepasst werden.

  • Eine höhere Zahl sorgt für mehr Platz pro Tag, besonders hilfreich bei vielen Einträgen.


📐 timeSlotHeight – Höhe der Stundenzeilen festlegen

Mit dem Parameter timeSlotHeight bestimmst du, wie hoch jede einzelne Stunde im Kalender dargestellt wird.

🔧 Beispiel:

timeSlotHeight: "80px",

→ Jede Stunde erhält eine Höhe von 50 Pixeln in der vertikalen Zeitachse.

📌 Hinweis:

  • Der Standardwert liegt bei etwa 40 px.

  • Ein höherer Wert sorgt für mehr Raum pro Stunde.

🧭 allDayHeight – Höhe der Zeile für Ganztagseinträge

Mit dem Parameter allDayHeight legst du fest, wie hoch die obere Zeile für Ganztagseinträge dargestellt wird.

🔧 Beispiel:

allDayHeight: "80px",

→ Die Zeile für Ganztagseinträge wird mit 60 Pixeln Höhe angezeigt.

📌 Hinweis:

  • Standardmäßig liegt die Höhe bei ca. 40 px.

  • Ein höherer Wert schafft mehr Platz für mehrere Ganztagseinträge oder größere Textdarstellungen.

🎨 styles – individuelles Styling für deinen Kalender

Mit styles kannst du das Aussehen deines Kalenders anpassen – hier kannst du aktuell die Hintergrundfarbe deines Kalenders individualisieren.

🔧 Beispiel:

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

➕ createNew – neue Termine durch Ziehen erstellen

Mit dem Parameter createNew aktivierst du die Möglichkeit, neue Termine direkt durch Aufziehen eines Zeitbereichs im Kalender zu erstellen.

🖱️ So funktioniert’s:

  • Du klickst in einen freien Bereich des Kalenders, ziehst mit gedrückter Maustaste, und lässt wieder los.

  • Dabei wird automatisch ein neuer Termin erstellt – inklusive Startzeit und Dauer.

📌 Hinweis:

  • Alle Feldbezüge (dateFrom, dateTo, timeFrom, timeTo) müssen mit den Field IDs der entsprechenden Felder aus deiner Kalendereintrags-Tabelle (tableId) übereinstimmen.

  • Du kannst die Field IDs ganz einfach mit der Ninox-Funktion fieldId() herausfinden und direkt in die Konfiguration übernehmen.

createNew: {
			tableId: "B",
			dateFrom: "A",
			timeFrom: "B",
			dateTo: "C",
			timeTo: "D"
		},

💡 Tipp: Ideal für eine schnelle und intuitive Terminplanung – z. B. bei Schichten, Buchungen oder Raumvergabe.

📅 timeEntries – deine Kalendereinträge im Detail

Der timeEntries-Block legt fest, welche konkreten Zeiteinträge im Kalender angezeigt werden.

Hier bestimmst du, wie jeder einzelne Eintrag dargestellt wird – von Titel über Farbe bis hin zu eigenen Layouts. So kannst du deine Kalenderkarten ganz individuell gestalten und an deinen Anwendungsfall anpassen.

➡️ Die dafür nötigen Parameter findest du im folgenden Abschnitt.

🏷️ title – Titel des Kalendereintrags

Mit dem Parameter title legst du fest, was in der ersten Zeile des Kalendereintrags angezeigt wird.

🔧 Zwei Optionen:

  1. Eigener Titel:
    Gib ein Feld oder einen Text an, der als Titel im Eintrag angezeigt werden soll.

  2. Keine Angabe (""):
    Lässt du das Feld leer (""), wird stattdessen die Uhrzeit des Termins angezeigt.

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

📌 Hinweis:

  • Wenn du keinen Titel vergibst und stattdessen die Uhrzeit angezeigt wird, wird diese Uhrzeit bei Änderungen live aktualisiert, z. B. beim Ziehen oder Verlängern eines Eintrags.

📝 subtitle – Beschreibung unter dem Titel

Mit dem Parameter subtitle kannst du eine zusätzliche Zeile unter dem Titel im Kalendereintrag anzeigen lassen.

Typischerweise wird hier eine kurze Beschreibung oder ein ergänzender Hinweis wie z. B. der Grund des Termins oder ein Status hinterlegt.

🔧 Beispiel:

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

→ Zeigt z. B. den Inhalt des Feldes „Description“ unter dem Titel im Kalendereintrag an.

📌 Hinweis:

  • Der subtitle ist optional und wird nur angezeigt, wenn ein entsprechender Feldwert vorhanden ist.

  • Du kannst diesen Parameter auch einfach auslassen und dann wird die Zeile nicht dargestellt

➕ value – Zusatzinformationen oder interaktive Felder

Der Parameter value steht für die dritte Zeile deines Kalendereintrags. Hier kannst du weitere Informationen anzeigen oder sogar interaktive Elemente wie Eingabefelder oder Auswahllisten integrieren.

🔧 Einsatzmöglichkeiten:

  • Zusätzliche Informationen wie z. B. Ort, Status, Verantwortlicher

  • Interaktive Widgets direkt im Kalendereintrag – z. B.:

    • Ein Select-Feld, um den zuständigen Mitarbeiter auszuwählen

    • Ein Input-Feld für kurze Notizen oder Rückmeldungen

value: "",
value: Kommentar,

→ Zeigt den Inhalt des Feldes „Kommentar“ in der dritten Zeile an.

📌 Hinweis:

  • value ist optional, erweitert aber die Darstellung deiner Einträge um eine zusätzliche Ebene.

  • In Verbindung mit eingebetteten Widgets entsteht ein interaktives Kalendererlebnis direkt im Eintrag.

💡 Tipp:
Nutze value, um wichtige Zusatzinfos sofort sichtbar zu machen – oder um deine Nutzer direkt im Kalender arbeiten zu lassen.

🎨 customLayout – vollständiges individuelles Layout für Kalendereinträge

Mit dem Parameter customLayout kannst du ein komplett eigenes Layout für deine Kalendereinträge definieren.

Wenn du diesen Parameter nutzt, werden die Standardfelder title, subtitle und value nicht mehr angezeigt. Stattdessen kannst du frei gestalten, wie dein Kalendereintrag aussieht – mit beliebigen Widgets.

🔧 Beispiel:

customLayout: "",

💡 Tipp:
Nutze customLayout, wenn du eine komplett individuelle Darstellung brauchst, z. B. mit eigenen Farben, Icons, Struktur oder logischen Bedingungen.

⏳ dateFrom, dateTo, timeFrom, timeTo – Start- und Endzeit je Eintrag

Mit diesen vier Parametern gibst du an, welche Felder aus deinem Zeiteintrags-Datensatz für Datum und Uhrzeit verwendet werden sollen.

🔧 Beispiel:

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

📌 Hinweis:

  • Es müssen echte Datums- und Zeitfelder aus Ninox angegeben werden.

  • Die Kombination aus Datum + Uhrzeit bestimmt die Position und Länge des Kalendereintrags.

⚠️ Wichtig zu wissen:

  • Fehlt dateTo, wird automatisch der Tag aus dateFrom verwendet (und umgekehrt).

  • Fehlen beide Datumsfelder, wird der Eintrag nicht angezeigt.

  • Fehlt timeTo, wird automatisch timeFrom + 5 Minuten verwendet.

  • Fehlt timeFrom, wird timeTo - 5 Minuten angenommen.
    → So ist eine minimale Anzeige trotzdem möglich.

💡 Tipp:
Wenn du nur Tages-Einträge ohne genaue Uhrzeiten darstellen willst, kannst du auch nur mit Datumsfeldern arbeiten – der Kalender stellt den Eintrag dann als Ganztagstermin dar.

🎨 styles – individuelles Styling für Kalendereinträge

Mit dem Parameter styles kannst du das Aussehen einzelner Kalendereinträge anpassen – z. B. Farben, Innenabstand (Padding) oder abgerundete Ecken (Border-Radius).

🔧 Beispiel:

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

📌 Unterstützte Eigenschaften:

  • backgroundColor: Hintergrundfarbe der Karte

  • color: Schriftfarbe

  • padding: Innenabstand (z. B. "6px")

  • borderRadius: Abrundung der Ecken (z. B. "8px")

💡 Tipp:
Mit styles kannst du deine Einträge visuell voneinander abheben, etwa nach Status, Typ oder Priorität – auch dynamisch, wenn du Felder deiner Datenquelle als Wert verwendest.

🖱️ dragAction – Felder für das Verschieben von Einträgen festlegen

Mit dem Parameter dragAction definierst du, welche Datums- und Zeitfelder beim Ziehen oder Verschieben eines Eintrags aktualisiert werden sollen.

So wird sichergestellt, dass der neue Zeitpunkt im Datensatz gespeichert wird, wenn ein Eintrag im Kalender bewegt wird.

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
				},

📌 Hinweis:

  • Gib hier die korrekten Feld-IDs der einzelnen Felder in der Zeiteintrags-Tabelle an.

  • Du kannst hier die Ninox Funktion fieldId() benutzen.

⚠️ Wichtig:

Diese Angaben sind zwingend erforderlich, wenn du möchtest, dass Einträge per Drag & Drop verschoben oder in ihrer Dauer verändert werden können.

👆 clickAction – Einträge per Klick in Ninox öffnen

Mit dem Parameter clickAction ermöglichst du es, dass der Nutzer durch einen Klick auf einen Kalendereintrag direkt den zugehörigen Datensatz in Ninox öffnen kann.

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

📌 Bedeutung der Parameter:

  • type: "popup" – Öffnet den Datensatz in einem Popup-Fenster (weitere Typen können ggf. folgen).

  • recordId: Das Feld im Kalendereintrag, das den Primärschlüssel (Record ID) enthält – meist "Nr".

⚠️ Wichtig:

  • Das angegebene Feld bei recordId muss die echte Ninox-Datensatz-ID enthalten.

  • Wird kein gültiger Wert gefunden, passiert beim Klick nichts.

Mit dem Custom Calendar Week bringst du strukturierte Planung und volle Flexibilität in deine Ninox-Datenbank – individuell anpassbar, intuitiv bedienbar und bereit für deinen Alltag.

Happy Widgeting 🥳

Arc Rider Ventures GmbH

© 2025

Arc Rider Ventures GmbH

© 2025