javascript - 事件未显示在完整日历中

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"}
                            ]

以及其他测试。我测试的所有值(value)观都是在互联网上找到的，来自人们分享他们的经验，但对我来说，它们都不起作用。

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

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

<小时/>

我会尽量说得更清楚:我从完整日历演示中复制/粘贴了此代码，它工作正常，正确显示事件:

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

感谢您的编辑。

现在原因更清楚了 - 您正在使用启用资源的 View ，但您的事件没有任何匹配的资源 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']
  }
]

演示:https://codepen.io/ADyson82/pen/LYVoZvK?editable=true&editors=001

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