HI, looking to create a simple calendar on my application form.

basse34

Asked on February 25, 2016 at 7:17 PM

I don’t need this calendar to integrate, or anything fancy. The applicant filling out my form needs to simply check, mark, or highlight several dates that they can work for me. Is there a way to create a calendar like this? Once the applicant submits their form I want to be able to see what dates they checked or marked. Also,
is there a css code that i can inject to make more than 3 horizontal columns for the radio buttons? Please let me know, I’ve become stuck on this.

Page URL: http://bassesfarms.com/employment/
Chriistian Jotform Support

Replied on February 25, 2016 at 11:00 PM

A possible widget you can use is the Date Reservation widget, which allows a user to select several dates that they want to reserve. However, once the dates have been selected, other users will not be able to select the dates previously selected.

http://widgets.jotform.com/widget/date_reservation

Another widget you can use would be the Date Picker widget. However, this widget only allows the user to select one date so if you have multiple dates in mind, you will need to add several of this widget in your form.

http://widgets.jotform.com/widget/date_picker

If you want the user to be able to add several dates dynamically, then the best option for your form is the configurable list. Although it doesn't display a calendar, a user can select the dates and add more fields by clicking the "+" or "Add More" button.

http://widgets.jotform.com/widget/configurable_list

Here's a demo form of all the widgets: https://form.jotform.com/60558215974968

You can also clone it to your account by following this guide: How To Clone A Form

To add a widget to a form, simply follow this guide: How to Add a Widget to your Form

As for your question regarding the css, I have moved it to a new thread so we can assist you better. Here's the link to that thread: http://www.jotform.com/answers/781937
basse34

Replied on February 25, 2016 at 11:43 PM

Thanks for the response, I went a slightly different route using check boxes. I used these check boxes and assigned them dates. I also injected a css to reduce the space between each check box so I could squeeze in 7 columns.

Now I have an issue where on the form builder page everything works and looks as it should. Then when I preview my form and it is live, then everything changes and is messed up. I can’t figure out why. I took some screen shots to show you.
Chriistian Jotform Support

Replied on February 26, 2016 at 12:57 AM

You can inject the css below to make the columns appear properly.

span.form-checkbox-item {

width: 100px!important;

}

Here's how: How to Inject Custom CSS Codes

Do let us know if you need further assistance.

basse34

Replied on February 26, 2016 at 1:28 AM

That fixed the issue with my screen shot area, but now the rest of my form is effected. I tried copying the field id

#input_39_0, #input_39_1, #input_39_2, #input_39_3, #input_39_4, #input_39_5, #input_39_6, #input_39_7, #input_39_8, #input_39_9, #input_39_10, #input_39_11, #input_39_12, #input_39_13, #input_39_14, #input_39_15, #input_39_16, #input_39_17, #input_39_18, #input_39_19, #input_39_20, #input_39_21, #input_39_22, #input_39_23, #input_39_24, #input_39_25, #input_39_26, #input_39_27, #input_39_28, #input_39_29, #input_39_30, #input_39_31, #input_39_32

though putting this took everything back to my initial problem you just helped me with...I know there is a way to target this field, but I can’t get it..

Chriistian Jotform Support

Replied on February 26, 2016 at 2:46 AM

You can try injecting this css code instead:

#cid_39 span.form-checkbox-item {

width: 100px!Important;

}

By adding #cid_39, the css only affects the checkboxes under the div #cid_39.

URL of cloned form: https://form.jotform.com/60560469127962