How to use Angularjs to create a calendar with resource

[duetempi]

I have created the agenda with resource, but it don't work, why?

var myApp = angular.module('myApp', ['ui.calendar', 'ui.bootstrap']);


myApp.controller('MainCtrl', ['$scope', '$timeout',
  function ($scope, $timeout) {

      $scope.n = 100;

      /* config object */
      $scope.uiConfig = {
          calendar: {
              allDaySlot: false,
              defaultView: 'agendaDay',
              editable: true,
              groupByDateAndResource: false,
              //groupByResource: true,
              lang: 'it',
              lazyFetching: false,
              locale: 'it',
              maxTime: '20:00:00',
              minTime: '08:00:00',
              nowIndicator: true,
              selectable: true,
              selectHelper: true,
              slotEventOverlap: false,
              slotDuration: '00:05:00',
              header: {
                  left: 'prev,next today',
                  center: 'title',
                  right: 'agendaDay,agendaTwoDay,agendaWeek,month'
              },
              views: {
                  agendaTwoDay: {
                      type: 'agenda',
                      duration: { days: 2 },

                      // views that are more than a day will NOT do this behavior by default
                      // so, we need to explicitly enable it
                      groupByResource: true

                      //// uncomment this line to group by day FIRST with resources underneath
                      //groupByDateAndResource: true
                  }
              },

              resources: [{
                  id: '1',
                  title: 'Room A'
              }, {
                  id: '2',
                  title: 'Room B'
              }],
              eventSources: [
                  {
                      id: '1',
                      resourceId: '1',
                      title: 'Meeting',
                      start: '2016-10-17 08:00',
                      end: '2016-10-17 08:15',
                      url: '#/planner/1/28',
                      color: randomColor(),
                      allDay: false
                  },
              {
                  id: '2',
                  resourceId: '2',
                  title: 'Meeting',
                  start: '2016-10-17 08:45',
                  end: '2016-10-17 09:00',
                  url: '#/planner/1/28',
                  color: randomColor(),
                  allDay: false
              },
              {
                  id: '3',
                  resourceId: '3',
                  title: 'Meeting',
                  start: '2016-10-17 08:45',
                  end: '2016-10-17 09:00',
                  url: '#/planner/1/28',
                  color: randomColor(),
                  allDay: false
              }]
          }
      };

} ]);

The result that I would it like that in the image

[CurtisVayne]

This is a premium feature of the fullcalendar, you need the scheduler addon.

Check the dox