I want to detect CSS change on a div!

Hello, i need to detect changes on a webpage’s calendar that i am registered for appointments. There is a calendar and sometimes many appointments are not available but due to cancellations the class will change! For example Distill will monitor the div class=“not-available” on the date

but once it will check again and there is a change in this the webpage will change the class to “is-available” I cannot find a way to detect this page and send me notification!

It is possible to monitor changes to the class names by monitoring changes to the element’s HTML or class attribute. It can be configured using the Visual Selector at shown here: https://distill.io/docs/web-monitor/what-is-visual-selector/#how-to-monitor-attribute-and-property-value-for-the-selected-element

There is a related article that could serve as an example in your case. Check it out as well: Monitoring availability of US visa appointment dates using Distill – Distill

Feel free to reach out if you need any help. Cheers!

Hello Ajit, thank you for your reply. I think i managed to make it work and now i monitor it ,looks that ti will do the job if i play more with the settings. I want to ask one more advance thing. Let’s make a guess that there is availability on a date that it was booked before and distill detects that change because the calendar box for that date changes class to “green-available” , is it possible via a macro or something to book the date automatically? Actually is even more complicated because after you click on the available date then there is another content slide open on the bottom that you must choose the available time that was opened for that date. and then on the next page to confirm the appointment :slight_smile:

It could be technically possible to do. Once a macro has been recorded to book a date, the macro can be use as the monitor’s action.

Is choosing the time the tricky step?

Hi Ajit! Yes the tricky part is the choosing the time and then confirm this on another page. Let me show you the scenario if the user was doing it manually. There is availability for a date (For example 12th of Friday) On this date if you click it will show you (inside the same page on another container) the available times. Those are standard dates for everyday so even manually you are lucky if you the tine suits your needs. For example 9am , 11am, 12pm, 13pm and 14pm (the times are always standard) Can distill adjust more and see that if the time is 12pm to click it and continue more? The complicated thing is that next there is another webpage to confirm the date and so on …

i do not understand about how macro works… so if i do record a macro once manually then distill can use my action for all the bookings i would make manually? The manual proccess as i’ve described is quite simple. Yoga lesson is available, then i click on this date and then i choose the time that is available. And then another page to click on a checkbox that i confirm and click submit button