Conditional Formatting in calendarinput component

I have a timesheet app and would like to know if it is possible to add conditional formatting in the calendarinput that would allow me to change the background color of a date to show the status of the timesheet for that week. e.g. incomplete make all date backgrounds in week red / or green if the timesheet is submitted.

@watersolutions I think you would have to add logic in the styles section to change the color but also need to determine which week you are trying to highlight in the calendar and store that somewhere either in a temp var and then based on the week you can look at each value and try the following: - I think it can be done but it may take some trial and error
Screenshot 2023-07-26 at 9.18.42 AM

Thanks, Scott, do you know if it is possible to set it for multiple dates, something like illustrated below:

I think so, but again, you'll need to write some logic to take those dates and set them in a temp variable and then use _.includes(your_dates_var_here) in that field...sorry but I don't have the time to build that all out at the moment.

Hi there!

It might also be worth trying out the calendar component (not the input) if you only need the calendar as a visual. It's a bit easier to set the color of specific dates

Thanks Tess will do, looks like a good option.

1 Like