Small fonts on Bootstrap DateTime picker

Question

I´m using the Bootstrap 3 DateTime picker from www.github.com/Eonasdan/bootstrap-datetimepicker

Everything is working fine, except that I need to use small fonts and less spacing between the calendar grid lines.

Does anyone has an idea on how to do it. This is the original code:

<div class="small">
    <div id="myPlaceholder"></div>
</div>

And on Javascript:

 $('#myPlaceholder').datetimepicker({
                language : 'en'
            });

It works well, but does not show small fonts.

Answer 1

You only need to add your own CSS to style the date picker.

This will make the columns narrower:

.bootstrap-datetimepicker-widget td.day {
    width: 200px;
}

This will make the rows shorter:

.bootstrap-datetimepicker-widget td.day {
    line-height: 10px;
}

This makes the font smaller for the day numbers:

.bootstrap-datetimepicker-widget td.day {
    font-size: 10px;
}

And combining them all:

.bootstrap-datetimepicker-widget td.day {
    width: 200px;
    line-height: 10px;
    font-size: 10px;
}

And as a bonus, this will make the font size of the day of week smaller:

th.dow {
    font-size: 12px;
}