I am having trouble adjusting the height of an FC (fullcalendar) within a div. My goal is to have the FC completely fill the div without overflowing. Despite setting the height attribute during initialization, the FC's height does not resize properly, resulting in a narrow and unreadable calendar. I have tried dynamically adjusting the height using jQuery and CSS, with no success. How can I resize the FC while maintaining its aspect ratio for readability?
P.S: I have reviewed the documentation and attempted various methods to adjust the FC's height, but I am still unable to achieve the desired result.
$(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;
}<!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>