How to Shorten Weekly Appointment Planner?

  • UT_CSPS
    Asked on June 24, 2024 at 2:13 PM

    Good afternoon!

    I am using the Weekly Appointment Planner in my form, and I would like to roll the time options for each date over 2 shorter columns vs all the times for each date in one long column. Is there a way to do this using CSS or another option?

    Thank you!

    Rainey

    Jotform Thread 16211641 Screenshot
  • Angelica JotForm Support
    Replied on June 24, 2024 at 3:00 PM

    Hi Rainey,

    Thanks for reaching out to Jotform support. I cloned your form and tested it, and here's the result:

    How to Shorten Weekly Appointment Planner? Image 1 Screenshot 30

    If this is something you're trying to achieve, let me show you how:

    1. In the Form Builder, select the widget’s wand icon to open settings.
    2. In the Widget settings panel, click on the Custom CSS on the right side.
    3. Enter this CSS code in the text area.
    #gr_list{
    overflow: scroll;
    height:400px;

    How to Shorten Weekly Appointment Planner? Image 2 Screenshot 41

    If that’s not exactly what you’re looking for, can you explain a bit more, so I can help you better?

    Once we have a better idea of what’s going on, we’ll be able to come up with a solution.


  • UT_CSPS
    Replied on June 24, 2024 at 4:00 PM
    Thank you for your reply.
    Unfortunately, that just reduced the time slots. You can see in the form now that Wednesday, July 17, only shows slots for 7:00 AM through 10:30 AM. If possible, I need it to show all the time slots for each date in two columns.
    https://form.jotform.com/241625808806158
    I hope that makes sense! Simply put, I need all the time slots for each date showing in two columns. The first column would show slots for 7 AM to 10:30 AM and 11 AM to 2:30 PM time slots showing in the second column.
    Thanks!
    Rainey
    ...
  • Jovito JotForm Support
    Replied on June 24, 2024 at 5:16 PM

    Hi Rainey,

    I cloned and checked your form. Unfortunately, you cannot split one appointment planner into two. As a workaround for that, you can duplicate the appointment planner to cover the remaining time slot. Let me show you how:

    1. Open your form in Form Builder.
    2. Click on the Weekly Appointment Planner Widget.
    3. Hover and click on the gear icon labelled Properties, a sidebar will appear.
    4. And in the bottom right corner of the page, click on Duplicate.

    How to Shorten Weekly Appointment Planner? Image 1 Screenshot 20

    You can just modify the time Appointment times of the two Weekly Appointment Planner Widget.

    If that’s not exactly what you’re looking for, can you explain a bit more, so I can help you better?

    Give it a try and let us know how it goes.

 
Your Answer