Calendar width

Hello @brandtmax

Thank you very much for using our plugin. I’ve visited your website and noticed that the calendar appears quite large, as shown in the screenshot below. How do you want to adjust its size?

Best regards.

Hello @brandtmax

I’m sorry, but I don’t fully understand what you mean by “step into the next fieldset when I click on the first fieldset.”

If you want to control navigation to the next page using your own buttons, you can simply insert a Button field and use the GOTOPAGE operation.
Please watch the following video for guidance:

https://resources.developers4web.com/cff/tmp/2026/01/15/video-next-page-button_o.mp4

In the video I inserted a button and entered the GOTOPAGE(1) operation as its onclick event. In the video, I inserted a button and added the GOTOPAGE(1) operation to its onclick event.
Note that I used 1 as the GOTOPAGE parameter because page indexes start at zero, so the second page has an index of 1.
Finally, I aligned the button to the right using its Advanced Settings.

Finally, to hide the default next page buttons, I entered the style definition below through the “Customize Form Design” attribute in the “Form Settings > Advanced Settings” tab:

#fbuilder .pbNext{display:none !important;}

Best regards.

Hello @brandtmax

Yes, of course, that’s possible. All pages have assigned the “pbreak” class name. Also, each page has assigned a unique class name: “pb0”, “pb1”, “pb2”, and so on.

So, if you want to assign a background image to the page fieldset, you can use:

#fbuilder .pbreak>fieldset{
background:url(https://www.yourwebsite.com/your-image-path/image.png);
background-size:cover;
}

Or, if you want to assign a different image to each page:

#fbuilder .pb0>fieldset{
background:url(https://www.yourwebsite.com/your-image-path/image1.png);
background-size:cover;
}

#fbuilder .pb1>fieldset{
background:url(https://www.yourwebsite.com/your-image-path/image2.png);
background-size:cover;
}

#fbuilder .pb3>fieldset{
background:url(https://www.yourwebsite.com/your-image-path/image3.png);
background-size:cover;
}

Please watch the following video:

https://resources.developers4web.com/cff/tmp/2026/01/15/video-background_o.mp4

Best regards.

Hello @brandtmax

If you have been satisfied with both the plugin and our support, we would be immensely grateful if you could leave us a review on the plugin ( https://wordpress.org/support/plugin/calculated-fields-form/reviews/ ). Your feedback will help us reach more users. 

Best regards. 

Hello @brandtmax

A mode to increase the table width and height (based on the context, like screen width) is to enter the style definition below through the “Customize Form Design” attribute in the “Form Settings > Advanced Settings” tab:

#fbuilder .datepicker-container,
#fbuilder .ui-datepicker-inline,
#fbuilder .ui-datepicker-inline .ui-datepicker-header,
#fbuilder .ui-datepicker-inline .ui-datepicker-calendar {width:100%; max-width:100%;}
#fbuilder .ui-datepicker-inline td *{text-align:center;}

@media (min-width:710px){
#fbuilder .ui-datepicker-inline td a,
#fbuilder .ui-datepicker-inline td span {padding:1em;display:block;}
#fbuilder .ui-datepicker-inline {font-size: 1.5em;}
}

By the way, if you don’t want to display the text page X from Y, I recommend hiding the legend as well. You can even hide the page’s border. Please watch the video:

https://resources.developers4web.com/cff/tmp/2026/01/16/video_o.mp4

Best regards.

Hello @brandtmax

Yes, with CSS you can do everything:

#fbuilder .ui-datepicker-inline{background: rgba(255, 255, 255, .2);}

Best regards.