title: Mitigating Resize of FullCalendar in List View
body: <p>I'm using FullCalendar Angular 7 version and trying to stop the resizing that happens automatically when the "List" button is clicked. The header of the calendar becomes substantially crowded and the title and buttons are almost on top of each other. Also I am using this in creative Tim's Paper Dashboard Pro which had its own V3 implementation of fullCalendar through which I removed most of the sass code except for the custom sass code below to make the header responsive on mobile.</p>
  
  <p>Calendar dimensions are 1105 X 705.02
  <a href="https://i.stack.imgur.com/eGoK0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eGoK0.png" alt="Header in regular calendar view"></a>
  Notice how close everything in the header is. On the FC home page the calendar dimensions do not change
  Calendar Dimensions here are 618.36 x 1055.82
  <a href="https://i.stack.imgur.com/fJvZs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fJvZs.png" alt="Header when in list view"></a>
  <a href="https://i.stack.imgur.com/AJ8jH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AJ8jH.png" alt="Result of custom code for mobile"></a>
  Mobile Version looks fine
  <a href="https://i.stack.imgur.com/uFGK0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uFGK0.png" alt="Mobile version looks fine"></a></p>
  
  <p>html</p>
  
  <pre><code>&lt;div class="row"&gt;
  &lt;full-calendar #calendar defaultView="dayGridMonth"  (windowResize)='windowResize($event)' height="auto" style="background: white; padding: 5px" timeZone="UTC"
                  (eventClick)="openTaskView($event)" (dateClick)="openDateView($event)" eventLimit='true' aspectRatio="1.8"
                  [customButtons]="options.customButtons" [header]="header"  [plugins]="calendarPlugins" [events]="selectedEvents" (eventRender)="calendarEventRender($event)" [selectable]="true"
              &lt;/full-calendar&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>calendar.ts</p>
  
  <pre><code>...
  import { Calendar } from "@fullcalendar/core";
  import { formatDate } from "@fullcalendar/core";
  import { FullCalendarComponent } from "@fullcalendar/angular";
  import dayGridPlugin from "@fullcalendar/daygrid";
  import interactionPlugin, {
      ThirdPartyDraggable
  } from "@fullcalendar/interaction";
  import bootstrapPlugin from "@fullcalendar/bootstrap";
  import commonPlugin from "@fullcalendar/resource-common";
  import timegridPlugin from "@fullcalendar/resource-timegrid";
  import dayGridResourcePlugin from "@fullcalendar/resource-daygrid";
  import timelinePlugin from "@fullcalendar/resource-timeline";
  import rrulePlugin from "@fullcalendar/rrule";
  import momentPlugin from "@fullcalendar/moment";
  import timezonePlugin from "@fullcalendar/moment-timezone";
  import googlePlugin from "@fullcalendar/google-calendar";
  import listPlugin from '@fullcalendar/list';
  ...
  
  export class CalendarComponent implements OnInit {
      // Calendar Plugins
      calendarPlugins = [
          dayGridPlugin,
          dayGridResourcePlugin,
          interactionPlugin,
          bootstrapPlugin,
          commonPlugin,
          timegridPlugin,
          timelinePlugin,
          rrulePlugin,
          momentPlugin,
          timezonePlugin,
          googlePlugin,
          listPlugin
      ]; // important!
      header = {
          left: "prev, next today",
          right: "filter,dayGridMonth,timeGridWeek,timeGridDay,listWeek",
          center: "title"
      };
  ...
  </code></pre>
  
  <p>scss custom code</p>
  
  <pre><code>.nb-theme-default .btn {
      padding: 5px 1.5rem !important;
  }
  
  @include media-breakpoint-down(sm) {
      .fc-toolbar {
          display: block !important;
          // white-space: nowrap;
          // overflow: hidden;
      }
  
      .fc-toolbar &gt; div.fc-left,
      .fc-toolbar &gt; div.fc-center,
      .fc-toolbar &gt; div.fc-right {
          float: none !important;
          display: inline-block !important;
  
      }
  
      .fc-toolbar &gt; div.fc-center &gt; button {
          padding: 5px 5px !important;
      }
  
      .fc-toolbar &gt; * &gt; :not(:first-child) {
          margin-left: 2px;
      }
  
      .fc-toolbar.fc-header-toolbar &gt; div.fc-center &gt; button:nth-child(2) {
          margin-right: 5px;
      }
  
      .fc-toolbar.fc-header-toolbar &gt; div.fc-center &gt; h2 {
          margin-right: 5px !important;
      }
  }
  </code></pre>
  
  <p>scss import file</p>
  
  <pre><code>/*!
  
   =========================================================
   * Paper Dashboard Pro Angular - v1.1.0
   =========================================================
  
   * Product Page: https://www.creative-tim.com/product/paper-dashboard-pro-angular
   * Copyright 2018 Creative Tim (http://www.creative-tim.com)
  
   =========================================================
  
   * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  
   */
  @import "~ngx-smart-modal/ngx-smart-modal.scss";
  @import "~ng-pick-datetime/assets/style/picker.min.css";
  @import "~angular-calendar/css/angular-calendar.css";
  @import "~ng-pick-datetime/assets/style/picker.min.css";
  @import '~@fullcalendar/core/main.css';
  @import '~@fullcalendar/daygrid/main.css';
  @import '~@fullcalendar/list/main.css';
  // @import '~@fullcalendar/angular/main.css';
  // @import '~@fullcalendar/interaction/main.css';
  // body.dialog-open {
  //   //max-width:100%;
  //   //overflow: scroll;
  // }
  // .cal-day-column {
  //   //width:71;
  // }
  // .cal-header {
  //   //width:71;
  // }
  // .nsm-dialog {
  //   //min-width:100%;
  // }
  @media screen and (min-width: 991px){
    .nsm-dialog {
      min-width:100%;
    }
  }
  .nsm-body {
    overflow-x:scroll;
  }
  // .isSelected {
  //   background-color: lightblue !important;
  // }
  @import '~bootstrap/scss/bootstrap';
  @import 'paper-dashboard/variables';
  @import 'paper-dashboard/mixins';
  
  // Plugins CSS
  @import 'paper-dashboard/plugins/plugin-bootstrap-switch';
  @import 'paper-dashboard/plugins/plugin-bootstrap-table';
  @import 'paper-dashboard/plugins/plugin-nouislider';
  @import 'paper-dashboard/plugins/plugin-animate-bootstrap-notify';
  @import 'paper-dashboard/plugins/plugin-perfect-scrollbar';
  
  @import 'paper-dashboard/plugins/plugin-card-wizard';
  @import 'paper-dashboard/plugins/plugin-datetimepicker';
  @import 'paper-dashboard/plugins/plugin-bootstrap-select';
  @import 'paper-dashboard/plugins/plugin-jasny-fileupload';
  @import 'paper-dashboard/plugins/plugin-tagsinput';
  @import 'paper-dashboard/plugins/plugin-datatables.net';
  @import 'paper-dashboard/plugins/plugin-jquery.jvectormap';
  @import 'paper-dashboard/plugins/plugin-fullcalendar';
  
  
  // Core CSS
  @import 'paper-dashboard/nucleo-outline';
  @import 'paper-dashboard/nucleo';
  @import 'paper-dashboard/buttons';
  @import 'paper-dashboard/social-buttons';
  @import 'paper-dashboard/animated-buttons';
  @import 'paper-dashboard/inputs';
  @import 'paper-dashboard/typography';
  @import 'paper-dashboard/misc';
  @import 'paper-dashboard/misc-extend';
  @import 'paper-dashboard/navbar';
  @import 'paper-dashboard/dropdown';
  @import 'paper-dashboard/alerts';
  @import 'paper-dashboard/images';
  @import 'paper-dashboard/tables';
  @import 'paper-dashboard/footers';
  @import 'paper-dashboard/fixed-plugin';
  
  // components
  @import 'paper-dashboard/checkboxes-radio';
  @import 'paper-dashboard/progress';
  @import 'paper-dashboard/badges';
  @import 'paper-dashboard/pagination';
  @import 'paper-dashboard/info-areas';
  @import 'paper-dashboard/pills';
  @import 'paper-dashboard/tabs';
  @import 'paper-dashboard/popups';
  @import 'paper-dashboard/modals';
  @import 'paper-dashboard/carousel';
  @import 'paper-dashboard/sidebar-and-main-panel';
  @import 'paper-dashboard/timeline';
  
  
  
  // cards
  @import 'paper-dashboard/cards';
  @import "paper-dashboard/cards/card-chart";
  @import "paper-dashboard/cards/card-map";
  @import "paper-dashboard/cards/card-user";
  
  @import "paper-dashboard/cards/card-background";
  @import "paper-dashboard/cards/card-collapse";
  @import "paper-dashboard/cards/card-contributions";
  @import "paper-dashboard/cards/card-info-area";
  @import "paper-dashboard/cards/card-lock";
  @import "paper-dashboard/cards/card-pricing";
  @import "paper-dashboard/cards/card-profile";
  @import "paper-dashboard/cards/card-signup";
  @import "paper-dashboard/cards/card-stats-mini";
  @import "paper-dashboard/cards/card-stats";
  @import "paper-dashboard/cards/card-subcategories";
  @import "paper-dashboard/cards/card-testimonials";
  @import "paper-dashboard/cards/card-tasks";
  
  
  
  // example pages and sections
  @import 'paper-dashboard/example-pages';
  @import 'paper-dashboard/sections';
  
  
  @import 'paper-dashboard/responsive';
  @import 'paper-dashboard/media-queries';
  </code></pre>