Question

我完全无法调整FC（fullcalendar）的高度。我试图在一个div中安装一个FC，并希望FC完全填补div，但不要超出它。在初始化日历时，height属性似乎没有任何效果。然而，FC的宽度似乎适合其父div的宽度，此外，它相应地调整大小。但FC的高度却没有。这会创建一个不再可读的长而窄的FC。如何在保留其宽高比的同时调整FC大小以使其不会变得不可读？提前致谢

P.S：为了清楚起见，我已经阅读了文档，并尝试使用JQuery（以及通过css）动态设置FC的高度，但这没有用，我不明白为什么。

var newLayer = CAShapeLayer()
newLayer.path = shape.cgPath
view.layer.mask = newLayer
var rectToCrop: CGRect = shape.bounds
UIGraphicsBeginImageContext(view.frame.size)
//, NO, 0);
view.layer.render(inContext: UIGraphicsGetCurrentContext())
var image: UIImage? = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
newLayer.removeFromSuperlayer()
newLayer = nil
var imageRef: CGImageRef? = image?.cgImage.cropping(to: rectToCrop)
var croppedImage = UIImage(cgImage: imageRef!, scale: imgVPhoto.image.scale, orientation: imgVPhoto.image.imageOrientation)
CGImageRelease(imageRef)

$(document).ready(function() {

  //----------SCHEDULE INITs----------
  $('#schedule_1').fullCalendar({
    theme: false,
    // contentHeight: $('#scheduleDiv').height(),
    contentHeight: "auto",
    //height: "auto",
    defaultDate: '2000-01-03',
    defaultView: 'agendaWeek',
    columnFormat: 'dddd',
    allDaySlot: false,
    minTime: "07:00:00",
    maxTime: "21:00:00",
    navLinks: false,
    editable: false,
    eventLimit: true,
    header: false
  });


  $('#schedule_1').fullCalendar('option', 'height', 100); //Seems to have no effect...
});

html {
  position: relative;
  min-height: 100%;
}

body {
  background-color: #FCFDFE;
  min-height: 100%;
  margin-bottom: 60px;
  overflow-y: scroll;
}

Answer 1

由于contentHeight设置为＆＃34; auto＆＃34;。

$('#schedule_1').fullCalendar('option', 'height', 100); //Seems to have no effect...

因此它不会反映您尝试在上一行中设置的代码。

为了您的参考，我在下面给出了链接： https://jsfiddle.net/4cpn5b5v/

Answer 2

要解决高度的具体问题：您尝试将整个日历的高度设置为小于日历内容的自动计算高度。这在逻辑上是不可能的。

如果您将contentHeight选项设置为相同的值（或更少），那么它将根据需要缩小高度，如下所示：

＆＃13;

$(document).ready(function() {

  //----------SCHEDULE INITs----------
  $('#schedule_1').fullCalendar({
    theme: false,
    defaultDate: '2000-01-03',
    defaultView: 'agendaWeek',
    columnFormat: 'dddd',
    allDaySlot: false,
    minTime: "07:00:00",
    maxTime: "21:00:00",
    navLinks: false,
    editable: false,
    eventLimit: true,
    header: false,
    height: 100,
    contentHeight: 100
  });


  //$('#schedule_1').fullCalendar('option', 'height', 100); //Seems to have no effect...
});

＆＃13;

html {
  position: relative;
  min-height: 100%;
}

body {
  background-color: #FCFDFE;
  min-height: 100%;
  margin-bottom: 60px;
  overflow-y: scroll;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.1/fullcalendar.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.1/fullcalendar.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <div class="container-fluid" id="main">

    <div class="col-md-8">
      <div id="schedule_1"></div>
    </div>


    <div class="col-md-4">
      <p>Second Column!</p>
    </div>

  </div>

</body>

</html>

＆＃13;

请参阅https://fullcalendar.io/docs/display/contentHeight/

至于你的其他描述，我并不是100％肯定你的期望。你问过＆＃34;如何在调整FC大小的同时保持其宽高比以使其不会变得不可读？＆＃34;在什么情况下，确切地说？如果宽度变得非常窄，那么即使高度相应缩小（请记住它不会收缩到低于显示没有滚动条的内容所需的高度，除非超出视口的高度），或者确切的高度你可以指定），它在某个时候会变得不可读。您始终可以使用aspectRatio选项控制透视，而不是设置显式高度。如果你想澄清一下你遇到的问题的截图，以及它发生的确切情况，以及你希望它看起来如何的另一个截图/模型，这可能会澄清到能够提示更确定的东西。

Fullcalendar：调整窗口大小的高度（也称为缩小，同时保持宽高比）

2 个答案: