Custom Calendar (Week)

With the Custom Calendar Week widget, you bring a powerful calendar view directly into your Ninox database. You can seamlessly integrate it into any tables, design it flexibly, and dynamically populate it with your own data. Whether for project planning, resource management, or appointment overview – the widget adapts to your requirements.

💡 What you can do with Custom Calendar:

• Custom Design: Adjust colors, icons, and layout to match your style or branding.

• Flexible Entries: Design the display of your appointments, tasks, or events exactly as you need it – with any fields, icons, or tags.

• Multi-day & All-day Events: Plan clearly and recognize longer periods at a glance.

• Drag & Drop: Move appointments directly in the calendar – intuitively and without detours.

• Dynamic Filtering: Show only relevant entries – controllable via Ninox script.

• Highlight Special Days: Mark holidays, vacations, absences, or individual events.

• Customizable Timeline: Show only the hours that are important for your use case – e.g., 8 AM to 6 PM instead of midnight to midnight.

• Integration from Multiple Tables: Link data from different sources – ideal for distributed teams or projects.

• Offline Capability: Your calendar remains usable even without the internet.

📅 Custom Calendar Week makes your scheduling in Ninox clearer, more interactive, and significantly more efficient – perfect for anyone looking to get more out of their database.

Application Code

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: "",
		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
				}
			}]
	})

General Settings

weekdaySettings – targeted control of the calendar week

With the parameter weekdaySettings, you can precisely specify which calendar week from which year should be displayed in the calendar.

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

In this example, the 12th calendar week of the year 2025 is displayed.

Instead of entering fixed values, you can also refer to Ninox fields to make the data dynamic.

⚠️ Important: If both dateSettings and weekdaySettings are set, dateSettings takes precedence and overwrites the specifications from weekdaySettings.

dateSettings – Start, Duration & Highlighting in the Week View

With the parameter group dateSettings, you control when your calendar starts, how long it is displayed, and which days should be highlighted.

Individual parameters in dateSettings:

• startDate (required)
  Defines the start date of the calendar. Specify a date field here.
  → Can be dynamically controlled via Ninox fields.

• endDate (optional)
  Specifies the end date of the calendar. Specify a date field here.
  → Takes precedence over duration.

• duration (optional)
  Determines the number of days to display (default: 7).
  → Only considered if endDate is not set.

Logic of display duration:

• Only startDate set → shows 7 days from the start date

• startDate + duration → shows the defined number of days

• startDate + endDate → duration is ignored

• highlights (optional)
  Allows for the color highlighting of certain days – ideal for vacations, holidays, or other special occasions.
  → You can mark both specific dates and weekdays (see details below).

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 – Set the start day of the calendar week

With the parameter weekStart, you determine on which day of the week your calendar should start.

📌 Type: Number (0–6)
📅 Values:

• 0 = Sunday (e.g., common in the USA)

• 1 = Monday (standard in Central Europe)

• 2 = Tuesday

• ...

• 6 = Saturday

💡 Tip: For most users in German-speaking countries, 1 (Monday) is the appropriate choice.

weekStart: 1,

timeZoneBalance – manual timezone correction for precise display

Type: Number (in hours)

The parameter timeZoneBalance helps you to compensate for time zone differences that can arise from the display in Ninox.

Background: Ninox uses a different timezone logic internally, which can lead to a shift in times in the calendar.

Recommendation for Germany: Set the value to -1 to adjust the display to Central European Time (CET/CEST).

timeZoneBalance: -1, 

timeZoneBalance: "" // default: Zeiten werden wie in Ninox gespeichert angezeigt, die Nutzer-Zeitzone wird nicht beachtet.

timeSettings – individual control of the timeline

With the parameter group timeSettings, you can specify which time period per day should be displayed in the calendar. This allows you to better adapt the calendar view to your use case – e.g., for typical office hours or shift models.

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

In this example, the calendar day starts at 6:00 AM and ends at 10:00 PM.

🧠 Important to know:

• Only whole hours are supported.

• If you specify 6.5 (for 6:30 AM), the system will round down to 6:00 AM.

• The default range without custom configuration is 0–24 hours (i.e., a whole day).

💡 Tip: Fewer visible hours = more compact display = better overview with many entries.

currentTime – color marking of the current time

The parameter currentTime controls the display of a narrow bar that shows you the current time in the calendar – similar to well-known calendar apps.

🎨 Function: With this parameter, you set the color of the bar that marks the current position in the course of the day.

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

lang

This function is set by default and does not need to be adjusted.

lang: clientLang(),

timeSlotWidth – Width of individual weekdays

With the parameter timeSlotWidth, you specify how wide the individual day columns in the weekly calendar should be displayed.

timeSlotWidth:  "250px" ,

→ Each weekday is displayed with 250 pixels wide.

📌 Note:

• The default value is about 100 px, but can be adjusted depending on layout requirements.

• A higher number provides more space per day, especially helpful when there are many entries.

timeSlotHeight – Set the height of the hourly rows

With the parameter timeSlotHeight, you determine how tall each hour is displayed in the calendar.

timeSlotHeight: "80px",

→ Each hour will have a height of 50 pixels on the vertical time axis.

📌 Note:

• The default value is about 40 px.

• A higher value provides more space per hour.

allDayHeight – Height of the row for all-day entries

With the parameter allDayHeight, you define how high the upper row for all-day entries is displayed.

allDayHeight: "80px",

→ The row for all-day entries is displayed with 60 pixels in height.

📌 Note:

• By default, the height is about 40 px.

• A higher value creates more space for multiple all-day entries or larger text representations.

styles – individual styling for your calendar

With styles, you can customize the appearance of your calendar – here you can currently customize the background color of your calendar.

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

createNew – create new appointments by dragging

With the parameter createNew, you activate the possibility to create new appointments directly by dragging a time area in the calendar.

🖱️ Here’s how it works:

• You click in a free area of the calendar, drag while holding down the mouse button, and release.

• A new appointment is automatically created – including start time and duration.

📌 Note:

• All field references (dateFrom, dateTo, timeFrom, timeTo) must match the Field IDs of the respective fields from your calendar entry table (tableId).

• You can easily find the Field IDs using the Ninox function fieldId() and directly incorporate them into the configuration.

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

💡 Tip: Ideal for quick and intuitive scheduling – e.g., for shifts, bookings, or room allocation.

timeEntries – your calendar entries in detail

The timeEntries block specifies which concrete time entries are displayed in the calendar.

Here you define how each individual entry is displayed – from title to color to custom layouts. This allows you to customize and adapt your calendar cards individually to your use case. A new appointment is automatically created – including start time and duration.

📌 Note:

For displaying the real-time change of appointment data (when creating or moving an appointment), the placeholder "##entrytime##" can be used anywhere in `timeEntries` where the appointment time should be displayed, such as in title, subtitle, value, but also in all widgets used here. For example, when a `customLayout` is used for the design of the timeEntries or in buttons, inputs, etc.

For example, within a layout block in the text widget:

...
value: arcCustomText({
            		alignY: "top",
        			fontSize: typo.paragraph3.fontSize,
					fontWeight: "400",
					fontColor: appointmentType.colorShade,
					value: "##entrytime##"
					}),
      ...

➡️ You will find all parameters for the timeEntries in the following section.

title – Title of the calendar entry

With the parameter title, you specify what is displayed in the first line of the calendar entry.

🔧 Two options:

1. Custom Title:
   Specify a field or text to be displayed as the title in the entry.

2. No entry (""):
   If you leave the field empty (""), the appointment time will be displayed instead.

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

📌 Note:

• If you do not provide a title and the time is displayed instead, this time will be live updated when changes occur, e.g., when dragging or extending an entry.

subtitle – Description under the title

With the parameter subtitle, you can display an additional line under the title in the calendar entry.

Typically, a short description or additional note, such as the reason for the appointment or a status, is recorded here.

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

→ For example, displays the content of the field "Description" under the title in the calendar entry.

📌 Note:

• The subtitle is optional and is only displayed if a corresponding field value is present.

• You can also simply omit this parameter and then the line will not be displayed

value – Additional information or interactive fields

The parameter value represents the third line of your calendar entry. Here you can display additional information or even integrate interactive elements like input fields or selection lists.

🔧 Use cases:

• Additional information such as location, status, responsible person

• Interactive widgets directly in the calendar entry – for example:

  • A select field to choose the responsible employee

  • An input field for short notes or feedback

value: "",
value: Kommentar,

→ Displays the content of the field "Comment" in the third line.

📌 Note:

• value is optional, but it enhances the display of your entries by adding an additional layer.

• In conjunction with embedded widgets, an interactive calendar experience within the entry is created.

💡 Tip: Use value to make important additional info immediately visible – or to allow your users to work directly in the calendar.

customLayout – complete individual layout for calendar entries

With the parameter customLayout, you can define a completely custom layout for your calendar entries.

If you use this parameter, the standard fields title, subtitle, and value are no longer displayed. Instead, you can freely design how your calendar entry looks – with any widgets.

customLayout: "",

💡 Tip: Use customLayout when you need a completely individual representation, e.g., with your own colors, icons, structure, or logical conditions.

dateFrom, dateTo, timeFrom, timeTo – Start and end time per entry

With these four parameters, you specify which fields from your time entry record should be used for date and time.

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

📌 Note:

• Real date and time fields from Ninox must be specified.

• The combination of date + time determines the position and length of the calendar entry.

⚠️ Important to know:

• If dateTo is missing, dateFrom will be used automatically (and vice versa).

• If both date fields are missing, the entry will not be displayed.

• If timeTo is missing, timeFrom + 5 minutes will be used automatically.

• If timeFrom is missing, timeTo - 5 minutes is assumed.
  → This allows for a minimal display.

💡 Tip: If you only want to display all-day entries without specific times, you can also work with date fields only – the calendar will then display the entry as an all-day appointment.

styles – individual styling for calendar entries

With the parameter styles, you can customize the appearance of individual calendar entries – e.g., colors, padding, or rounded corners.

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

📌 Supported properties:

• backgroundColor: Background color of the card

• color: Text color

• padding: Padding (e.g., "6px")

• borderRadius: Rounding of the corners (e.g., "8px")

💡 Tip: With styles, you can visually differentiate your entries, for example, by status, type, or priority – also dynamically if you use fields from your data source as values.

dragAction – Specify fields for moving entries

With the parameter dragAction, you define which date and time fields should be updated when dragging or moving an entry.

This ensures that the new time is saved in the record when an entry is moved in the calendar.

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

📌 Note:

• Provide the correct field IDs for the individual fields in the time entry table.

• You can use the Ninox function fieldId() here.

⚠️ Important: This information is mandatory if you want entries to be moved by drag & drop or their duration to be changed.

clickAction – Open entries by clicking in Ninox

With the parameter clickAction, you enable users to directly open the corresponding record in Ninox by clicking on a calendar entry.

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

📌 Meaning of the parameters:

• type: "popup" – Opens the record in a popup window (further types may follow).

• recordId: The field in the calendar entry that contains the primary key (Record ID) – usually "Nr".

⚠️ Important:

• The specified field for recordId must contain the true Ninox record ID.

• If no valid value is found, nothing happens upon click.

With the Custom Calendar Week, you bring structured planning and full flexibility into your Ninox database – individually customizable, intuitively operable, and ready for your everyday life.

Happy Widgeting 🥳