CSS Themes

The default CSS theme (kanban_default) is built into the library and does not require an additional stylesheet.

JavaScript

Select a different CSS theme using the theme property. Load its stylesheet first and use the matching CSS class prefix as the property value.

DayPilot Pro for JavaScript includes the kanban_dark theme in demo/themes/kanban_dark.css. The Dark Theme demo shows its dark backgrounds, light text and rounded cards.

This example assumes the DayPilot JavaScript library is already loaded:

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

<div id="dp"></div>

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

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>

Creating Custom Themes

Create a custom theme using the Kanban Theme Designer, or modify the default theme. Save custom CSS in a separate file and load it in the application.

You can customize the Dark Theme in the Theme Designer. The demo links to this starting palette; adjust its colors, save the theme and download the CSS. Use the downloaded theme's prefix as the theme value.