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

Question

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:

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?

Answer 1

You can add a class to those specific dates, here's my example:

function mark() {
    let x = $('[data-value="2023-10-19"]');    
    x[0].classList.add('special');
}

<style type="text/css">
    .date-container-days div:not(.no-highlight).special {
        background-color: orange;
        color: #fff;
        text-shadow: 0 -1px 0 rgba(0,0,0,.25);
    }
</style>

<button type="button" onclick="mark()">Mark</button>