Fullcalendar in Bootstrap Modal

Question

I’m using fullcalendar in the Bootstrap modal, but the colors of the day of the week turn white, but when I take the cursor off the site, the colors turn black. Look at:

When the cursor is inside the site area, the color turns white:

When the cursor has left the site area, for example put over the browser’s address bar, the font color turns black again:

I tried to change it directly in CSS, but it didn’t work, look:

#calendario{
  display:none;
}
.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
    float: right;
    color: #000;
}

.fc-unthemed thead,.fc-day-header, .fc-widget-header, span{
    color: black;
}

The jQuery is like that:

<script>
        $(document).ready(function() {
          $('#calendar').fullCalendar({
            height: 250,
            contentHeight: 273,
            editable: false,
            eventLimit: false,
            eventColor: '#dd6777',
            color: '#000'
          });
        });      
        $('#calendario').on('shown.bs.modal', function () {
        $("#calendar").fullCalendar('render');
        });

        $("#button").on("click",function(){
        $("#calendario").modal(open).show();;
        });
   </script>

Is there any way to fix this?

Answer 1

Use !important to force the property declaration (see this topic):

.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
    float: right;
    color: #000 !important;
}

.fc-unthemed thead,.fc-day-header, .fc-widget-header, span{
    color: black !important;
}

When using !important after the value of the property, it will prevent other style blocks from changing the property of the element, be it rules with more force or pseudo-classes (like :hover, for example).