Javascript 如何调整FullCalendar中文本框的大小以容纳更多文本_Javascript_Html_Css_Fullcalendar_Fullcalendar 4

Javascript 如何调整FullCalendar中文本框的大小以容纳更多文本

javascript html css fullcalendar

Javascript 如何调整FullCalendar中文本框的大小以容纳更多文本,javascript,html,css,fullcalendar,fullcalendar-4,Javascript,Html,Css,Fullcalendar,Fullcalendar 4,下面是生成fullcalendar的代码，它基于fullcalendar示例中包含的模板，并进行了一些修改从'@fullcalendar/core'导入{Calendar}；从“@fullcalendar/googlecalendar”导入googleCalendarPlugin；从“@fullcalendar/interaction”导入interactionPlugin；从“@fullcalendar/daygrid”导入dayGridPlugin；从“@fullcalendar/

下面是生成fullcalendar的代码，它基于fullcalendar示例中包含的模板，并进行了一些修改

从'@fullcalendar/core'导入{Calendar}；
从“@fullcalendar/googlecalendar”导入googleCalendarPlugin；
从“@fullcalendar/interaction”导入interactionPlugin；
从“@fullcalendar/daygrid”导入dayGridPlugin；
从“@fullcalendar/timegrid”导入timeGridPlugin；
从“@fullcalendar/list”导入listPlugin；
从“Bootstrap/dist/css/Bootstrap.min.css”导入引导程序；//eslint禁用行无未使用的变量
require（'bootstrap/dist/js/bootstrap.min.js'）；
从“引导盒”导入引导盒；
需要（'./styles/core/main.min.css'）；
需要（'./styles/daygrid/main.min.css'）；
要求（'./styles/list/main.min.css'）；
需要（'./styles/timegrid/main.min.css'）；
var calendarEl=document.getElementById（'calendar'）；
如果（日历）{
document.addEventListener（'DOMContentLoaded'，function（）{
var calendarEl=document.getElementById（'calendar'）；
var calendar=新日历（calendarEl{
事件单击：函数（信息）{
if（info.event.extendedProps.description）{
bootbox.alert（'Event:'+info.Event.title+'
'+'说明：'+info.Event.extendedProps.Description'）；
}
否则{
bootbox.alert（'Event:'+info.Event.title+'
'+'说明：'+'无'）；
}
info.jsEvent.preventDefault（）；//不要让浏览器导航
},
插件：[interactionPlugin，dayGridPlugin，timeGridPlugin，listPlugin，googleCalendarPlugin]，
contentHeight:“自动”，
googleCalendarApiKey：“修订版”，
标题：{
左：“上一个，下一个”，
中心：'标题'，
右图：“dayGridMonth、timeGridWeek、listWeek”
},
//默认日期：“2018-01-12”，
navLinks:true，//可以单击日/周名称来导航视图
是的，
eventLimit:true，//当事件太多时允许“更多”链接
活动：{
谷歌日历ID:'l1rnqsakc8kb0lbmo2ll3ag5v0@group.calendar.google.com'
}
});
calendar.render（）；
});
}

以下是calendar.html：

<!DOCTYPE html>
<html>
<head>

<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
  body {
    margin: 40px 10px;
    padding: 0;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 16px;
  }
  #calendar {
    max-width: 600px;
    margin: 0 auto;
  }
  .fc-day-grid-event > .fc-content {
    white-space: normal;
}
</style>
</head>
<body>

  <br>
  <div class="container">
    <div id='calendar'></div>
  </div>
</body>
</html>


身体{
利润率：40像素10像素；
填充：0；
字体系列：Arial、Helvetica Neue、Helvetica、无衬线字体；
字体大小：16px；
}
#历法{
最大宽度：600px；
保证金：0自动；
}
.fc日网格事件>.fc内容{
空白：正常；
}

我已经知道了如何通过修改css来删除“不换行”属性，从而在日历中允许每个方块有多行，但我不知道如何确保方块自动展开以适应添加的新文本。如果有人熟悉fullcalendar，将不胜感激

我在这里找到了一个我试图实现的示例：但我不确定我的代码与该示例有何不同

请提供您的HTML+CSS，没有它们我们无法提出很多建议！谢谢你的提醒，我完全忘记了——对不起，请检查一下——据我所知，高度属性适用于整个日历，因此即使我确实增加了高度，这也无助于解决我的问题。我感兴趣的是增加充满文本的特定行的高度，而不是让每一行都是与整个日历的高度成比例的静态高度。plunkr使用的是fullCalendar的古老版本，这是主要区别。但是没有明显的理由说明为什么使用额外CSS的版本4会表现不一样。演示：。也许还有一些你没有向我们展示的其他差异，或者与你活动的实际内容相关的东西导致了它。很难知道，我们没有完整的情况。