<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/fullcalendar@3.5.1/dist/fullcalendar.min.css" />
<link rel="stylesheet" href="https://unpkg.com/fullcalendar-scheduler@1.7.1/dist/scheduler.min.css" />
<script src="https://unpkg.com/jquery@2.1.4/dist/jquery.min.js"></script>
<script src="https://unpkg.com/moment@2.19.1/min/moment.min.js"></script>
<script src="https://unpkg.com/fullcalendar@3.5.1/dist/fullcalendar.min.js"></script>
<script src="https://unpkg.com/fullcalendar-scheduler@1.7.1/dist/scheduler.min.js"></script>
<style>
.fc-view-container {
overflow-x: scroll;
}
</style>
<script>
$(() => ((myCalendar) => {
const handleHorizontalScrollbar = ((myCalendar) => {
const minColumnWidthInPixels = 180; // up to you
const getContainerWidth = () => myCalendar.parent().outerWidth();
const getAgendaWidthInPercent = () => {
const containerWidthInPixels = getContainerWidth();
const numberOfColumns = myCalendar.fullCalendar("getResources").length;
const firstColumnWidthInPixels = myCalendar.find(".fc-axis.fc-widget-header").outerWidth();
const sumOfBorderWidthsInPixels = numberOfColumns;
const expectedTotalWidthInPixels = minColumnWidthInPixels * numberOfColumns
+ firstColumnWidthInPixels
+ sumOfBorderWidthsInPixels;
const agendaWidthInPercent = expectedTotalWidthInPixels / containerWidthInPixels * 100;
return Math.max(agendaWidthInPercent, 100); // should not be less than 100% anyway
}
return (view) => {
view.el.css("width", getAgendaWidthInPercent() + "%");
};
})(myCalendar);
myCalendar.fullCalendar({
defaultView: "agendaDay",
viewRender: handleHorizontalScrollbar,
windowResize: handleHorizontalScrollbar,
resources: [
{ id: 0, title: "Room 0" },
{ id: 1, title: "Room 1" },
{ id: 2, title: "Room 2" },
{ id: 3, title: "Room 3" },
{ id: 4, title: "Room 4" },
{ id: 5, title: "Room 5" },
{ id: 6, title: "Room 6" },
{ id: 7, title: "Room 7" },
{ id: 8, title: "Room 8" },
{ id: 9, title: "Room 9" }
]
});
})($("#my-calendar")));
</script>
</head>
<body>
<div id="my-calendar"></div>
</body>
</html>