更改全日历宽度

Question

我正在使用FullCalendar插件，我一直在寻找如何更改日历的宽度，但我不知道该怎么做。默认情况下，完整日历的宽度为 100%，但我想是 80%。我已经在 css 样式表中编辑了 fc.table 宽度，但最后一列保持变形。也许有人去过那里，所以如果你能帮助我，我会非常感谢你。

Answer 1

您可以将 css stles 应用于包含日历的div

<div id='calendar' style="width: 80%; display: inline-block;"></div> 

Answer 2

您应该将宽度设置为样式，并且不要忘记渲染它。

例如

loadInitialData() {
      const calendarApi = this.$refs.mcalendar.getApi();
      this.columns.forEach((column) => {
        calendarApi.addResource(column);
      });
      const calendarWidth = this.columns.length * 210;
      $('.multi-calendar .fc-timegrid').css('width', calendarWidth);
      this.events.forEach((event) => {
        calendarApi.addEvent(event);
      });
      calendarApi.render();
}

Answer 3

height作为选项，但width作为元素的样式。 示例：

<script src="https://unpkg.com/fullcalendar@5.1.0/main.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/fullcalendar@5.1.0/main.min.css" />
<div id="calendar" style="width: 700px;"></div>
<style>
</style>
<script>
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
      height: 550,
  });
  calendar.render();
</script>