Open Source Version
Apache License 2.0
Free for personal and commercial use
Scheduler
A horizontal timeline that shows resources as rows, with support for large data sets.
LITE
PRO
Lite version includes: Drag-and-drop CSS themes Progressive rendering Custom timescale Next.js support Snap to grid Event icons Custom event drag handles Touch devices Localization XSS protection
Pro version includes: All Lite features Non-continuous timeline Frozen rows PDF export Image export PDF export Hierarchy of resources Dynamic event loading during scrolling Dependency links Milestones Mass drag-and-drop operations Row header columns Dragging events from and to an external source Bubble popover Zoom Undo/redo Split resources Disabled cells Holidays Skipping non-business hours Hiding non-business hours Row header width auto-fit Keyboard navigation Drag-and-drop row moving Inline editing Concurrent event groups Row sorting Row filtering JSX in event, cells and headers Overlap prevention Infinite scrolling Event versions Event phases Joint events are always moved and resized together Resource utilization summary Crosshair
Resource Calendar
A vertical timeline that shows resources as columns.
LITE
PRO
Lite version includes: Drag-and-drop CSS themes Next.js support Snap to grid Event icons Custom event content and styling Localization
Pro version includes: All Lite features Drag-and-drop column moving and resizing Column hierarchy Column filtering Column header height auto-fit Custom timescale Progressive rendering PDF export Image export Bubble popover Zoom Undo/redo Disabled cells Holidays Touch devices
Daily / Weekly Calendar
An interactive day & week view with drag-and-drop and customizable cell duration.
LITE
PRO
Lite version includes: Customizable cell duration Drag-and-drop Next.js support Snap to grid Customizable event, cell, and header content Event icons Custom event drag handles Localization Configurable number of days Context menu Business hours Holidays Undo/redo CSS themes TypeScript
Pro version includes: All Lite features Progressive rendering High number columns with fixed width All-day events Touch devices Bubble popover Zoom Disabled cells Column header height auto-fit Inline editing JSX in events, cells and headers Image export PDF export RTL support AutoScroll Crosshair
Monthly Calendar
A month grid that displays days as cells.
LITE
PRO
Lite version includes: Customizable cell duration Events spanning multiple days Drag-and-drop event moving and resizing Next.js support Snap to grid Event icons Adjustable event height Customizable event content and CSS Built-in or custom delete icons Localization Context menu Event tooltip Business days Holidays CSS themes TypeScript
Pro version includes: All Lite features Touch devices Bubble popover Undo/redo Disabled cells Inline editing JSX in events and cells Image export PDF export RTL support AutoScroll Custom event drag handles Full month or specified number of weeks Maximum number of events per cell Cell stacking mode
Yearly Calendar
A yearly calendar that shows months as columns.
PRO
Pro version includes: Drag-and-drop Event spanning multiple days or months CSS themes Next.js support Snap to grid Event icons Custom event drag handles Touch devices Localization Progressive rendering Fixed or automatic column width PDF export Image export Bubble popover Zoom Undo/redo Disabled cells Holidays
Timesheet
A timesheet view with one day per row and up to 24 hours on the horizonal axis.
PRO
Horizontal timeline tailored for employee hours, project billing and utilization tracking.
Pro version includes: Drag-and-drop CSS themes Next.js support Snap to grid Event icons Custom event drag handles Touch devices Localization Progressive rendering PDF export Image export Excel export Bubble popover Zoom Undo/redo Disabled cells Holidays Hiding non-business hours Row header width auto-fit Keyboard navigation Inline editing JSX in event, cells and headers Crosshair Row header columns TypeScript
Gantt Chart
A project timeline with tasks, links, and milestones.
PRO
Project timeline with tasks, links, milestones, critical path and PDF export.
Pro version includes: Drag-and-drop CSS themes Next.js support Snap to grid Task icons Milestones Task groups Touch devices Localization Progressive rendering PDF export Image export Excel export Bubble popover Disabled cells Drag and drop between two Gantt charts Zoom Undo/redo Holidays Hiding non-business hours Row header width auto-fit Inline editing JSX in tasks, cells and headers Crosshair Task header columns Task dependency highlighting using links (Start-to-Start, Start-to-Finish, Finish-to-Start, Finish-to-Finish) Task progress bar Large data sets Non-linear timeline Context menu Custom time scale (minutes, hours, days, weeks, months, years) Customizable task content (HTML, active areas) TypeScript
Kanban Board
A column-based task board with optional horizontal swim-lanes.
PRO
Pro version includes: Drag-and-drop CSS themes Next.js support Snap to grid Card icons Touch devices Localization Progressive rendering Row header columns Large number of columns with fixed width Bubble popover Row header width auto-fit Keyboard navigation Inline editing JSX in cards, cells and headers Crosshair Card swim-lanes Card customization (HTML, icons, active areas) Context menu Bubble popover Card color-coding TypeScript External drag and drop Drag and drop swimlane moving
Build a custom component configuration.
Generate a React or Next.js project.
Learn how to create a calendar with day, week, and month views in the DayPilot React Calendar.
.png)
Learn how to create a scheduler with a horizontal timeline in the DayPilot React Scheduler.
Learn how to create a weekly calendar component in the DayPilot React Calendar.
Learn how to create a monthly calendar scheduler component in the DayPilot React Scheduler.
Learn how to create a resource calendar with editable columns in the DayPilot React Scheduler.
Learn how to implement external drag and drop in the DayPilot React Scheduler.
Learn how to export the DayPilot React Scheduler to PDF and implement printing functionality.
Learn how to create a vertical timeline in the DayPilot React Scheduler.
Learn how to implement a milestone scheduler in the DayPilot React Scheduler.
Learn how to implement timeline zoom functionality in the DayPilot React Scheduler.
Learn how to visually connect tasks in the DayPilot React Scheduler using links.
Learn how to enable undo/redo functionality in the DayPilot React Scheduler.
Learn how to show planned vs actual task durations in the DayPilot React Scheduler using task versions.
DayPilot
/>