Question

我在Wordpress中使用Jquery FullCalendar，并且看起来简单的CSS更改字体大小正在打破布局。

如果我用这个增加字体：

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

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

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

Answer 1

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

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

身高的使用示例：

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

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

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

查看FullCalendar Documentation。

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

Answer 2

只需添加两个属性

  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>");
                }
        },

Answer 3

只需编写下面的代码，就会增加导航按钮文字大小的文字大小。

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

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

3 个答案: