FullCalendar

FullCalendar Scheduler resources height

HTML

<link rel="stylesheet" href="https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.css">
<link rel="stylesheet" href="https://fullcalendar.io/js/fullcalendar-scheduler-1.5.0/scheduler.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.js"></script>
<script src="https://fullcalendar.io/js/fullcalendar-scheduler-1.5.0/scheduler.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div id="calendar"></div>

JavaScript

$(function() { // document ready

  $('#calendar').fullCalendar({
    schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
    editable: true,
    header: {
      left: 'today prev,next',
      center: 'title',
      right: 'timelineDay,timelineMonth'
    },
    defaultView: 'timelineMonth',
    // This handler is added as many times as I change the month
    // and I need to prevent this
    eventAfterAllRender: function(view) {

        $("td.fc-resource-area tr").on('click', function(e) {
                alert ("Hi!")      
      });   
    },

    resourceGroupField: 'building',
    resourceColumns: [
		{
			labelText: 'first column',
			field: 'title',
			width: 150
		}
	],
    resources: [{
      id: 'a',
      building: '460 Bryant',
      title: 'Click here & change month',
    }, {
      id: 'b',
      building: '460 Bryant',
      title: 'Click here & change month',
      eventColor: 'green'
    }, {
      id: 'c',
      building: '460 Bryant',
      title: 'Click here & change month',
      eventColor: 'orange'
    }]
  });
});