DayPilot.Kanban.theme

The theme property (string) sets the CSS theme used by the Kanban component.

Declaration

DayPilot.Kanban.theme

Default Value

"kanban_default"

Notes

The default theme styles are embedded.

When creating a custom theme, define the CSS classes expected by the Kanban component and then assign the theme name using this property.

The DayPilot Pro for JavaScript download includes demo/themes/kanban_dark.css. Load this stylesheet and set this property to "kanban_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/kanban_dark.css">

const kanban = new DayPilot.Kanban("dp", {
  theme: "kanban_dark",
  // ...
});
kanban.init();

Angular

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

@import "./themes/kanban_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-kanban",
  standalone: true,
  imports: [DayPilotModule],
  template: `<daypilot-kanban [config]="config"></daypilot-kanban>`
})
export class DarkKanbanComponent {
  config: DayPilot.KanbanConfig = {
    theme: "kanban_dark",
    columns: [{id: "todo", name: "To Do"}, {id: "progress", name: "In Progress"}],
    cards: [{id: 1, name: "Design review", text: "Approve the new layout", column: "todo"}]
  };
}

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 {DayPilotKanban} from "daypilot-pro-react";
import "./themes/kanban_dark.css";

export default function DarkKanban() {
  return (
    <DayPilotKanban
      theme="kanban_dark"
      columns={[{id: "todo", name: "To Do"}, {id: "progress", name: "In Progress"}]}
      cards={[{id: 1, name: "Design review", text: "Approve the new layout", column: "todo"}]}
    />
  );
}

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 {DayPilotKanban} from "daypilot-pro-vue";
import "./themes/kanban_dark.css";

const columns = [{id: "todo", name: "To Do"}, {id: "progress", name: "In Progress"}];
const cards = [{id: 1, name: "Design review", text: "Approve the new layout", column: "todo"}];
</script>

<template>
  <DayPilotKanban
    theme="kanban_dark"
    :columns="columns"
    :cards="cards"
  />
</template>

See Also

• CSS Themes [doc.daypilot.org]

• Default CSS Theme (kanban_default) [doc.daypilot.org]

• List of All CSS Classes [doc.daypilot.org]

• DayPilot.Kanban Class