how to change the size of the calendar to make it smaller (heigth& width)

Hello,

You can add the calendar in a contain to reduce the size. In editor add:

<div style="width: 300px;">[dopbs]</div>

The height can’t be changed.

Thank you

Hi DotonPAper.
I really appreciate your quick answer.
It works, but the pb is that it affects both the calendar and the input date fields. Hence the input fields are moved to the bottom of the calendar when you squeeze the width.
Is there a specific CSS element that could target the calendar width and the input field area width (i ‘ve already found in the css
id=”DOPBookingSystem_CheckIn1″ but it would only affect the width of every single input field and not the block that contains it i guess).
TIA for your answer.
Best regards,
Didier

Hi again.
I found a solution for the Calendar to be displayed smaller.
I change the following in the CSS:

/* for the navigation header of the calendar
*/
.DOPBookingSystem_Navigation{
width: 400px !important;
}
/* for the calendar */
.DOPBookingSystem_Calendar{
width: 400px !important;
}
Merci!!!

Hello,

I’m glad you found a solution, because I see I misunderstood your question ??

Thank you