aui-scheduler - 如何以周列表形式显示周视图中的事件

Question

我想将周视图显示为每天的事件列表，如下图所示。类似于月视图，但每列有一天。

有可能吗？

Answer 1

您应该在SchedulerWeekView的views属性中添加Scheduler，如下所示：

new Y.Scheduler({
    // your code here...
    views: [new Y.SchedulerWeekView()]
});

这是一个可运行的例子：

YUI().use(
  'aui-scheduler',
  function(Y) {
    var events = [{
      content: 'Event1',
      endDate: new Date(2013, 1, 4, 17),
      startDate: new Date(2013, 1, 4, 15)
    }, {
      content: 'Event2',
      endDate: new Date(2013, 1, 4, 19),
      startDate: new Date(2013, 1, 4, 17)
    }, {
      content: 'Event3',
      endDate: new Date(2013, 1, 6, 16),
      startDate: new Date(2013, 1, 6, 14)
    }, {
      content: 'Event4',
      endDate: new Date(2013, 1, 6, 19),
      startDate: new Date(2013, 1, 6, 16)
    }];

    new Y.Scheduler({
      boundingBox: '#scheduler',
      date: new Date(2013, 1, 4),
      items: events,
      render: true,
      views: [new Y.SchedulerWeekView()]
    });
  }
);

<script src="https://cdn.rawgit.com/stiemannkj1/701826667a70997013605edcd37e92a6/raw/469fe1ae297e72a5a80eb9015003b7b04eac735e/alloy-ui-3.0.1_aui_aui-min.js"></script>
<link href="https://cdn.rawgit.com/stiemannkj1/90be22de7f48c729b443af14796d91d3/raw/a9f35ceedfac7fc0559b121bed105eaf80f10bf2/aui-css_css_bootstrap.min.css" rel="stylesheet"></link>
<div id="scheduler"></div>