Skip to main content Skip to docs navigation

Plugins - Paint

On this page

You can customize the css classes applied to dates by overwriting the display.paint. The function provides a Unit value (extended to include "decade"), the date involved and an array of string that represents the classes that will be applied.

//example picker
const datetimepicker1 = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));

datetimepicker1.display.paint = (unit, date, classes, element) => {
  if (unit === tempusDominus.Unit.date) {
    //highlight tomorrow
    if (date.isSame(new tempusDominus.DateTime().manipulate(1, 'date'), unit)) {
      classes.push('special-day');
    }
  }
}