How to add a Calendar without the option to select time?

Hi,

Looking to create a form with a calendar on there for people to choose the date, but I do not want them to choose a time on there can you please help me with that?

Thank you!

Hi Molly,

Thanks for reaching out to Jotform Support. I suggest using a Date Picker Element, using Date Picker the end user will only able to select a date on your form. When I checked your Car Cleaning 2025, it seems that you already have Date Picker Element. You can also add it to your other forms, let me show you how:

1. In Form Builder, click on Add Element on the upper-left side of the page.

2. Under the Basic tab, click on the Date Picker element.

I also suggest checking Date Picker Widget and Birth Date Picker Widget.

Give it a try and reach out again if you have any other questions.

Under date picker can I choose a maximum amount of people to select that day?

Hi Molly,

It is not possible to limit of the maximum amount of people that can select a day. I suggest using a Weekly Appointment Planner widget, using this you can limit the amount of the day that can be selected. Here's how to do it:

1. In Form Builder, click on the Add Form Element menu on the left side of the page.

2. Click on the Widgets tab, search for the Weekly Appointment Planner widget and add it to your form.

3. In the menu on the right, under General tab, you can adjust the count by adding number with curly brackets. (example: {10})

4. Once done, click on Update button.

Keep us updated and let us know if you need any more help.

Need it for 2 weeks so that wont work to just do monday-Thursday. need calander with dates etc

Hi Molly,

I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

Thanks for your patience and understanding, we appreciate it.

Hi Molly,

It isn't possible to limit the date that can be selected in the Date Picker element. If you want to limit the maximum amount of people that can select a particular date, then I suggest using the Appointment element. The Appointment element has a time slot, but you can edit the slot duration time or add your preferred time slot. Also, you can select Monday-Thursday on your calendar to be available. Additionally, you can limit the number of appointments for each day. Let me show you how:

Adding the Appointment element:

1. In Form Builder, click on Add Element. 

2. Under Basic tab, click the Appointment element.

After the adding the Appointment element, you can now select the days you want to show in the calendar and limit the number of appointments for each day. Here's how to do it:

1. In Form Builder, click on the Appointment field, and click on the Gear icon to open Appointment Properties. 

2. In the Availability tab, under Appointment Slot Duration, you can select or customize the length of each appointment slot.

3. Then, under Intervals, unchecked the Checkboxes that you don't want to be selected in the calendar.

4. In Limits tab, scroll down and under Maximum Appointments Per Day, input the number of the limits appointments for each day.

That's it. All changes are automatically saved.

Give it a try and reach out again if you have any other questions.

That has to be with the time slot as well? Theres no way to have just calendar with selected dates and have it maximized to certain amount of people to select that date?

Hi Molly,

Unfortunately, the closest that we can achieve your requirements but as a workaround, we can hide the time slots by injecting a Custom CSS code. But, from my test, the user can submit the same day multiple times. It seems that without selecting time slots in the Appointment element, the Maximum Appointment Per Day won't work. If you still want to hide the time slots, let me show you how:

1. First, copy the CSS code below:

.appointmentDates {     display : none!important; }

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Check out my screenshot below to see my result:

Another workaround is to add a Date Picker element and a Weekly Appointment Picker widget. We also need to set a Show/Hide field condition. Here's how:

1. Open your form in Form Builder and click on Add Element on the upper-left side of the screen.

2. Under the Basic tab, scroll down to the Date Picker element and click on it to add it to your form.

3. Then go to Widgets tab, and search for Weekly Appointment Planner widget and click on it to add it to your form.

After adding it, we will now set up a condition. Here's how to do it:

1. In Form Builder, in the orange navigation bar at the top of the page, click on Settings.

2. Click on Conditions on the left of the page.

3. Select Show/Hide field condition.

4. Set the condition like you see below and click on Save.

After that, if the user or customer selected any date in the Date Picker element, the available slots for that day will show up. Here's a screencast on how it should work:

As you can see, if you click or select on the Date Picker element it will show the available slots. You can check my demo form here. We also have a guide on how to clone a form here.

Give it a try and let us know if you need any other help.