Building a Gantt Chart Component with Zero Dependencies

#webdev #javascript #productivity #opensource

Most Gantt chart libraries are either too heavy (500KB+ with framework lock-in), too expensive ($900+/dev), or too complex for what you actually need.

I spent the last two years building SchedulaCore — a lightweight resource scheduler that drops into any page with a single <script> tag.

The problem

I needed a Gantt-style scheduler for a manufacturing planning application. The requirements:

Show resources (machines, people) as rows, time as columns
Drag tasks across resources and time slots
Calendar-aware scheduling (working hours, holidays, per-resource exceptions)
No React/Vue/Angular dependency

Every library I evaluated was either framework-specific, overkill, or priced per-developer (which adds up fast with a team).

The solution

SchedulaCore is a vanilla JavaScript component. Here's the entire setup:

<link rel="stylesheet" href="schedula-core.css">
<div id="scheduler"></div>
<script src="schedula-core.min.js"></script>

<script>
var data = {
    Resources: [
        { Id: "1", Name: "CNC Machine", Items: [
            { Id: "t1", Text: "Order #2601", Offset: 0, Width: 2880, Color1: "#2043D9" },
            { Id: "t2", Text: "Order #2602", Offset: 2880, Width: 1440, Color1: "#006BF7" }
        ]},
        { Id: "2", Name: "Welding Station", Items: [
            { Id: "t3", Text: "Frame assembly", Offset: 1440, Width: 4320, Color1: "#00AAB5" }
        ]}
    ]
};

var settings = new SchedulaSettings();
settings.date = new Date();
var scheduler = new SchedulaCore("scheduler", data, settings);
scheduler.init();
</script>

That's it. No npm install, no webpack config, no framework.

Architecture: plugins all the way down

The core handles rendering, the rest is plugins:

DefaultPopupPlugin — built-in task editor popup (free, auto-registered)
DragDropPlugin — move and resize items (PRO)
CalendarPlugin — working hours, holidays, per-resource exceptions (PRO)
LinksPlugin — dependency arrows between tasks (PRO)
ContextMenuPlugin — customizable right-click menus (PRO)
NotificationPlugin — event hooks for server integration (free)
IconsPlugin — SVG icons on resources and items (PRO)

Each plugin implements a simple interface:

interface ISchedulaPlugin {
    readonly name: string;
    init(core: ISchedulaCore): void;
    destroy(): void;
}

Calendar-aware scheduling

This is the feature I'm most proud of. In manufacturing, a "3-day task" doesn't mean 72 hours — it means 3 working days, accounting for:

Shift schedules (8h/day, 16h/day, 24h/day)
Weekends
Holidays
Per-machine maintenance windows

SchedulaCore distinguishes between Width (elapsed time including non-working periods) and Effort (net working minutes). The CalendarPlugin automatically calculates one from the other.

Incremental updates

Version 1.1 added an API for real-time updates without full redraws:

scheduler.addItem("resource-1", newTask);
scheduler.updateItem("resource-1", "task-id", { Color1: "#ff0000" });
scheduler.transferItem("task-id", "resource-1", "resource-2");
scheduler.deleteItem("resource-1", "task-id");

What's free, what's PRO

The free MIT bundle includes: rendering, themes, popup, animations, grouping, filtering, notifications. Everything you need to display a Gantt chart.

The PRO bundle adds interactivity: drag & drop, resize, calendar, links, context menus, icons, incremental API. One license per project (not per developer).