0

I'm trying to adjust the height of my FullCalendar to avoid having 2 scroll bars as seen here.

Currently, the calendar sets its own height in a way that goes beyond the bottom of the screen and the outer scroll bar appears so that the entire calendar can be seen, but there's also a scroll bar inside the calendar to view all the times. I'm trying to figure out how to remove the outer scroll bar by limiting the height of the calendar, or its container, to the height of window. That way only the scroll bar in the calendar stays and there aren't 2 different ones both to see the same thing.

Ilan_Schindler
  • 11
  • 4
  • Have you tried giving the calendar div a `fixed height` and `overflow-y: auto;` – Henrique Pombo Nov 08 '21 at 16:34
  • just did. no luck. the height of the calendar gets set when its initialized. but i did find the specific div i need to set the height of. how do i tell it to make its height as big as it can without overflowing the window? – Ilan_Schindler Nov 08 '21 at 16:52
  • you can used fixed heights like `height:10px;` or relative to the view like `height:10%;`. You can also use `@media (min-width: 641px) {.myclass{height: 10px;}}` to affect different display sizes. [100% height div](https://stackoverflow.com/questions/1575141/how-to-make-a-div-100-height-of-the-browser-window) – Henrique Pombo Nov 08 '21 at 17:02
  • idk why but it doesnt work. changing it to 100% height has no affect, the only thing thats had ANY affect is setting it to a fixed height, which i don't want to do because then its fixed. – Ilan_Schindler Nov 08 '21 at 17:10
  • https://fullcalendar.io/docs/height, https://fullcalendar.io/docs/contentHeight - have you read these, and/or tried to use them? – ADyson Nov 09 '21 at 07:22
  • yes. the auto option maximizes the height rather than minimizing it. – Ilan_Schindler Nov 09 '21 at 20:30

0 Answers0