cssangulartypescriptfullcalendar

If we are applying zoom property or scale css property on page then full calendar resource area was not working properly

enter image description here

As per above image you can see if we are applying Zoom property or Scale property using css on page then full calendar resource area was not working properly. It is showing white gap in resources area.

I'm applying css on page like below

.myClass{
   zoom: 80%;
}

One more thing to mention I've implemented Zoom in Zoom out functionality manually like below image

enter image description here

Solution

  • The problem fundamentally is that fullCalendar sets fixed widths for various things, dynamically generated. e.g. for the area in question you get something like <table role="presentation" class="fc-datagrid-header fc-scrollgrid-sync-table" style="width: 230x;">. This doesn't take account of CSS zoom.

    However browsers already have zoom built-in - you don't need to make that functionality yourself. User can just press Ctrl+ and Ctrl- , or choose it from the menu. You don't need to create your own CSS to make it happen.