Skip to main content

DHTMLX Kanban. Highlighting outdated and active tasks example

Visually distinguishing overdue tasks from active ones helps teams quickly identify what needs attention. Conditional styling based on card data makes deadlines impossible to miss without requiring users to inspect each card individually.

Live example​

const { Kanban, Toolbar, defaultEditorShape } = kanban;
const { cards, columns, cardShape, users } = getData();

cards.forEach(card => {
    if (card.start_date && !card.end_date) {
        card.end_date = new Date(card.start_date);
        card.end_date.setDate(card.end_date.getDate() + 1);
    } else if (!card.start_date) {
        card.start_date = new Date();
    }
});

const board = new Kanban("#root", {
    columns,
    cards,
    cardShape: {
        ...cardShape,
        users: {
            show: true,
            values: users,
        },
        cover: false,
        css: obj => {
            return obj.end_date && new Date(obj.end_date) < new Date() ? "outdated" : "active";
        }
    },
    editorShape: defaultEditorShape,
});

const toolbar = new Toolbar("#toolbar", { api: board.api });

<!-- custom styles -->

<style>
.outdated .wx-date {
		color: var(--wx-color-danger);
	}
	.active .wx-date {
		color: var(--wx-color-success);
	}
</style>

The code uses the css function in cardShape to dynamically assign CSS classes based on card data. The function compares each card's end_date to the current date and returns either "outdated" or "active". These classes are then styled in CSS to color the date field red (using --wx-color-danger) or green (using --wx-color-success). Before initialization, cards without end_date get one auto-generated from start_date + 1 day, ensuring every card has a date to evaluate.

Solution overview​

  1. Add a css function to cardShape that returns a class name based on card data
  2. Define CSS styles for each class targeting the date elements (.wx-date)
  3. Use the Kanban's built-in CSS variables (--wx-color-danger, --wx-color-success) for consistent theming

Key points​

  • css is a function, not a string: Unlike static CSS classes, the css property in cardShape accepts a function that receives the card object and returns a class name dynamically
  • Targets inner elements: The returned class is applied to the card's inner content div (.wx-content). Use descendant selectors (e.g., .outdated .wx-date) to style specific parts inside it
  • Date comparison runs at render time: The end_date is compared to new Date() when the card renders or its data changes, not on a live timer. A card won't flip from active to outdated while the board is open unless something triggers a re-render of that card

API reference​

  • cardShape: Card appearance configuration including the css function

Additional resources​