pop up calendar styling issue

  • Profile Image
    Asked on August 05, 2019 at 12:48 AM

    I am having an issue with the pop up calendars on all of my date picker widgets.  They have a large blank space and some navigation buttons at the top of the calendar .  I have circled them in yellow.  1564980165cal.PNG

    I would like to remove the empty space and the oversized arrows.    I would like the calendar to look like this one below.

    1564980232cal2.PNG I would also like them to have the available dates highlighted more than this calendar has.   The dates of the 11-15 are the only ones that should be possible to select but it is hard to see that.   Can the available dates be made darker?  I would also like to be able to make the pop up larger than it currently is.

  • Profile Image
    Answered on August 05, 2019 at 02:31 AM

    I checked your form and see that you used some custom CSS. If you check the code, you can see that you used the "button" class name for styling your pop-up button down below. This style changes your buttons in the popup calendar. If you change your class name to something different like popUpButton, your calendar buttons will be fine.

    If you want dates in calendar to be darker, you can add this code to your CSS:

    div.calendar td:not(.unselectable) {

        font-weight: 800!important;


    If you need further assistance, please let us know.