Is there a way to enlarge DateTime popup Calendar?

Hi... I'm wondering if there's CSS for increasing the size of the pop-up Calendar for the DateTime picker while using Lite-Mode?

When using on a smart-phone / mobile, the calendar is a little small for being able to tap the preferred date.

I'd say it should render at about 50% larger than it does currently.

Is that possible?

Thanks.

Yes there is, to increase please paste the below CSS in your Custom CSS field:

.calendar.popup {

width:250px;

height200px;

}

.calendar table {

width:250px;

height200px;

}

You can adjust width and height as you wish, just make sure that they are the same for table and for popup class.

If you have any further questions please let us know.

Thank you!

Thanks for the rapid response! Greatly appreciated.

One last question on the calendar adjustment(s)....

How would I then change the text size? I tried adding/applying font-size attribute into the prev css you provided but that didn't work.  I'm looking to enlarge both the month/year title bar as well as the day of the week row and each of the dates.

Thanks again, y'alls assistance is a HUGE help!

Also... just discovered, making the CSS adjustment causes a shadowed box / ghost box to remain behind. In trying this on other forms, I've found that the ghost box also blocks any underlying input fields.  Any way to remove that?

If you want to increase the font size of the calendar, inject the following code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

div.calendar td, div.calendar th {

    font-size: 20px;

}

Result:

Could you please share a screenshot of the shadowed box you are referring to? https://www.jotform.com/answers/414264-How-to-include-screenshot-image-in-the-support-forum 

Also, indicate the form you are referring to, we will be glad to assist you.

Thanks for help with the code.  As for the ghost / shadow box, I should clarify.

In my DateTime Options settings, I have Calendar Pop-Up toggled to "ON" in order to "Display a date picker when interacting with the field". 

If you click the tiny calendar icon, the calendar-popup renders and disappears properly as your test revealed.

If you click into the actual input field as if you were going to type in the date, the calendar pops up BUT then once you've selected a date, the form is left with a shadowed, transparent (ghost) box that layers over all other inputs.... preventing interaction with subsequent questions / fiil-ins.

And before I forget ... ALSO

Remove the following injected code from your form: https://form.jotform.com/61794097469170 

.calendar.popup {

width:250px;

height:200px;

}

You can test my cloned version: https://form.jotform.com/63316269298971  

Your inquiry regarding the mobile view will be addressed on the following thread: https://www.jotform.com/answers/998461 

Thanks Much BDavid! I'm grateful for all your help today.

Welcome! Open a new thread if you need anything else. :-)