how to change the calendar style

[BNBB Services]

I have searched the forum for ways to change the look and feel of the hotel booking plugin. In on of the threats it states that the plugin is depending on the style of your WordPress theme. But…..

I use Enfold as WordPress theme and the calendar shown in the element datapicker of the shortcode mphb_availability doesn’t match the theme calendar as shown in a simple contact form.

Below is a screenshot of a page containing 4 types of forms.

On the upper left I’ve build a simple contactform using the avia layout builder.
On the upper right there is a mphb_availability form (without cass assigned).
On the lower left corner I’ve build a mphb_availability form using the code mphb_availability id=”493″ class=”avia_datepicker text_input hasDatepicker”. The class was copied from the source of the simple contact form.
On the lower right corner I’ve made a form using: mphb_availability id=”493″ class=”avia_ajax_form av-form-labels-visible avia-builder-el-1 avia-builder-el-no-sibling ”.

Somehow I can change the way the calendar looks. Can you opint me in the right direction?

ps: I will build a second reply containing login cridentials for you to see the website. as the website is now blocked for anonimous visitors.

Best regards,

Bart

PS: The template mode in the Accomodation setting is set to “theme mode”, not “developer mode”.

• This topic was modified 5 years, 7 months ago by BNBB Services.
• This topic was modified 5 years, 7 months ago by BNBB Services.
• This topic was modified 5 years, 7 months ago by BNBB Services.

[BNBB Services]

This reply has been marked as private.

[Stacy Lind]

Hi Bart,

Calendars are the only element that comes with our styles. You can change its style in Accommodation > Settings.
In your case, the calendars can be fixed by adding the following to Appearance > Customize > Additional CSS.

.mphb-datepick-popup .datepick-month-year:first-child {
	width: 60% !important;
}
.mphb-datepick-popup .datepick-month-year {
	width: 40% !important;
	margin: 0px !important;
	padding: 0px 6px !important;
}
.mphb-datepick-popup .datepick-month-header {
	height: 2.5em !important;
}

.mphb-datepick-popup .datepick-month.first .datepick-month-header {
	display: flex;
	flex-direction: row;
}

[BNBB Services]

Hi Stacy,

At first I thought it didn’t change a thing. But then I noticed the layout of the calendar was changed.
Thanks for that.

This problem is solved.
Now I am going to see if I can change the calendar into the enfold style. But that is out of the scope of this forum.

Thanks again.

Best regards,

Bart

[Zvonimir Matutinovic]

Hi Stacy,

I would like to change the width of my calendar that is shown to the customer. Availability calendar. Would like to add a custom css, but I am not familiar with the css. Could you advise?

[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

[Diana Roberts]

How can I change the blocking color on the calendar and also change it to show Saturday to Saturday.

[Andre Flores]

Hello Diana,

It depends on the calendar theme you are using, get back to us with the URL to example page, so I provide you with valid CSS code.
As for the showing the calendar Saturday to Saturday, I am afraid I did not quite get your point, kindly clarify what exactly you mean.

Regards,
Andre

[Jamie Dimelow]

Hi Andre,

Further from a post above. Is it possible to change the colour of the boxes behind the weekend dates within the calendar? This way the weekends and the weekdays match with the same colour rather than just being a white background.

I am not referring to the display options in settings as this doesn’t make a difference.

I would attach an image but I am not sure how too.

Thanks,
Jamie

[Valeriia Bavykina]

Hi Jamie!

Please add the following code under Appearance -> Customize -> Additional CSS:

.mphb-available-date.datepick-weekend {
    background: #XXXXXX !important;
}

Replace #XXXXXX with desired colors.

This is how it will look like: https://prnt.sc/QW6T-45ni8wL

[Author]

Posts