Custom Gantt

The arcGantt widget is an interactive tool for graphical planning and management of projects, tasks, and time periods. It allows for a clear bar representation of timelines, supports hierarchical structures, and offers dynamic control with clicks.

Typical areas of application:

✔ Project management – manage tasks & deadlines

✔ Resource planning – keep track of availability

✔ Deployment planning – organize teams & dates efficiently

The widget can be flexibly integrated into your Ninox database and adapted to your use case. In the following sections, you will learn how to configure the widget. 🚀

Application code

let data := {
		uniqueId: "Projekt Gantt",
		ganttSettings: {
            height: "800px",
            embedded: false, 
			showScrollbar: true,
			currentZoomLevel:  500,
            nativeCollapse: true, 
		},
    	dateSettings: {
			highlights: [{
					title: "Feiertag",
					date: date(2024, 1, 1),
					backgroundColor: "",
					color: "#fff"
				}, {
					title: "Heute",
					date: today(),
					backgroundColor: "#e9595c10",
					color: "#fff"
				}, {
					title: "Samstag",
					weekday: 6,
					backgroundColor: "",
					color: "#fff"
				}, {
					title: "Sonntag",
					weekday: 7,
					backgroundColor: "",
					color: "#fff"
				}]
		},
		timeSettings: {
			amount: 1,
			startTime: 6,
			duration: 12
		},
  		createModeSettings: {
			show: false, 
            amount: 2
		},
		barSettings: {
			height: "40px",
			borderRadius: "10px"
		},
		sidebarSettings: {
			width: "400px",
			title: "Einsatzplanung",
			clickActions: [{
					title: "Heute",
					date: today(), 
                    position: ""
				}, {
					title: "Q1",
					date: date(2024, 1, 1), 
                    position: ""
				}, {
					title: "Q2",
					date: date(2024, 4, 1), 
                    position: ""
				}, {
					title: "Q3",
					date: date(2024, 7, 1), 
                    position: ""
				}, {
					title: "Q4",
					date: date(2024, 10, 1), 
                    position: ""
				}, {
					title: "Christmas",
					date: date(2024, 12, 24), 
                    position: ""
				}]
		},
		years: [2025,2026,2027],
		items: (select Projekte where Aktiv=true).[{
				recordId: Nr,
				title: Name,
				backgroundColor: "",
				height: "100px",
				barSettings: {
					height: "20px",
					borderRadius: "50px", 
                    borderColor: "",
                    backgroundColor: ""
                },
				clickAction:true, 
				timeEntries: [{
						title: Name,
						recordId: Nr,
						startDate: min(Aufgaben.Startdatum),
						endDate: max(Aufgaben.Enddatum),
						clickAction: true, 
                        barSettings: {
        					height: "20px",
        					borderRadius: "50px", 
                            borderColor: "",
                            backgroundColor: ""
                        },
					}],
				items: Aufgaben.[{
						recordId: Nr,
						title: "Aufgaben",
                        backgroundColor: "",
        				height: "100px",
						barSettings: {
							height: "20px",
							borderRadius: "4px", 
                            borderColor: "",
                            backgroundColor: ""
						},
						timeEntries: [{
								recordId: Nr,
								title: Aufgabe.Bezeichnung,
								startDate: Startdatum,
								endDate: Enddatum,
								startTime: Startzeit,
								endTime: Endzeit,
								clickAction: true, 
                                barSettings: {
                					height: "20px",
                					borderRadius: "50px", 
                                    borderColor: "",
                                    backgroundColor: ""
                                },
							}]
					}]
			}]
	};
arcCustomGantt(data)

Individual parameters

uniqueId

uniqueID is the individual designation of your Gantt. Make sure to assign a unique title here. This is important if you want to display multiple Gantts on one page and ensure that no style settings overwrite each other.

uniqueId: "Projekt Gantt",

ganttSettings block

The block ganttSettings contains general display settings for the Gantt chart – that is, how the Gantt itself is displayed, regardless of its contents.

		ganttSettings: {
            height: "800px",
            embedded: false, 
			showScrollbar: true,
			currentZoomLevel:  500,
            nativeCollapse: true, 
		},

height in ganttSettings block

height determines the height of the Gantt chart in pixels. Example: "800px"

  height: "", // default: auto
  height: "800px" // Pixel-Werte angeben

embedded in ganttSettings block

With the parameter embedded, you specify whether your Gantt chart should be displayed standalone or embedded in another widget.

embedded: "", // default: false
embedded: true, // Gib hier true an, wenn du das Gantt in andere Widgets integrierst. 

showScrollbar in ganttSettings block

With showScrollbar, you determine whether a horizontal scrollbar is displayed below the Gantt chart.

This is particularly helpful for users without a touchpad or mouse with a horizontal scroll wheel – they can conveniently navigate left or right in the timeline by clicking on the scrollbar.

showScrollbar: "", // default: false 
showScrollbar: true,

currentZoomLevel in ganttSettings block

With currentZoomLevel, you set the zoom level of your Gantt chart. The value is specified as a percentage.

• A higher value (e.g., 500) means a stronger magnification – the individual time blocks in the grid are displayed larger.

• A lower value (e.g., 100) shows more time at once, but at a smaller scale.

This allows you to control how detailed or how clear your Gantt is displayed upon loading.

currentZoomLevel:  "", // default: 100
currentZoomLevel:  500,

nativeCollapse in ganttSettings block

With nativeCollapse, you control whether the default expand and collapse icons for hierarchical Gantt entries are automatically displayed.

• true → The Gantt component automatically shows the familiar arrow icons for expanding and collapsing groups or sub-items.

• false → You take control over the presentation and function yourself – e.g., with custom icons and click logics.

This is particularly useful if you need custom behavior or design for the expand function.

nativeCollapse: "", // default: true
nativeCollapse: false,

If you set nativeCollapse to false, you can implement your own logic for expanding and collapsing your Gantt entries.

To do this, you control the display of child items using an if condition that accesses a helper field such as showChildren:

items: if showChildren=true then Aufgaben.[{
			...
		}] end

This method is not only flexible but also performance-friendly: Sub-elements are only loaded and displayed when they are actually meant to be visible – this reduces loading times and ensures smoother interactions in the Gantt.

dateSettings block

With the dateSettings block, you can visually highlight specific days or dates in the Gantt grid – e.g., holidays, project deadlines, or other important points in time.

You can style each highlight individually, e.g., with a custom background color and line color of the rows.

dateSettings: {
			highlights: [{
					title: "Feiertag",
					date: date(2024, 1, 1),
					backgroundColor: "", // bestimmmt die Hintergrundfarbe für den Tag. 
					color: "#fff" // bestimmt die Linienfarbe an den gehighlighteten Tagen
				}]
		},

timeSettings block

The timeSettings block is particularly suitable if you do not want to display 24 hours of a day, but only a certain number of hours per day. This can be useful if you want to plan employee assignments and want to display only the actual working hours of the day. For example, 08:00 to 18:00.

timeSettings: {
			amount: 1, 
			startTime: 6,
			duration: 12
		},

amount in timeSettings

With the parameter amount, you specify how many time units a day in the Gantt chart should be divided into. By default, one hour (i.e., 1) is set – this means each column in the Gantt represents one hour.

If you want finer divisions, you can specify, for example, 0.5 to display half-hourly intervals. Smaller values like 0.25 (15 minutes) are also possible – depending on how detailed you want to represent your planning.

💡Note: Be sure to separate decimal numbers with a period, not a comma.

amount: "", // default: 1
amount: 0.5, // Schreibe hier einen Zahlenwert rein   

startTime in timeSettings

With the parameter startTime, you determine at what time the day in the Gantt chart should begin.

By default, the entire 24-hour day would be displayed. However, if you only want to show a specific period – for example, a typical working day starting at 8 o'clock – then simply specify 8. The Gantt chart will then start at hour 8 (i.e., 08:00) and not display earlier times.

startTime: "", // default: 00:00 Uhr
startTime: 6, // Uhrzeit angeben. 

duration in timeSettings

With the parameter duration, you specify how many hours are displayed in the Gantt chart from the startTime.

This is especially helpful if you only want to depict a specific period – for example, a classic working day. If you specify startTime: 8 and duration: 10, the period from 08:00 to 18:00 will be shown.

duration: "", // default: 8
duration: 10, // Zahlenwert angeben   

createModeSettings block

With the createMode block, you determine whether users are allowed to create a new entry directly in the Gantt chart by hovering.

Within this block, you also define the parameter amount, which determines how many hours a newly created entry should encompass by default.

Example: If amount: 2 is set, then clicking on the Gantt will automatically create an appointment with a duration of 2 hours.

createModeSettings: {
			show: true, // default: false 
            amount: 2 // default: 
		},

barSettings block

The barSettings can be defined individually at every level of your hierarchical Gantt items.

If a subordinate level (e.g., a task) does not have its own settings, it automatically adopts the barSettings of the parent level. This means you do not have to define each setting multiple times and still maintain maximum flexibility.

barSettings: {
			height: "40px",
			borderRadius: "10px",
            borderColor: "",
            backgroundColor: ""
		},

sidebarSettings block

The sidebarSettings determine the appearance and behavior of the left sidebar in the Gantt chart.

• With the parameter title, you set the heading of the Gantt chart.

• With customText, you can additionally style this title – e.g., font size, color, or formatting.

• position determines the position of the viewport that is displayed when jumping to a specific date. The date can be displayed either left-aligned or centered in the viewport.

Additionally, you can define clickActions:
This determines what happens when a user clicks on an entry in the sidebar.
A typical example: Via quicklink, the Gantt view jumps automatically to a specific date that you predefined.

sidebarSettings: {
			width: "400px",
			title: "Einsatzplanung",
			clickActions: [{
					title: "Heute",
					date: today(), 
                    position: ""
				}, {
					title: "Q1",
					date: date(2024, 1, 1), 
                    position: ""
				}]
		},

years

With the parameter years, you specify which years should be displayed in the Gantt chart. You can define either a single year or a whole range – for example:

years: [2025,2026,2027],

It is also possible to control the display dynamically – for example, via a Ninox field. This allows the user to determine which years should be displayed in the Gantt using a selection field.

items section

The items section defines the specific contents of your Gantt chart.

Here, you specify:

• What is displayed in the left sidebar (i.e., the row headers)

• And what is shown in the content area of the Gantt (i.e., the timeline) for each row

Typically, you work here with a for loop to dynamically access values or records from a Ninox table. This allows your Gantt to be automatically filled with the relevant data – like this:

(select Projekte where Aktiv=true).[{
                          ...
                            }]

items in the sidebar

In the upper area of the items block, you define how the individual rows in the left sidebar of the Gantt chart should look.

You can specify titles, colors, height, bar styling, and click behavior here.

• recordId: Links the sidebar item to a specific record. Required for the clickAction, among other things.

• title: The text displayed in the left column – e.g., the project name. Here you can also design your own styles using other widgets, such as custom layout, custom text, or selects.

• clickAction: Allows a click on the sidebar item to lead to the corresponding record.

• barSettings: Here you can control the appearance of the corresponding time bar in the grid area – independently from the sidebar style.

items: (select Projekte where Aktiv=true).[{
				recordId: Nr,
				title: Name,
				backgroundColor: "",
				height: "100px",
				barSettings: {
					height: "20px",
					borderRadius: "50px", 
                    borderColor: "",
                    backgroundColor: "" --> einzelnen zeilen in Bis hier alles einstellungen für die linke sidebar 
                },
				clickAction:true,
                  ...}]

timeEntries – time entries in the content area

In the timeEntries block, you define how the individual time entries are displayed in the timeline (content area) of the Gantt chart.

A timeEntry is a bar on the timeline – that is, a period with start and end date, visualizing a project or a task.

Important properties:

• Multiple time entries per row possible
  You can define any number of timeEntries per item – for example, if a project has several time sections.

• title
  The text displayed on the bar – can also be replaced by widgets or filled dynamically.

• recordId
  Links the entry to a record. In conjunction with clickAction, a click on the bar will redirect to the detail view.

• startDate / endDate
  Determine the position and width of the bar on the timeline.

• barSettings
  You can define your own styles for each timeEntry – e.g., a different color for incomplete tasks (backgroundColor: "#ef1d2e").

items:  (select Projekte where Aktiv=true).[{				
                ...
				timeEntries: [{
						title: Name,
						recordId: Nr,
						startDate: min(Aufgaben.Startdatum),
						endDate: max(Aufgaben.Enddatum),
						clickAction: true, 
                        barSettings: {
        					height: "20px", 
        					borderRadius: "50px", 
                            borderColor: "",
                            backgroundColor: ""
                        },
					}],
				items: Aufgaben.[{
                      ...
                }]

If you have questions about the configuration or individual use cases, the development team is happy to help.
Check out the examples or get inspired in the Discord community.

Happy Widgeting 🥳