Increase font size of date picker calendar pop up on a specific page

0
Hi! I am using the standard date picker on multiple pages in my project. On one specific page I want to increase the font size. I managed to increase the font size of the label, text, and button. What I would like to know is how I can increase the font size of the pop up calendar on only this page? Thanks for answering! Best regards, Jeroen
asked
2 answers
0

Hi Jeroen,

If you have the css changes you need, put them in a specific class. You can set this class on the page, or a surrounding div/layoutGrid or anu other element.

.page-bigDatepicker {
     .mx-dateinput-input{
         **your css**
     }
}

This way it is only effective on pages with this custom class.

If you do not know how to add classes using SASS, you can check out this blog (old, but still valid): https://www.mxblog.nl/2016/03/using-sass-with-mendix/

or the Mendix reference guide: https://docs.mendix.com/howto/ux/style-with-gulp-and-sass

answered
0

Hi Jeroen,

I don't think there is an easy way to accomplish this. I didn't have much luck with using the style html tag with the html snippet widget, but I'm sure you could use javascript to apply a custom class to the datepicker menu div when its rendered.

Another alternative would to modify one of the datepicker widgets in the appstore. I was able to change the font size on the bootstrap datepicker widget pretty easily.

It ended up looking like this.

 

To do this, I downloaded the widget into my project. 

https://appstore.home.mendix.com/link/app/1799/FlowFabric-BV/Bootstrap-Datepicker

 

Went to the widgets folder, and used 7zip to extract the widget into a folder. Then I navigated through the folders to get to the css file.

\BootstrapDatepicker\BootstrapDatepicker\widget\ui

and clicked on the file called "bootstrap-datepicker3" (there are two files in this folder and the widget uses the file with the number 3 in the name).

 

I opened the file up in a text editor and made a change to the class called datepicker and just added "font-size: 30px !important". You can also change the styling of any other part of the widget in this file. 

 

Then I went back to the widget folder and used 7zip to open archive on the .mpk file, and in the archive I navigated back to the ui folder and dragged in my edited bootstrap-datepicker3 file and replaced the original file.

Then you can rerun your project and see your changes (clean deployment directory to be safe). 

Just a heads up, if you update this widget in the future, all of your customizations will be wiped out, so keep a copy somewhere. 

 

Hope this helps!

answered