Question

我有上面的fullcalender脚本可以运行，但是我想显示资源（房间），为此我需要更改什么？

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

var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list', 'resourceTimeline' ],
  now: '2019-08-07',
  editable: false, // enable draggable events
  aspectRatio: 1.8,
  scrollTime: '00:00', // undo default 6am scrollTime
  header: {
    left: 'today prev,next',
    center: 'title',
    right: 'month,timeline3Months'
  },
 defaultView: 'timeline3Months',
  views: {
    timeline3Months: {
      type: 'timelineMonth',
      slotDuration: { days: 1 },
      duration: { months: 3 }
   }
 },
buttonText: {
  month: '1 Month',
  timeline3Months: '3 Months',
},     
  resourceLabelText: 'Rooms',
  resources: [
    { id: 'a', title: 'Auditorium A' },
    { id: 'b', title: 'Auditorium B', eventColor: 'green' },
    { id: 'c', title: 'Auditorium C', eventColor: 'orange' },
    { id: 'd', title: 'Auditorium D', children: [
      { id: 'd1', title: 'Room D1' },
      { id: 'd2', title: 'Room D2' }
    ] },
    { id: 'e', title: 'Auditorium E' },
    { id: 'f', title: 'Auditorium F', eventColor: 'red' },
    { id: 'z', title: 'Auditorium Z' }
  ],
  events: [
    { id: '1', resourceId: 'b', start: '2019-08-07T02:00:00', end: '2019-08-07T07:00:00', title: 'event 1', description: 'description for Repeating Event' },
    { id: '2', resourceId: 'c', start: '2019-08-07T05:00:00', end: '2019-08-07T22:00:00', title: 'event 2', description: 'description for Repeating Event' },
    { id: '3', resourceId: 'd', start: '2019-08-06', end: '2019-08-08', title: 'event 3', description: 'description for Repeating Event' },
    { id: '4', resourceId: 'e', start: '2019-08-07T03:00:00', end: '2019-08-07T08:00:00', title: 'event 4', description: 'description for Repeating Event' },
    { id: '5', resourceId: 'f', start: '2019-08-07T00:30:00', end: '2019-08-07T02:30:00', title: 'event 5', description: 'description for Repeating Event' }
  ]



});
calendar.render();

}）;

我想显示这张图所示的压光机。

Answer 1

“时间轴”和“资源时间轴”视图不是同一个人。一个简单的“时间轴”视图不使用也不需要资源，它只是以时间轴样式显示非资源感知事件。已记录在here中。

要在时间轴上显示资源，您需要将视图类型指定为“ resourceTimeline”，而不仅仅是“ timeline”。（此外，您还指定了“ timelineMonth”，这是没有意义的，因为您尝试创建的持续时间为3个月，而“ Month”则指定了一个月。）

因此您的自定义视图定义应如下所示：

timeline3Months: {
    type: "resourceTimeline",
    slotDuration: { days: 1 },
    duration: { months: 3 }
}

演示：https://codepen.io/ADyson82/pen/bGNVbvo

（注：您还错误地指定了“月”视图按钮，这就是为什么该按钮没有显示的原因。我也在演示中对此进行了更正，如下所示：right: "dayGridMonth,timeline3Months"。）

P.S。在https://fullcalendar.io/docs/timeline-view

的文档中有一个创建自定义启用资源的时间轴视图的示例

为什么资源未在Fullcalender中显示

1 个答案: