fullCalendar Font size

Question

I am having issues setting the calendar font sizes to be smaller.

I have changed setting a container div font size, no effect.

I have also changed the fullCalender.css font from 1em to 0.5em and to a px size but the calendar text stays the same.

Solution 1

For future reference:

.fc-title{
    font-size: .9em;
}

Solution 2

I could solve that problem with the following

::ng-deep body .fc {
  font-size: 12px;

Solution 3

1. Add the 'theme' setting in FullCalendar.

   $('#calendar').fullCalendar({
     theme: true
   });
   

2. Add your Custom themed CSS by editing the FullCalendar provided CSS file, http://arshaw.com/js/fullcalendar-1.6.1/demos/cupertino/theme.css

Note: Demo is here http://arshaw.com/js/fullcalendar-1.6.1/demos/theme.html

Solution 4

This is quite the blast from the past, but I originally found this looking for a solution.

I just wanted to change the font size of the elements in the table (date headers, time sidebar). The following worked for me:

th.ui-widget-header {
    font-size: 9pt;
    font-family: Verdana, Arial, Sans-Serif;
}

I used opera dragonfly to find the element class (CTRL+SHIFT+i -> Hover over element), but any DOM inspector should do.

View more solutions

Comments

[Admin]

Thanks for the response, I tried that but no effect. I tried it on the calendar div as well as the calendar container. I even tried to use the !important and replace the 1em font-size in the fullcalendar.css and no change. This is very strange....

[Velimir Tchatchevsky]

better use .fc-event, .fc-event-dot so you can take care of the background too

[smoczyna]

After all of these years this is the only solution which really works for me (Angular8). However I suggest to use this instead of fixed size: font-size: 0.75em;