1

I have used this CSS code:

.fc-daygrid-day {
  height: 20px !important;
}

but it seems that the height of each cells is fixed at 55px. Because below 55px the height remains the same but if I increase the value from 55 px the cell height gets increased.

fullcalendar cell height issue

ADyson
  • 57,178
  • 14
  • 51
  • 63
Manish Gupta
  • 61
  • 3
  • 14
  • AFAIK the height is relative to the calendar overall and is controlled largely by the aspect ratio - see the various articles at https://fullcalendar.io/docs/v5/sizing for more info – ADyson Sep 01 '23 at 11:34
  • The height of the whole grid table (e.g. ``) is then set (as you can see) as a direct style attribute at runtime reflecting the overall height of the grid relative to its container. It's all calculated on the fly. That in turn means the cells within it can't be less than a certain height otherwise it would be impossible to respect that height rule... – ADyson Sep 01 '23 at 11:40
  • If you use the browser's element inspector to temporarily turn off that height rule, then you can see that your day-grid-day rule with a smaller px value would come into effect, but there's no way through the fullCalendar settings to configure that, or predict that height in advance. You _could_ do something like `.fc-scrollgrid-sync-table { height: 100px !important; }` in your CSS but that causes a mess in other ways: https://codepen.io/ADyson82/pen/PoXzRwM . So I don't think it's realistic. – ADyson Sep 01 '23 at 11:43
  • If you want a shorter calendar, use the [`height`](https://fullcalendar.io/docs/v5/height) or [`contentHeight`](https://fullcalendar.io/docs/v5/contentHeight) settings in the fullcalendar API would be my suggestion, or put the calendar in a smaller container. – ADyson Sep 01 '23 at 11:43
  • @ADyson aspectRatio seems working for me. Thanks for your time and solution – Manish Gupta Sep 02 '23 at 10:34

0 Answers0