diff --git a/erpnext/manufacturing/doctype/work_order/work_order_calendar.js b/erpnext/manufacturing/doctype/work_order/work_order_calendar.js
index 90ce74ce232..9173212f941 100644
--- a/erpnext/manufacturing/doctype/work_order/work_order_calendar.js
+++ b/erpnext/manufacturing/doctype/work_order/work_order_calendar.js
@@ -46,3 +46,60 @@ frappe.views.calendar["Work Order"] = {
 	],
 	get_events_method: "frappe.desk.calendar.get_events",
 };
+
+const WORK_ORDER_GANTT_COLORS = {
+	Draft: "red",
+	Stopped: "red",
+	"Not Started": "red",
+	"In Process": "orange",
+	Completed: "green",
+	"Stock Reserved": "blue",
+	"Stock Partially Reserved": "orange",
+	Cancelled: "gray",
+};
+
+if (!frappe.views.GanttView.prototype._work_order_status_colors) {
+	frappe.views.GanttView.prototype._work_order_status_colors = true;
+
+	const prepare_tasks = frappe.views.GanttView.prototype.prepare_tasks;
+	frappe.views.GanttView.prototype.prepare_tasks = function () {
+		prepare_tasks.call(this);
+		if (this.doctype === "Work Order") {
+			set_work_order_bar_classes(this);
+		}
+	};
+
+	const set_colors = frappe.views.GanttView.prototype.set_colors;
+	frappe.views.GanttView.prototype.set_colors = function () {
+		set_colors.call(this);
+		if (this.doctype === "Work Order") {
+			set_work_order_bar_styles(this);
+		}
+	};
+}
+
+function set_work_order_bar_classes(view) {
+	view.tasks.forEach((task, idx) => {
+		const color = WORK_ORDER_GANTT_COLORS[view.data[idx].status];
+		if (color) {
+			task.custom_class = "wo-" + color;
+		}
+	});
+}
+
+function set_work_order_bar_styles(view) {
+	const style = [...new Set(Object.values(WORK_ORDER_GANTT_COLORS))]
+		.map(
+			(color) => `
+			.gantt .bar-wrapper.wo-${color} .bar {
+				fill: var(--${color}-300);
+			}
+			.gantt .bar-wrapper.wo-${color} .bar-progress {
+				fill: var(--${color}-300);
+			}
+		`
+		)
+		.join("");
+
+	view.$result.prepend(`<style>${style}</style>`);
+}