Update Datepicker Date Colors Based off Values
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
02-27-2024 12:34 PM
I have a story where when a user is selecting an appointment on a record producer, a modal opens which includes a datepicker. The goal is to have dates with available appointments to display in green and dates with no available appointments to display in red. The record producer includes a variable that utilizes the appointmentBooking_SelectMacro macro in the Appointment Booking application. I have followed the code from the macro and it led me to the appointmentBooking UI page which is utilizing a component called "sn-app-booking-availibility".
<j:if test="${jvar_appt_booking_config_valid}">
<body ng-app="sn.appointmentBooking" style="height:100%;width:100%;padding:0px">
<sn-app-booking-availibility config='${jvar_appt_booking_config}'></sn-app-booking-availibility>
</body>
</j:if>
I was able to add a style tag inside this block of code to hardcode the dates to change the color, but I am trying to access the values in the sn-app-booking-availibility component so that I can dynamically assign the green and red colors to the dates in the datepicker.
I have attempted to add a script tag to the same block of code to access the code in the sn-app-booking-availibility using a querySelector, but I have been unsuccessful.
How can find the location of the sn-app-booking-availibility script? Or how can I access the code in the script to get the values of the appointment windows for dates?
