Plugin "Paint" doesn't work

[Oustinger]

Prerequisites

• I have searched for duplicate or closed issues.
• I have validated my setup against the latest version on StackBlitz.
• I have read the contributing guidelines.

Describe the issue

Plugin "Paint" doesn't work if in options setted: { display: inline: true }. Example in the first StackBlitz fork
And if to add this option by "updateOptions()" after conneting "Paint" it doesn't work too (but in my project it fixes the bug...). Example in the second StackBlitz fork

StackBlitz fork

1. first
2. second

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Opera

What version of are you using? You can find this information from the sample StackBlitz.

6.0.0

What your browser's locale? You can find this information from the sample StackBlitz.

ru-RU

[Alexandr120]

I solved it like this
dates is object {2022-01-01 : "some style", 2022-01-02 : "some style"}
my function

const paintDate = (dates) => { picker.display.paint = (unit, date, classes) => { if (unit === tempusDominus.Unit.date) { var dateFormat = prepareDateFormat(date); if(dates.hasOwnProperty(dateFormat)){ classes.push(dates[dateFormat]); } } } }
prepareDateFormat() method returned format "yyyy-mm-dd".
For style i created some class map.

But I have one problem. Dates are only drawn if I select a date. I would like this to happen immediately when the calendar is initialized

[Alexandr120]

result in page

[Oustinger]

@Alexandr120 Can you create an example like that, please? I'm hardly understand your solution..

[Oustinger]

I've fixed my problem with a some sort of crutch. Example

[Alexandr120]

@Oustinger done!. Lock here

if i creted exemple not correctly, you can try use this
`import * as tempusDominus from '@eonasdan/tempus-dominus';

//example picker
const datetimepicker1 = new tempusDominus.TempusDominus(
document.getElementById('datetimepicker1'),
{
display: {
inline: true,
},
}
);

const specilDates = {
'2022-09-10' : 'green',
'2022-09-11' : 'yellow',
'2022-09-12' : 'red'};

const getDateFormat = (dateTime) => {
let currentDate = new Date(dateTime);
let year = currentDate.getFullYear();
let month = currentDate.getMonth() + 1;
month = (month < 10)? 0${month} : month;
let date = currentDate.getDate();
date = (date < 10)? 0${date} : date;
return ${year}-${month}-${date}
}

datetimepicker1.display.paint = (unit, date, classes, element) => {
let dateFormat = getDateFormat(date);
if(specilDates.hasOwnProperty(dateFormat)){
classes.push(specilDates[dateFormat]);
}
};`

[Alexandr120]

here result of my example

[Oustinger]

@Alexandr120 Thanks. But painting of days starts only after selecting any date. I need to do it with the first render of calendar...

[Eonasdan]

Hi everyone.

The issue here is that the paint function is getting set after the rendering has already happened. This is only an issue with the inline view. You currently have two options.

1. use datetimepicker.display._rebuild().
2. if you only have one picker (or want to affect them all), you can set a global paint function with the extend

const painter = (option, tdClasses, tdFactory) => {
    // noinspection JSUnusedLocalSymbols
    tdClasses.Display.prototype.paint = (
      unit,
      date,
      classes,
      element
    ) => {
      debugger;
      if (unit === tdFactory.Unit.date) {
        if (date.isSame(new tdFactory.DateTime(), unit)) {
          classes.push('special-day');
        }
      }
    };
  }

tempusDominus.extend(painter);

Unfortunately, there's not a good way to get which picker is calling the global extends.

@Anzil-Aufait your issue comes from the fact the paint happens before the innerText is set on the element. That means that attempt to use appendChild be get overwritten.

I know this is not ideal for your situations, but I'm not sure what I can do without making a breaking change.

If you have ideas or would like to submit a PR, I'm open to that.

Perhaps in v7 there will be a better way to deal with it.