How to show available booking dates in a form?

  • schraderweb
    Asked on December 28, 2020 at 11:48 AM

    Do you have an option to show a calendar that shows avail booking dates?



  • Alexander_G
    Replied on December 28, 2020 at 1:00 PM

    Hi, schraderweb!

    Thank you for reaching us.

    You can check our Appointment Slots widget:

    https://jotform.com/widgets/appointment-slots

    DEMO Form: https://form.jotform.com/202521744209954

    1609178420 5fea1d34d46c9  Screenshot 10


    Guide: How to Add a Widget to your Form

    Also, you can check the Bookings app on this link: http://bookings.jotform.io/


    I think this helps.

    Best,

    Alex

  • schraderweb
    Replied on December 28, 2020 at 8:27 PM

    Can you see what days have been already booked on the calendar?



  • Zahra_S
    Replied on December 28, 2020 at 9:19 PM

    Yes, booked field in the Appointment widget will in grey colour, and users will not be able to book that slot.

    You can view the appointment submissions in JotForm Table.

    how-to-view-form-submissions

    I hope this helps. Let us know if you need further assistance.

  • schraderweb
    Replied on December 28, 2020 at 9:50 PM

    I need my clients to be able to book 1, 2, 3 or 4 day events.

    I rent equipment anywhere from 1 to 7 days.

    How can they pick a start date and end date.

    Once booked.....no body else can book on those dates.

    Can you help me do this?


  • Vick Support Team Lead
    Replied on December 28, 2020 at 10:16 PM

    Hi there,

    Please provide complete details of your workflow so can provide a solution accordingly. This will help us understand your requirement better so please give us as much detail as possible.

    Looking forward to your reply.

    Thanks

  • schraderweb
    Replied on December 29, 2020 at 12:01 AM

    We rent (1) sauna to people.

    We can not double book the rental.

    Our client goes to our web site....picks a start date and then an end date for the rental.

    Once booked, I need these dates viewed on the calendar as not available by other renters.


  • Jessica JotForm Support
    Replied on December 29, 2020 at 12:48 AM

    Hi schraderweb, thank you for providing us with more information.

    To clarify further, could you kindly reconfirm if this is what you are trying to accomplished?

    1. User can book for 1-4 days
    2. User can book the equipment for 1-7 days. 
    3. Only one book per each day.
    4. If other users have booked the date, the date should be blocked out for other users.

    We apologize for the back and forth. However, we want to ensure that we understand what you are trying to accomplished.

    In the meantime, you may also want to take a look at our Date Reservation widget. It will allow the user to book up to x days as you prefer.

    Please kindly refer to the following demo I have created: 203630429395053.

    Please try to do test submissions as well. After the user chooses a certain date, the date will be greyed out.


  • schraderweb
    Replied on December 29, 2020 at 11:18 AM

    User can book for anywhere from 1 to 7 days.

    Possibly longer.

    Dont want to impose limitations on length of rental.

    Your other points are correct.


    Not sure why you have 2 calendars on your demo....I just need 1 calendar to show

    the dates that have been booked.



  • Alexander_G
    Replied on December 29, 2020 at 1:22 PM

    Hi, Schraderweb!

    "Not sure why you have 2 calendars on your demo"

    Apologies for misunderstanding, previously you mentioned that you need to book events up to 4 days and in addition you need to book some equipment up to 7 days. That's why my colleague made 2 calendars for 2 different bookings.


    I made a simple explanation of functions of our Date Reservation Widget you need:

    1609264703 5feb6e3f8573b  Screenshot 10

    1. Days limit:

    This option limits how many days can be reserved per one submission. Put 0 to remove limit.

    2. Allow weekends:

    If you want that users will book weekends put YES.

    3. Allow today:

    This option allows to book today's date.

    4. Message:

    You can inform your clients about limits or booking's options. For example - You can select 4 days.

    DEMO:

    https://form.jotform.com/203635463723960


    So, now here is only one book per each day. And if other users have booked the date, the date will be blocked out for other users after submission.

    Please check this DEMO and reply us if you have further questions.

    Cheers,

    Alex



  • schraderweb
    Replied on December 29, 2020 at 1:55 PM

    Can we make it more obvious what days are booked?

    How can I make the calendar larger?

    It may be more intuitive for the person booking to pick a 'start date' and 'end date' from (2) drop down fields.


    Thanks for the time and work on getting this figured out! (:


  • Alexander_G
    Replied on December 29, 2020 at 3:15 PM

    All these requests can be made by injecting CSS code.

    We will get back to you soon with the CSS code to inject.

    Please, stay tune and thank you for your patience.


    Cheers,

    Alex

  • Alexander_G
    Replied on December 30, 2020 at 12:45 PM

    Hello, Schraderweb!

    Thank you for your patience.

    I have tested some ways to make it more intuitive for the people.

    So, I changed colors to highlight the difference and hid all the dates already booked.


    Please - test my DEMO form and if it fits your needs - we'd be happy.

    https://form.jotform.com/203635463723960


    NOTE: You can tell us what exact colors you want to see there. It is changable with CSS code.

    NOTE 2: Please, check January, not December.


    If it fits your needs - reply us and we will provide you with required CSS code and send the guide.

    Thanks,

    Alex


  • Alexander_G
    Replied on December 30, 2020 at 12:47 PM

    UPD:

    I did not find a way to make the calendar larger and do not brake it :\

    Maybe some of my colleagues will try to scale it if it necessary.


    Cheers,

    Alex

  • schraderweb
    Replied on January 6, 2021 at 9:37 AM

    OK....can someone else help me on making the calendar larger?


    Thanks in advance!


  • Mike_G JotForm Support
    Replied on January 6, 2021 at 10:12 AM

    Please give me some time to check for an available workaround/solution that would meet your requirements. I'll get back to you on this ticket as soon as possible.

  • Mike_G JotForm Support
    Replied on January 6, 2021 at 10:55 AM

    Apologies for any delays. I have created a cloned version of my colleague's form and made some changes to the custom CSS codes injected in the "form" and in the custom CSS tab of the Date Reservation widget on the form.

    Here's the link to the form: https://form.jotform.com/210054430914949

    The calendar is now larger and its height still auto-adjust based on the number of days there is in a particular month.

    1609947724 5ff5da4c817a4 zt210106 104056 Screenshot 10

    You may create a cloned version of the new version of the form I linked above in your account so you can inspect it.

    Reference Guides:

    How-to-Clone-an-Existing-Form-from-a-URL

    How-to-Inject-Custom-CSS-Codes

    How-to-Inject-CSS-Codes-to-Widgets

    Feel free to let us know if you need any further assistance.

  • schraderweb
    Replied on January 6, 2021 at 11:47 AM

    This looks better! (:

    Can we do it so there is a 'start' and 'end' date option on the form? Once this is selected, the dates would be

    shown on the calendar?

    Can you pls make the calendar so its full width? Like seen here:

    https://tcsaunarental.com/book-online/


    Thanks so much!

  • Alexander_G
    Replied on January 6, 2021 at 2:19 PM

    Hello,

    Now it has width from form’s border to border.

    https://form.jotform.com/210055017715950


    “Can we do it so there is a 'start' and 'end' date option on the form? Once this is selected, the dates would be

    shown on the calendar?”


    You mentioned form with google calendar integration.

    So, the DatePicker widget allows you to enter “Start” and “End” date right into the calendar. Once it was chosen this day will not be available.

    I am not sure that there is a way to connect Start/End fields with calendar in this way.


    Hope it helps,

    Alex


    Reference Guides:

    How-to-Clone-an-Existing-Form-from-a-URL

    How-to-Inject-Custom-CSS-Codes

    How-to-Inject-CSS-Codes-to-Widgets

    Google Calendar integration




  • schraderweb
    Replied on January 7, 2021 at 11:48 AM

    Cool....this should work. Thanks again! (:



  • schraderweb
    Replied on January 7, 2021 at 12:35 PM

    How do I make dates available again?


    I did a test booking and need to make those dates 'active' again.

    Thanks!




  • John Support Team Lead
    Replied on January 7, 2021 at 4:46 PM

    You should delete the submissions associated with that date from Jotform Table and purge it from the TRASHED ENTRIES:

    1610055959 5ff781174735c  Screenshot 10

    That should clear the booked dates.

  • schraderweb
    Replied on January 7, 2021 at 4:53 PM

    That worked - yeahhh!! (:


    Thanks so much!


  • schraderweb
    Replied on February 7, 2021 at 4:50 PM

    Well....we have a issue. Can you please make the calendar 'mobile friendly'?


    The calendar does not scale and does NOT show the dates.


    Thanks in advance for your help!

  • Mike_G JotForm Support
    Replied on February 7, 2021 at 6:16 PM

    I have moved your new concern to a new ticket considering it is about another issue.

    Here's the link to the new ticket: https://www.jotform.com/answers/2881070

    We will be responding to that ticket shortly. If you have any follow-up questions about the new topic, please refer to that ticket to avoid confusion.