Can I customize Calander numbers ?

  • Profile Image
    aureliasar
    Asked on August 28, 2020 at 07:55 AM

    Hello Jotform Team !

    Just a question : Is it possible to put the available dates in the calendar with another color or bold to make them more visible ?

    Many thanks in advance for your help.

    Regards, 

    Aurélia Sar

  • Profile Image
    Krishna_D
    Answered on August 28, 2020 at 09:39 AM

    Let me check the issue and contact you soon, Please be in touch.

  • Profile Image
    Krishna_D
    Answered on August 28, 2020 at 09:54 AM

    Try adding this Custom CSS code in your form and let us know if it works or not.

    https://www.jotform.com/help/108-Adding-Custom-CSS-in-JotForm 

    div#calendar_8.calendar.popup>table>tbody>tr.days>td:nth-child(2) {

        color : red;

        font-weight: 4px;

        background: yellow

    }


    div#calendar_8.calendar.popup>table>tbody>tr.days>td:nth-child(4) {

        color : red;

        font-weight: 4px;

        background-color:yellow

    }

    Help us with a form link to inspect furthermore if the design is not implemented.


  • Profile Image
    aureliasar
    Answered on August 28, 2020 at 12:28 PM

    Thank you for your help !
    I add this custom CSS code in my form butit seems that it does not working..
    https://eu.jotform.com/build/201607696173055#preview
    click on "Votre salle" and choose the first one (KEEP COOL) then the
    calendar will appear. Only tuesday and thursday are available but as you
    will see, these dates are not very visible...
    Thank you if you can help me !
    Regards,
    Aurélia

  • Profile Image
    BDAVID
    Answered on August 28, 2020 at 01:27 PM

    Hi, please try injecting this code to make the available dates bold: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    div.calendar tr.days td {

        font-weight: bold !important;

        color: black;

    }

    div.calendar tr.days td.unselectable {

    opacity: 0.3 !important;

    }

    Result: https://form.jotform.com/202405608620951

    119156_color.png

    The code will affect all calendar fields in your form. If you want to apply it for one of the two calendars, please let us know.

  • Profile Image
    aureliasar
    Answered on August 28, 2020 at 02:28 PM

    Hi !
    Thank you so much !! it is perfect now !!
    Many thanks !
    Best regards