Demo 1.6.3

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://rawgit.com/seankenny/fullcalendar/v1.6.x/build/out/fullcalendar.css" />
  <style type="text/css">
    body {
      margin: 5px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 14px;
      line-height: 20px;
      background-color: #ffffff;
    }
    .red {
      background-color: red;
    }
  </style>
</head>

<body>
  <p>
    This is a fork of the <a href="http://arshaw.com/fullcalendar/">http://arshaw.com/fullcalendar/</a> project. It adds the ability to add resources to the calendar. This fork is available at
    <a href="https://github.com/seankenny/fullcalendar">https://github.com/seankenny/fullcalendar</a>.
  </p>
  <p>
    By adding the 'resources' array to the calendar options and then by linking the id of this to the event 'resourceId', we can have resource events.
  </p>
  <p>
    We also have the option to add a 'className' to the resource to allow us to change how the resource 'column' looks. Here, we have resource 3 as red. Similar to the event object className, we can add as: 'className' : 'my-class' or 'className' : ['my-class','my-class-2']
  </p>
  <p>
    You can download the css & js from <a href="https://github.com/seankenny/fullcalendar/tree/v1.6.x/build/out">here</a>
  </p>
  <div id='calendar'></div>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  <script src="https://rawgit.com/seankenny/fullcalendar/v1.6.x/build/out/fullcalendar.js"></script>
  <script src="script.js"></script>
</body>

</html>

$(document).ready(function() {
  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();

  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,resourceDay'
    },
    defaultView: 'resourceDay',
    editable: true,
    droppable: true,
    resources: [{
      'id': 'resource1',
      'name': 'Resource 1'
    }, {
      'id': 'resource2',
      'name': 'Resource 2'
    }, {
      'id': 'resource3',
      'name': 'Resource 3',
      'className': ['red']
    }],
    events: [{
      title: 'R1-R2: Lunch 12.15-14.45',
      start: new Date(y, m, d, 12, 15),
      end: new Date(y, m, d, 14, 45),
      allDay: false,
      resources: ['resource1', 'resource2']
    }, {
      title: 'R1: All day',
      start: new Date(y, m, d, 10, 30),
      end: new Date(y, m, d, 11, 0),
      allDay: true,
      resources: 'resource1'
    }, {
      title: 'R2: Meeting 11.00',
      start: new Date(y, m, d, 11, 0),
      allDay: true,
      resources: 'resource2'
    }, {
      title: 'R1/R2: Lunch 12-14',
      start: new Date(y, m, d, 12, 0),
      end: new Date(y, m, d, 14, 0),
      allDay: false,
      resources: ['resource1', 'resource2']
    }, {
      id: 777,
      title: 'Lunch',
      start: new Date(y, m, d, 12, 0),
      end: new Date(y, m, d, 14, 0),
      allDay: false,
      resources: ['resource1']
    }, {
      id: 999,
      title: 'Repeating Event',
      start: new Date(y, m, d - 3, 16, 0),
      allDay: false,
      resources: 'resource2'
    }, {
      id: 999,
      title: 'Repeating Event',
      start: new Date(y, m, d + 4, 16, 0),
      allDay: false,
      resources: 'resource2'
    }],
    // the 'ev' parameter is the mouse event rather than the resource 'event'
    // the ev.data is the resource column clicked upon
    selectable: true,
    selectHelper: true,
    select: function(start, end, allDay, ev) {
      console.log(start);
      console.log(end);
      console.log(ev.data);
    },
    eventClick: function(event) {
      console.log(event.resources);
    },
    eventDrop: function (event, delta, revertFunc) {
          console.log(event.resources);
    }
  });
});