Availability calendar – How to enlarge it?

[Zvonimir Matutinovic]

Hi,

I want to style availability calendar. When I say stile it I mean enlarge it so it fits my page better.

I am currently using Astra theme.

Thank you

[Andre Flores]

Hello Zvonimir,

You may perform changes to the availability calendar via custom CSS, e.g. add the following code under Appearance ->Customize ->Additional CSS:

.single-room-calendar-wrapper .mphb-calendar .datepick-month {
	width: 300px !important;
}

Change 300px to any desired value to make months bigger.

Regards,
Andre

[Zvonimir Matutinovic]

Hi Andre, thanks for this but it didn’t help. Calendar remains the same.

[Zvonimir Matutinovic]

Hi,

I adjusted your code to following:

.mphb-calendar .datepick, .datepick-popup .datepick {
width: 1130px !important;
}

And managed to change calendar size.

Ofc 1130px was according to my needs. Anyone else who will use this could should use size that fits his need.

Cheers

[Andre Flores]

Hello Zvonimir,

Thank you for sharing your code, it is much appreciated. I hope it will be helpful to other users as well.

Regards,
Andre

[Author]

Posts