Appointment field: Ability to display time intervals

Hello,

Our appointment booking form is beginning to take its final shape!

However, I need to display the correct time-interval of booked time-slot in google calendar.

With the current solution of appointment slot time interval booking, how can i break out start time and end time from the data? Or at least, how can I enter the start time of the appointment with our 3-hour time length intervals?

Please let me know if I don't make any sense.

@Lars_L

Hi there - I'm not sure if I understood you correctly. I checked your appointment field and it seems to be correctly set up. 180min (3hrs) duration and your interval are all 3hrs.

Do you perhaps wish to display it like 09:00-12:00 instead of just 9:00?

@Sonnyfer
This would be really great if we could do, and I'd like to know more about it.

However this is not the current topic. What I'm asking is how I can put the correct time in the Google Calendar integration as seen above. I want to enter the correct start and stop time of the appointment. But I have no separate start time nor stop time. What I have is the field "Tidsbokning (tretimmarsintervaller)", that is, the appointment time-slot widget. How can i enter the start and stop time from this?

Greetings,

Thanks for providing additional details.

Please note that when the Google calendar integration is created using the appointment field, the end time is automatically set based on the slot duration selected:

i.e. End time = Start time + duration

So, in your integration this is also duration, just it is not fully visible due to the long title:

So, if I make a submission on the cloned version of your form for 1 PM slot, for instance, it will automatically create this event on the Google calendar:

Please check and let us know if you have further questions.

Thank you!

Do you perhaps wish to display it like 09:00-12:00 instead of just 9:00?

this is also what im trying to achieve. Can you please help me with this? Ive been waiting for almost a hear for this funktion

Hello there,

Unfortunately, it is not currently possible to display the duration of the time slot on the appointment widget this is because the duration is indicated through the time difference between the available slots. I have forwarded this to our back-end developer team. Please do note that we don't have an ETA on when would this be implemented. We will inform you via this thread once this feature becomes available.

Looking forward to your response

Hello, I'm still waiting for this functionality. Me and many others. This was brought up again as a must-have from our customer. We need to fix it now. I have no other choice. We must fix it now, and we need it to be implemented on this widget. Or give us the code and let us make the widget better ourselves. Because it is crucial that we get this implemented as soon as possible. We've been waiting since we first started using Jotform for this display.

(9:00-12:00 instead of just 9:00) In the appointment booking.

I really need a solution now. Our future usage of this form is dependant on it.

We use it in our own systems. It's implemented using PHP, mySQL, databases and we have it connected to our VPS. So we need to make this a possibility right now, not in six months. Will you please help us? We've been told again and again that this very very easy fix will be forwarded to the developer team. And this was five months ago. Now I need to be able to show my customer that it is time-interval booking on the appointments slots, not just single time booking.

There is several threads on this topic, we all want the same thing. Please follow through!
It is a very easy fix and it doesn't take long. You will help alot of customers.

Please, if you are unable to fix it yourselves,
If you let us, I can let my own developer fix it if we are allowed to create our own widget.

Now I need to be able to show my customer that it is time-interval booking on the appointments slots, not just single time booking.

This often leads to customers being told/believing we will come at a certain time, which would be impossible for us to guarantee, especially since every job is different and cannot always be estimated, and that is without even considering the travel time for each job.

Hello Swiftec,

As mentioned earlier, the duration will actually appear in the appointment booking in Google Calendar. I've tested this myself so kindly check the screenshot below:

As you can see, it shows the start as well as the end time of the appointment. Can you tell us exactly where you want to see this information? Do we understand correctly that you want to see it in Google Calendar?

Should you wish to create a widget, please have your developer check our documentation here. We'll be waiting for your response.

We use our own integration to Calendar with API. So this is not the issue. This is about what @sonnyfyer asked, when he solved our former issue:
Sonnyfyer asked "Do you perhaps wish to display it like 09:00-12:00 instead of just 9:00?"

Yes - that is what we've been trying to do since the start.

This is where i want to see it, inside the appointment button when our customer orders, in the form.
Everywhere elsewhere, we have managed to display it ourselves. But the settings page for the current widget is limited...

Hello Swiftec,

Thanks for clarifying your concern. We're sorry to say that the feature is not available yet. I can see that you've been following up with this feature since 2021. I will be gathering all the related requests for this concern and will passed it accordingly to the team. If there's any update from them, we will definitely let you know.

Let us know if you need any other help.

This is the same answer I've been getting. I've posted comments on articles about the appointment widget, I've been reaching out about this issue.

I need an alternative! We need to make this visible in the near future.

It's not an extensive update. It's just a tiny function. If you can't help us in the widget, then at least make then button editable for me as a user.

Hello Linus Bergström,

We understand how important that function is for you; therefore, rest assured we will get back to you once the feature becomes available. We are constantly working on implementing new features and solutions.

Your patience and collaboration are highly appreciated.

@Dragana_R Thank you for responding. I have no issue with waiting. Our clients however will not wait, unfortunately. I will have no choice other than to find other means to make it work.

@Lars_L , Kan du möjligtvis se om det finns någon workaround som kan göra att det framgår tydligare för kunden/säljaren att det handlar om tidsintervaller ex. '9-12' och inte prick klockan 9, etc ?

Hi,

Thanks for reaching us back and we apologize for the inconvenience that this has caused you. I have tried to look for a work around but wasn't able to see any work around that will fit to your goal. In this case, the best thing to do is wait for our back-end team's response.

Thank you for understanding and for your patience.

Regards,
Kim

Hello,

I’m sorry you're having difficulties getting that feature to work. We have already escalated this as a feature request to our developers.

Meanwhile, I've also found that it is also possible to change the time intervals displayed on timeslots to also include the end time by injecting some custom CSS codes. Could you please this cloned version of your form and let us know if it fits your requirements:

https://form.jotform.com/221166394595969

Also, note that the selected intervals will only show the start times and currently it's not possible to change that text with custom CSS codes. As soon as we hear back from you, we can move forward with a solution.

@Niko_N , This is great news! We’re delighted that you came up with a workaround. We didn’t believe it was possible until now to change the css. We’re aware this only changes the appearance of the button and not the actual settings in jotform. But we’ve already made our own solution outside of jotform through API connection to MySQL and added the intervals from our own end. But this CSS solution is just what was missing.

Just let me know what I should do. Or if you could do it for me on three of our forms.

Again, I can’t thank you enough!

Hello Swiftec,

Thank you for reaching back to Jotform Support. Below is the custom CSS code my colleague created and can be injected into your form.

.slot{ /*this block of code always stays the same*/

 width:100%;

}

/*start copying here for more coverage*/

[data-value$="9:00"]::after{ /*start hour, as shown in the unmodified Appointment widget*/

 content: "\00a0- 12:00"; /*end hour, don't modify the \00a0-*/

}



[data-value$="10:00"]::after{ /*start hour, as shown in the unmodified Appointment widget*/

 content: "\00a0- 13:00"; /*end hour, don't modify the \00a0-*/

}



[data-value$="11:00"]::after{ /*start hour, as shown in the unmodified Appointment widget*/

 content: "\00a0- 14:00"; /*end hour, don't modify the \00a0-*/

}

[data-value$="12:00"]::after{ /*start hour, as shown in the unmodified Appointment widget*/

 content: "\00a0- 15:00"; /*end hour, don't modify the \00a0-*/

}



[data-value$="13:00"]::after{ /*start hour, as shown in the unmodified Appointment widget*/

 content: "\00a0- 16:00"; /*end hour, don't modify the \00a0-*/

}

[data-value$="14:00"]::after{ /*start hour, as shown in the unmodified Appointment widget*/

 content: "\00a0- 17:00"; /*end hour, don't modify the \00a0-*/

}



[data-value$="15:00"]::after{ /*start hour, as shown in the unmodified Appointment widget*/

 content: "\00a0- 18:00"; /*end hour, don't modify the \00a0-*/

}

[data-value$="17:00"]::after{ /*start hour, as shown in the unmodified Appointment widget*/

 content: "\00a0- 19:00"; /*end hour, don't modify the \00a0-*/

}

[data-value$="9:00"]::after{ /*start hour, as shown in the unmodified Appointment widget*/

 content: "\00a0- 20:00"; /*end hour, don't modify the \00a0-*/

}

[data-value$="18:00"]::after{ /*start hour, as shown in the unmodified Appointment widget*/

 content: "\00a0- 21:00"; /*end hour, don't modify the \00a0-*/

}

[data-value$="19:00"]::after{ /*start hour, as shown in the unmodified Appointment widget*/

 content: "\00a0- 22:00"; /*end hour, don't modify the \00a0-*/

}

[data-value$="20:00"]::after{ /*start hour, as shown in the unmodified Appointment widget*/

 content: "\00a0- 23:00"; /*end hour, don't modify the \00a0-*/

}

[data-value$="21:00"]::after{ /*start hour, as shown in the unmodified Appointment widget*/

 content: "\00a0- 24:00"; /*end hour, don't modify the \00a0-*/

}

/*end copying*/

And here's how to inject the CSS code into your form:

1. Open the Form Builder.
2. Click on the Paint Roller icon.
3. Go to the Styles tab.
4. Paste the code into the Inject Custom CSS field.

Please contact us back if you need further assistance.

This is beyond helpful. The proposed solution is working good and looking sharp. You guys should also update the users looking for similar fix. Great job @Niko and @Christian and the rest of the support group. Always quick response, and sometimes even in my native language. Thanks alot.

Hello Linus Bergström,

We're happy to hear that the workaround provided by our colleagues works perfectly for you.

Reach out again if you have any other questions.