Calendar Pop up

[Barbie]

I want the calendar popup on a sumbission form to be twice the size it is right now. It is very small. 

[Kuroshi]

Hi,

You may try pasting this in the header:

<style>
div[id*="CalendarToolBox"]{
width:400px !important;
height: 200px !important;
}

</style>

Hope this helps.

[SunakoChan]

Hi @Barbie,- Just to add you may tried to add the custom code on your style. Just got to STYLE > SOURCE > USER DEFINE.  Just paste the code without the style tag <Style> </style>.

[Kuroshi]

That's right, @SunakoChan you may also refer to this article regarding styles for you to be able to learn more about it: https://howto.caspio.com/styles/

[Pinku12]

Hope this CSS Style Code is Useful for you for getting the Calendar popup,

<style>
div[id*="CalendarToolBox"]{
width:400px !important;
height: 200px !important;
}

</style>

Regards,

Pinku Jain

Edited November 6, 2019 by Vitalikssssss
Spam link removed

[kcastagnaro]

Hi all, this isn't working for me. And my calendar pop up doesn't display quite right. The up/down arrows next to the year actually cover the last digit of the year. Any help would be appreciated.

 

[TellMeWhy]

58 minutes ago, kcastagnaro said:

Hi all, this isn't working for me. And my calendar pop up doesn't display quite right. The up/down arrows next to the year actually cover the last digit of the year. Any help would be appreciated.

 

I think it's more complicated now. You can try this one

<style>
.flatpickr-calendar{
width:600px;

}

.flatpickr-innerContainer{
height:350px
}

.dayContainer{
grid-gap: 20px 0;
}

</style>

First one is width of the whole 'box'

second one is the height of the DAY container, it does not include the day labels, month/year, and the section on the bottom

Third one is to adjust the gaps between each DAY so they fill the empty space created by adjusting the height.

 

[kcastagnaro]

Thank you for responding. I do appreciate it. 

 

 This is what I got. I wonder how to drill down to the year field. 

[TellMeWhy]

On 4/23/2021 at 4:17 PM, kcastagnaro said:

Thank you for responding. I do appreciate it. 

 

 This is what I got. I wonder how to drill down to the year field. 

That's strange, can you send your URL for this DataPage? It should be the same for everyone since it's a customized CSS, do you have other styles that can affect this?

[kcastagnaro]

Darn! I wish I could. But it's a medical website and we have confidential patient information in there. How else can I help you help me? (Sheepish smile).

 

I don't think I have any other CSS that would affect this. Certainly not in the user-defined styles. But I could send the CSS?

[TellMeWhy]

4 hours ago, kcastagnaro said:

Darn! I wish I could. But it's a medical website and we have confidential patient information in there. How else can I help you help me? (Sheepish smile).

 

I don't think I have any other CSS that would affect this. Certainly not in the user-defined styles. But I could send the CSS?

I see, what I could suggest is if you could replicate the issue on a test DataPage, literally just the calendar with a test table as well, if you can replicate it there, then all the better

[kcastagnaro]

Hi! I was actually able to figure it out. I had to customize the following in my CSS. It was 14px. Thank you so much for your help!

 

div.numInputWrapper span {
    position: absolute;
    right: 0;
    width: 2px;
    height: 50%;
    line-height: 50%;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

[Meekeee]

Hi everyone - Just wanted to share this solution. If you want to save the date in your Calendar or download it as a .ics file. You may use an external JS library called Add-to-Calendar Button:
https://jekuer.github.io/add-to-calendar-button/
https://github.com/jekuer/add-to-calendar-button

[Meekeee]

Hi - Good news! Caspio has a new Tech tip called Downloading Appointments to Calendars Using ICS Files. To know more on how to implement it in the DataPage, you can check it here: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/download-appointments-to-calendars-using-ics-files/