how to change the calendar style

  • This topic has 5 replies, 2 voices, and was last updated 1 week, 5 days ago by Andre Flores.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #714789
    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,


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

    • This topic was modified 2 years, 2 months ago by BNBB Services.
    • This topic was modified 2 years, 2 months ago by BNBB Services.
    • This topic was modified 2 years, 2 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,


    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.


Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.