Availability calendar – How to enlarge it?

  • This topic has 4 replies, 2 voices, and was last updated 1 week ago by Andre Flores.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1031403
    Zvonimir Matutinovic
    Participant

    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

    #1032198
    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

    #1032540
    Zvonimir Matutinovic
    Participant

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

    #1032653
    Zvonimir Matutinovic
    Participant

    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

    #1034404
    Andre Flores
    Moderator

    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

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