Calendar width

Hi I use the Date field, to show a calendar. How can i make that calender bigger? Please help someone. Thanks The page I need help with: [ log in to see the link] 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. Hi. I found a CSS solution to do this. But another question: I try a multistep form. Is it possible to step into the next fieldset, when i klick on the first fieldset. Or is it possible, to show the “next” button on the right side, and inside the border of the first fieldset? Thanks for response! 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. Hi Thanks a lot!!! Exactly what i am searching for. I see more and more what this Plugin Can do. My Clients will love it. Last Question, I promise: Is is possible to set a background image for every Page/Fieldset? Markus Schulz 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. Thank you sooo much!! You helped a lot. Thanks, you are really best! 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. Hi again. At first, i give a 5 Star review for you. I tried yesterday a long time and now i am sure, i can sell that all my clients. This Plugin does everything! But i need help please: I did the Calendar center, and height to 550px. This works, but the rows are stretched, and the last week is cut at the bottom. I think my code is not good. Do you have a idea how i can make the calendar to this size, with clean working code? Thanks for response! Link: https://afor.com/bokking-api-test/ 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. Wow! Thanks for that! ChatGpt gave me a ton of code for that, and it did not work good. This way is very clean and works perfekt. If you try the form, you will see that, after the calendar, i try to set times for scheduling. I think this is not the best way now. You have a idea what is the best way to show booking times? Forget it! Now i found the right field. Its the Date Timeslots field. i only want to center the timeslots under the calendar Hello @brandtmax To center them, you simply should enter: #fbuilder .timeslots-component {text-align:center;} Best regards. Ok thanks. Now the form is getting finished. Only at the last Page, i cant set a bg image. I used: fbuilder .pb2>fieldset{background:url(ttps://afor.com/wp-content/uploads/2026/01/bg0002.jpg);background-size:cover; border-radius: 5px;} The same as in pb1 and pb0. Can you tell me what i make wrong please? Link: https://afor.com/bokking-api-test/ Forget it. i forgot a letter. So now it works. is it possible, to make the calendar a bit transparency? Hello @brandtmax Yes, with CSS you can do everything: #fbuilder .ui-datepicker-inline{background: rgba(255, 255, 255, .2);} Best regards. Thanks! Wow, now look at this form. Very cool… The rest i try to learn by myself. Thanks for your awesome support! Now you get the best review from me. Should i name you in the review? If this is a good idea, tell me your name. Thanks!!! Hello @brandtmax , Thanks a lot! The plugin review is more than enough. Appreciate it.