未在完整日历中显示事件

Question

我一直试图用全日历显示一些事件，但是它不起作用。我一直在谷歌搜索并尝试使用不同的值，但是它从未奏效。例如，我尝试了这个：

                                events: [
                                {
                                    title  : 'event1',
                                    start  : '2020-04-01'
                                },
                                {
                                    title  : 'event2',
                                    start  : '2020-04-05',
                                    end    : '2020-04-07'
                                },
                                {
                                    title  : 'event3',
                                    start  : '2020-04-03T12:30:00',
                                    allDay : false // will make the time show
                                }
                            ],

还有这个：

                                events: [
                                {"id":"1","start":"2020-04-14T13:00:00","end":"2020-04-14T1‌​6:00:00","title":"Pe‌​r Hour: 11.00,Per Mile: 11.00"},
                                {"id":"2","start":"2020-04-15T13:00:00","end":"2020-04-15T16‌​:00:00","title":"Per Hour: 11.00,Per Mile: 11.00"},
                                {"id":"3","start":"2020-04-16T13:00:00","end":"2020-04-16T16‌​:00:00","title":"Per Hour: 11.00,Per Mile: 11.00"}
                            ]

以及其他测试。我测试的所有价值观都是在互联网上从共享经验的人们那里发现的，但对我而言，它们都没有起作用。

任何知道这些值有什么问题吗？

然后，我将编写脚本以从数据库中检索数据，但首先我必须使其与硬编码值一起使用。

---

我会尝试更加清晰：我从完整的日历演示中复制/粘贴了此代码，它工作正常，可以正确显示事件：

document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {
    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
  plugins: [ 'resourceTimeGrid' ],
  timeZone: 'UTC',
  defaultView: 'resourceTimeGridFourDay',
  datesAboveResources: true,
  header: {
    left: 'prev,next',
    center: 'title',
    right: 'resourceTimeGridDay,resourceTimeGridFourDay'
  },
  views: {
    resourceTimeGridFourDay: {
      type: 'resourceTimeGrid',
      duration: { days: 4 },
      buttonText: '4 days'
    }
  },
  resources: [
    { id: 'a', title: 'Room A' },
    { id: 'b', title: 'Room B' }
  ],
  events: 'https://fullcalendar.io/demo-events.json?with-resources=2'
});

calendar.render();  });

然后，我评论了从fullcalendar网站检索事件的行，并添加了我自己的硬编码事件，例如：

document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {
    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
  plugins: [ 'resourceTimeGrid' ],
  timeZone: 'UTC',
  defaultView: 'resourceTimeGridFourDay',
  datesAboveResources: true,
  header: {
    left: 'prev,next',
    center: 'title',
    right: 'resourceTimeGridDay,resourceTimeGridFourDay'
  },
  views: {
    resourceTimeGridFourDay: {
      type: 'resourceTimeGrid',
      duration: { days: 4 },
      buttonText: '4 days'
    }
  },
  resources: [
    { id: 'a', title: 'Room A' },
    { id: 'b', title: 'Room B' }
  ],
  //events: 'https://fullcalendar.io/demo-events.json?with-resources=2'
  events: [
                            {
                                title  : 'event1',
                                start  : '2020-04-01'
                            },
                            {
                                title  : 'event2',
                                start  : '2020-04-05',
                                end    : '2020-04-07'
                            },
                            {
                                title  : 'event3',
                                start  : '2020-04-03T12:30:00',
                                allDay : false // will make the time show
                            }
    ]
});

calendar.render();  });

并且当我这样做时，不显示事件。

Answer 1

感谢您的编辑。

原因现在很清楚-您正在使用已启用资源的视图，但是您的事件没有任何匹配的资源ID。那么，fullCalendar应该如何知道放置它们的资源呢？它无法决定，这意味着它无法显示事件。

您可以将事件分配给不同的资源，具体取决于它们所属的位置。这样，例如：

events: [
  {
    title  : 'event1',
    start  : '2020-04-01',
    resourceId: 'b'
  },
  {
    title  : 'event2',
    start  : '2020-04-05',
    end    : '2020-04-07',
    resourceId: 'a'

  },
  {
    title  : 'event3',
    start  : '2020-04-03T12:30:00',
    allDay : false, // will make the time show
    resourceIds: ['a', 'b']
  }
]

这里是相关的完整日历文档页面：Associating Events with Resources