DayPilot.Gantt.theme

The theme property (string) sets the ID of the CSS theme applied to the Gantt component.

Declaration

DayPilot.Gantt.theme

Default Value

"gantt_default"

Notes

You can create a custom Gantt CSS theme using the online theme designer and then assign its ID using this property.

The DayPilot Pro for JavaScript download includes demo/themes/gantt_dark.css. Load this stylesheet and set this property to "gantt_dark". Setting the property does not load the stylesheet automatically.

Examples

JavaScript

Include the stylesheet once in the application, using the path where you copied the theme file:

<link rel="stylesheet" href="themes/gantt_dark.css">

const gantt = new DayPilot.Gantt("dp", {
  theme: "gantt_dark",
  // ...
});
gantt.init();

Angular

Set the theme in a typed configuration object for the Angular component. Copy gantt_dark.css to src/themes and load it from the application's global src/styles.css:

@import "./themes/gantt_dark.css";

The standalone component imports DayPilotModule and binds the configuration in its template:

import {Component} from "@angular/core";
import {DayPilot, DayPilotModule} from "daypilot-pro-angular";

@Component({
  selector: "app-dark-gantt",
  standalone: true,
  imports: [DayPilotModule],
  template: `<daypilot-gantt [config]="config"></daypilot-gantt>`
})
export class DarkGanttComponent {
  config: DayPilot.GanttConfig = {
    theme: "gantt_dark",
    startDate: "2026-10-12",
    days: 7,
    tasks: [{id: 1, text: "Design review", start: "2026-10-12", end: "2026-10-15"}]
  };
}

React

Pass the theme and data as individual props to the React component. Place the stylesheet in a themes directory beside this component and import it:

import {DayPilotGantt} from "daypilot-pro-react";
import "./themes/gantt_dark.css";

export default function DarkGantt() {
  return (
    <DayPilotGantt
      theme="gantt_dark"
      startDate="2026-10-12"
      days={7}
      tasks={[{id: 1, text: "Design review", start: "2026-10-12", end: "2026-10-15"}]}
    />
  );
}

Vue

This single-file Vue component imports the stylesheet and passes the theme and data as individual props. Place the theme CSS in the adjacent themes directory. The stylesheet applies globally to the generated DayPilot elements.

<script setup>
import {DayPilotGantt} from "daypilot-pro-vue";
import "./themes/gantt_dark.css";

const tasks = [{id: 1, text: "Design review", start: "2026-10-12", end: "2026-10-15"}];
</script>

<template>
  <DayPilotGantt
    theme="gantt_dark"
    startDate="2026-10-12"
    :days="7"
    :tasks="tasks"
  />
</template>

See Also

CSS Themes [doc.daypilot.org]

Gantt Theme Designer

DayPilot.Gantt Class