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
    Posts
  • #714789
    BNBB Services
    Participant

    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 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.
    #714798
    BNBB Services
    Participant
    This reply has been marked as private.
    #714905
    Stacy Lind
    Keymaster

    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;
    }
    #714979
    BNBB Services
    Participant

    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

    #1031412
    Zvonimir Matutinovic
    Participant

    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?

    #1032199
    Andre Flores
    Moderator

    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

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