Feature Request: Hide unavailable Timeslots in Appointment Widget

  • Profile Image
    Asked on November 11, 2021 at 03:17 AM

    Dear Support,

    we noticed that when time lots are taken in the appointment widget it will be greyed out. So everyone can see how many appointments are taken. I'd like them not to know this, can I hide it somehow?

  • Profile Image
    Answered on November 11, 2021 at 03:46 AM


    Thank you for reaching out.

    A way would be to inject this CSS (https://www.jotform.com/help/117-how-to-inject-custom-css-codes/):

    .appointmentSlot.disabled {
    background-color: #fff !important;
    border: 1px solid #4c72fb !important;
    color: #4c72fb !important;
    cursor: default;

    Which would make the filed show like the other unselected ones.

    Best regards

  • Profile Image
    Answered on November 11, 2021 at 03:48 AM

    Hi there,

    thanks for this solution. So I guess when clicking it, nothing happens? So that may indirectly show that that timeslot is taken. Any way to just hide that slot altogether?

  • Profile Image
    Answered on November 11, 2021 at 04:34 AM

    Please note that if you have configured "One-on-one" appointment type and when a user selects a timeslot in submission, that timeslot will be disabled for the other users. Users will not be able to select on that timeslot and nothing will happen when your users click on it.

    Hope this helps.

    Do get back to us if you have any questions.

  • Profile Image
    Answered on November 11, 2021 at 10:15 AM

    Yes, that I understood and it comes close to what I want. However, I would prefer for the user not to see any time slots that are already taken. At all. So that he does not know how many meetings we are having each day. When only changing the appearance, it is still traceable by checking which ones work and which do not.

  • Profile Image
    Answered on November 11, 2021 at 11:04 AM


    Please try injecting the CSS, it will hide the disabled timeslots:

    .appointmentSlot.disabled {



    Guide: https://www.jotform.com/help/117-how-to-inject-custom-css-codes/

    Should you have any further questions, please let us know.


  • Profile Image
    Answered on November 12, 2021 at 04:58 AM

    thank you that worked 👍