Building a Gantt Chart Component with Zero Dependencies

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).

Try it

• 
  Live demo: rgabgh.github.io/schedula-core
  


• 
  GitHub: github.com/RGabGH/schedula-core
  

I'd love to hear what you think — especially what features you'd want in a Gantt component that existing libraries don't do well.