jquery fullcalendar 如何在不破坏布局的情况下增加字体大小或更改字体系列答案

【问题标题】：jquery fullcalendar How to increase the font size, or change the font family withoug breaking the layoutjquery fullcalendar 如何在不破坏布局的情况下增加字体大小或更改字体系列
【发布时间】：2014-02-12 23:56:56
【问题描述】：

我在 Wordpress 中使用 Jquery FullCalendar，似乎简单的 CSS 更改字体大小正在破坏布局。

如果我用这个增加字体：

.fc-event-inner {
font-size: 1.5em;
}

各个容器重叠并且看起来很糟糕。

如何在不破坏布局的情况下增加字体大小或使用不同的字体？

【问题讨论】：

标签： jquery css fullcalendar font-size font-family

【解决方案1】：

如果我的想法是正确的，首先你可以给固定的全日历设置一个高度，然后你可以调整字体大小和其他字体设置。

默认情况下，高度选项未设置，日历的高度由aspectRatio计算。

高度的用法示例：

$('#calendar').fullCalendar({
height: 650 });

您还可以像这样调整日历的 ContentHeight：

$('#calendar').fullCalendar({
contentHeight: 600 });

查看FullCalendar Documentation。

还有一个想法，您可以将主题应用到 fullCalendar 并根据需要更改 theme.css 中的样式。为此，请查看 Venkat 在fullCalendar Font size 中的回答。

【讨论】：

我正在使用一个主题，根据 Venkat 的答案减小字体大小确实有效，但是通过 css 增加字体大小会破坏布局。您能否进一步解释如何使用您的 javascript 选项？谢谢。

【解决方案2】：

只需编写以下代码，它将增加导航按钮文本大小的文本大小。

$('#calendar').css('font-size', '1.2em');

【讨论】：

【解决方案3】：

只需添加两个属性

  events: [
    {
      titleHtml: 'Ma Box',
      titleHtml_Size: '18px',
      start: '2018-05-22',
      end: '2018-06-26',
    }
  ]

并添加此功能：

$('#calendar').fullCalendar({           
        eventRender: function(event, eventElement) {
                if (event.titleHtml) {
                        eventElement.find("span.fc-title").prepend("<span style='font-size:"+event.titleHtml_Size+"'>" + event.titleHtml +"</span>");
                }
        },

【讨论】：