FullCalendar水平资源无法正常工作

Question

我只想在我的FullCalendar中添加水平资源。但是它不会出现。任何人都可以帮助我检查以下代码中的错误。

我尝试了以下代码

resources: [
    { id: 'a', title: 'Room A' },
    { id: 'b', title: 'Room B' },
    { id: 'c', title: 'Room C' },
    { id: 'd', title: 'Room D' },
    { id: 'e', title: 'Room E' },
    { id: 'f', title: 'Room F' },
    { id: 'g', title: 'Room G' }
 ], 

我想要的输出图片如下：

注意：请勿将其标记为重复项。我必须使用以下代码解决此问题。

$(document).ready(function() {

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    var calendar = $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        //height: 600,
        selectable: true,
        selectHelper: true,
        
        defaultView: 'basicWeek',	
        
        select: function(start, end, allDay) {
            var title = prompt('Event Title:');
            if (title) {
                calendar.fullCalendar('renderEvent', {
                        title: title,
                        start: start,
                        end: end,
                        allDay: allDay,
                        title: 'the title',
                        content: function() {
                            return $("#popoverContent").html();
                        },
                        placement: 'left',
                        html: 'true',
                        trigger: 'click',
                        animation: 'true',
                        container: 'body'
                    },
                    true
                );
            }
            calendar.fullCalendar('unselect');
        },

        eventRender: function(event, element) {
            element.popover({
                title: '',
                placement: 'top',
                html: true,
                trigger: 'manual',
                animation: true,
                container: 'body',
                content: function() {
                   
                    return $('#popover-content').html();

                }

            });

        },
        eventAfterRender: function(event, element) {
            $(".popover").remove();
            element.popover('hide');

        },

      resources: [
        { id: 'a', title: 'Room A' },
        { id: 'b', title: 'Room B' },
        { id: 'c', title: 'Room C' },
        { id: 'd', title: 'Room D' },
        { id: 'e', title: 'Room E' },
        { id: 'f', title: 'Room F' },
        { id: 'g', title: 'Room G' }
      ],
       editable: true,
        events: [{
                id: 1,
                resourceId: 'a',
                title: 'All Day Event',
                start: new Date(y, m, 1),
                description: 'This is a cool event'
            }, {
                id: 2,
                resourceId: 'b',
                title: 'Long Event',
                url: 'http://stackoverflow.com',
                start: new Date(y, m, d - 5),
                end: new Date(y, m, d - 2)
            }, {
                id: 3,
                resourceId: 'c',
                title: "Conference",
                color: "#F6BB42",
                start: "2019-06-04",
                end: "2019-06-05"
            }, {
                id: 4,
                resourceId: 'd',
                title: 'Repeating Event',
                start: new Date(y, m, d - 3, 16, 0),
                allDay: false
            }, {
                id: 5,
                resourceId: 'e',
                title: 'Repeating Event',
                color: '#FB6E52',
                start: new Date(y, m, d + 4, 16, 0),
                allDay: false
            }, {
                
                id: 6,
                resourceId: 'f',
                title: 'Meeting',
                color: "#DA4453",
                start: new Date(y, m, d, 10, 30),
                allDay: false
            }, {
                id: 7,            
                resourceId: 'g',
                title: 'Lunch',
                start: new Date(y, m, d, 12, 0),
                end: new Date(y, m, d, 14, 0),
                allDay: false
            }

        ]
    });
    var popoverElement;

});

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://fullcalendar.io/releases/fullcalendar-scheduler/1.9.4/scheduler.min.js"></script>

<div id="calendar"/>