Components / Planning

Gantt chart

A task list on the left and a timeline that scrolls sideways, with months, day numbers and shaded weekends.

Functions: cui_gantt

Usage

static cui_gantt_task tasks[] = {
    /* name, owner, start day, end day, progress, tone, depends on, milestone */
    { "Research", "Maya Okafor", 0, 5, 1.0f, CUI_TONE_VIOLET, -1, false },
    { "Core engine", "Jonas Berg", 6, 19, 0.55f, CUI_TONE_INFO, 0, false },
    { "Beta", NULL, 21, 21, 0, CUI_TONE_WARNING, 1, true },
};
int clicked = cui_gantt(ui, "plan", tasks, 3, start_date, 28, .today = 10);

Drag a bar to reschedule it, or drag either end to change its length. The darker part of a bar is its progress. Dependencies draw as elbow arrows and milestones as diamonds. A focused bar moves a day with the arrow keys and changes its length with Shift and the arrows.

Keyboard

• A focused bar moves a day with the arrow keys and changes its length with Shift and the arrows.

Options of cui_gantt

Option	Type	Default	Description
.day_width	float	30	points per day, default 30
.row_height	float	40	points per task row, default 40
.height	cui_size		Height: CUI_FILL, CUI_FIT, CUI_PX(n) or CUI_PCT(n); unset uses the component's own.
.today	int		day to mark as today, counted from origin; 0 marks none
.read_only	bool		Shows the value but does not let it be edited.

cui_gantt_task

Field	Type	Description
name	const char *	shown in the task list and, when it fits, on the bar
owner	const char *	a name: shows that person's avatar in the task list; NULL for none
start	int	day the bar starts, counted from origin; dragging the bar changes it
end	int	day the bar ends, counted from origin (it is end - start days long); dragging changes it
progress	float	0..1: the part of the bar drawn darker, as done
tone	cui_tone	One of CUI_TONE_NEUTRAL, CUI_TONE_INFO, CUI_TONE_SUCCESS, CUI_TONE_WARNING, CUI_TONE_DANGER, CUI_TONE_VIOLET, CUI_TONE_TEAL, CUI_TONE_ROSE or CUI_TONE_ACCENT.
depends_on	int	index of the task this one waits for: an arrow runs from its end to this start. -1 for none
milestone	bool	a diamond at start instead of a bar; it cannot be resized

cui_tone: CUI_TONE_NEUTRAL, CUI_TONE_INFO, CUI_TONE_SUCCESS, CUI_TONE_WARNING, CUI_TONE_DANGER, CUI_TONE_VIOLET, CUI_TONE_TEAL, CUI_TONE_ROSE, CUI_TONE_ACCENT

Related

• Node editor: A canvas of nodes joined by curved links, for shader graphs, audio patching or visual scripting.
• Month calendar: A month grid with the events of each day, for schedules and planners.
• Week calendar: A week of timed events on a day grid, which can be moved and resized by dragging.
• Kanban board: Columns of cards the user drags between stages.