如何摆脱fullCalendar滚动？

Question

我包裹了<div id="calendar"></div>区域。

如下：

<div id="calendarContainer">
  <div id="calendar"></div>
</div>

之后，我将#calendarContainer的宽度和高度修改为500px x 500px。

从现在开始，我将解释我想用图片做什么。

我想改变上面的图片，如下所示。

如何修复css？

我想尽可能地删除侧面滚动。

p.s）我做了以下工作。结果，滚动消失了，但是热量被打破了。

.fc-scroller { overflow-y: hidden !important; }

Answer 1

It's a little hacky but maybe is the best you can achieve. The idea is to override the styles.

$('#calendar').fullCalendar();

#calendarContainer {
  width: 500px;
  height: 500px;
}

.fc-scroller {
  height: auto !important;
}

.fc-head .fc-widget-header {
  margin-right: 0 !important;
}

.fc-scroller {
  overflow: visible !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.min.js"></script>

<div id="calendarContainer">
  <div id="calendar"></div>
</div>

Answer 2

我解决了这个问题。

删除.fc-scroller {overflow-y: hidden! important; }

并添加了代码。

body 
{
  margin: 40px 10px;
  padding: 0;
  font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
  font-size: 14px;
}

这是非常好的工作。