Customize Tempus Dominus 6 date/time picker to highlight special days with specific colors

[moh19814]

I'm using version 6 of Tempus Dominus with the following configuration of the Tempus Dominus datepicker JS control:

import { Controller } from "@hotwired/stimulus"

import { TempusDominus } from "@eonasdan/tempus-dominus"
tempusDominus.extend( window.tempusDominus.plugins.customDateFormat );

export default class extends Controller {
  connect() {
    new tempusDominus.TempusDominus( this.element, {
      localization: {
         format: 'yyyy-MM-dd HH:mm'
      },
      display: {
        inline: true,
        sideBySide: true,
        buttons: {
          clear: false,
          close: false
        },
        calendarWeeks: true,
        components: {
          clock: true,
          useTwentyfourHour: true
        },
      },    
      useCurrent: false
    });
  }
}

and in the browser, it appears like that: enter image description here

I want not to mark / highlight some special dates with specific color. Lets say 2023-07-10 and 2023-07-20 should be marked / highlighted with orange, and 2023-07-13 should be marked / highlighted with red. How do I achieve that? The highlight should remain even after I select a date; or change to another month and then come back.

[Eonasdan]

Please see the paint plugin, but be aware of #2638.

Also, if you're using the latest version, you don't need to include the customDateFormat plugin anymore