# Day picker highlight production days

**URL:** <https://forum.inductiveautomation.com/t/day-picker-highlight-production-days/73638>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [May 12, 2023, 7:51am UTC](https://forum.inductiveautomation.com/t/day-picker-highlight-production-days/73638 "2023-05-12T07:51:37Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Corne\_de\_Jonge](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/corne_de_jonge/32/46823_2.png) [@Corne\_de\_Jonge](https://forum.inductiveautomation.com/u/Corne_de_Jonge)\
**Post date:** [May 12, 2023, 7:51am UTC](https://forum.inductiveautomation.com/t/day-picker-highlight-production-days/73638/1 "2023-05-12T07:51:37Z")

</div>

Hi all,

I'm curious if anyone has come across or developed a day picker that includes the ability to highlight specific days.

In my project, I'm creating a production dashboard, and it would be useful if I could highlight the days when production took place in the day picker.

Has anyone encountered such a solution or have any ideas on how to implement it?

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [May 12, 2023, 11:15am UTC](https://forum.inductiveautomation.com/t/day-picker-highlight-production-days/73638/2 "2023-05-12T11:15:20Z")

</div>

i did something like that in the past, but it didnt really work back then without js, since css alone didnt know about what year was selected.

But now i have found a method to use js, so it should be possible to do now...

creating a mutation observer on the calander, (or just an event lister on the butons/dropdown) that then can find the selected year/month.  
would allow you to apply a style for one of the possible 31 days

here were the styles that didnt work back then:

> [@Highlight today's date on dateTimeInput component in perspective](https://forum.inductiveautomation.com/t/highlight-todays-date-on-datetimeinput-component-in-perspective/57707/9):
>
> That is not possible, You would need to create a class for every day/month and use an expression to get the correct class in the css. I suppose you might get away with doing just the days and also filter if its a filler day or not [image] do this for every 31days .psc-LightDay1 .dayTile[data-day="1"]:not(.ia\_dateRangePicker\_\_calendar\_\_dayTile--fillerTile){ background-color:#add8e655 } .psc-LightDay29 .dayTile[data-day="29"]:not(.ia\_dateRangePicker\_\_calendar\_\_dayTile--fillerTile){ backg…

i dont have time to make a js like this right now, if you have some js experience i can point you to some of the examples and you should be able to do this quite easily, if not than you will have to ping me again in a month orso