Я успешно работал с FullCalendar, но у меня возникли проблемы с использованием параметра высоты 'parent', когда он используется во флекс-макете. В следующем коде календарь не соответствует высоте основного раздела. Кажется, это высота основного раздела плюс высота нижнего колонтитула. Я перепробовал все, что мог придумать. Буду признателен за любые советы, которые вы можете иметь. Спасибо.
<!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <title>Calendar Test</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" rel='stylesheet'/> <style> html, body { height: 100%; width: 100%; padding: 0; margin: 0; } body { display: flex; flex-direction: column; } header { height:75px; } main { flex: auto; background-color: #ccc; } footer { height: 75px; } </style> </head> <body> <header>header</header> <main id="calendar"></main> <footer>footer</footer> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script> <script> $(function () { $('#calendar').fullCalendar({ defaultView: 'month', height: 'parent', events: 'https://fullcalendar.io/demo-events.json' }); }); </script> </body> </html>