Theme

Developer documentation for frontend and theming

Kimai uses the Tabler.io bootstrap theme. You find the theme specific documentation here.

Twig context

You have the following global objects available to work with:

the tabler_bundle context (see here)
the kimai_config to access system configurations
the kimai_context helper to identify javascript and modal requests

Aligning data in tables

Always align the table header to the content cell.

Use the following alignments in your data-tables:

Data type	Alignment	Component
Date	Start
Datetime	Start
Time	Center
Money	End
Duration	End
Boolean	Center
Text	Start
Count (int)	Center	badge
Collections (Text)	Start	label

Max. active entries warning

A small colored warning sign will be shown, if a user has an active timesheet.

The maximum number of active timesheets can be configured with the setting timesheet.active_entries.hard_limit (called Permitted number of simultaneously running time entries, see System > Settings).

Icons

Kimai allows you to configure icons in several places (provided by Font Awesome 5) and ships with a pre-defined list of icon aliases to guarantee a consistent look.

The pre-defined icons aliases can be found in this config/packages/tabler.yaml.

Icon aliases can be used by applying the icon filter, e.g.

<i class="{{ 'money'|icon }}"></i>

or by using the icon function, e.g.

{{ icon('money') }}