fullCalendar Font size | 易学教程

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.

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.

Add the 'theme' setting in FullCalendar.

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

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

For future reference:

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

I could solve that problem with the following

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

try and use !important which is a CSS rule to obey that rule and ignore others.

e.g: in CSS:

.calendar{font-size: 12px !important:}

in jQuery:

$('.calendar').css('font-size','12px !important');

Change general font size (fullcalendar.css) except Modals , addevent and edit event

body .fc { 
   font-size: 1.5em;  <--- change here for general 
}

I have found the cause, not sure why this is causing the issue but when I didn't declare the document type as

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

it wouldn't change the font size.

Thanks

来源：https://stackoverflow.com/questions/2565799/fullcalendar-font-size

标签