title: How do I style FullCalendar to make better use of space?
body: <p>I'm in the process of implementing an activity calendar for a nursing home that will be printed on sheets of LEGAL sized paper. I'm having a difficult time making everything fit into the calendar, but this is because FullCalendar renders events on a row-by-row basis for each week of the month. This is resulting in a ton of whitespace as seen in my image example below:</p>
  
  <p><a href="https://i.stack.imgur.com/r3r2K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/r3r2K.png" alt="Full Calendar whitespace example"></a></p>
  
  <p>Is it possible to make Full Calendar treat each day as it's own table, and render these events similar to the way that Pinterest renders links, where there's the exact same amount whitespace between events, instead of one day with a long event affecting the entire row?</p>
  
  <p><a href="https://i.stack.imgur.com/udDdv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/udDdv.png" alt="Pinterest Whitespace Example"></a></p>
  
  <p>Here's the CSS I'm using right now for this calendar.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
   height: 100%;
  }
  
  body {
   width: 100%;
   height: 100%;
   overflow: hidden;
   padding: 0px;
   font-family: 'Tinos', serif;
  }
  
  h2 {
   font-weight: 700;
   text-transform: uppercase;
  }
  
  #activitiesCalendar {
   width: 100%;
   height: 100%;
  }
  
  .fc-time {
     display : none;
  }
  
  .fc-day-grid-event .fc-content {
   white-space: normal;
   font-size: 11pt;
   font-weight: 700;
  }
  
  .fc-day-grid-event {
   background: rgba(0, 0, 0, 0.0);
   border-color: #000;
   color: #000;
  }</code></pre>
  </div>
  </div>
  </p>