选定时间段内的Alloy UI Scheduler多日事件

时间:2014-08-14 07:27:13

标签: liferay alloy-ui

Alloy UI Scheduler面临的问题是,我无法在2014年8月12日至2014年8月15日的所选时间段内选择多日活动,时间为每天下午1:00至5:00 2014年8月12日至15日。截至目前,目前的合金ui调度程序将其作为一个allDay事件,不应如附图所示。

请让我知道如何实现上述目标。 All Day Event in AlloyUI Scheduler

1 个答案:

答案 0 :(得分:0)

我能找到的最佳方法是使用for循环。对于从8月12日到15日下午1点到5点的事件的具体示例,您可以创建一个与此类似的for循环:

var events = [];
for (var i = 0; i < 4; i++) {

    events.push({
        content: 'Repeating Event',
        endDate: new Date(2014, 7, 12 + i, 17),
        startDate: new Date(2014, 7, 12 + i, 13)
    });
}

new Y.Scheduler({
    // ...
    date: new Date(2014, 7, 11),
    items: events,
    render: true
    // ...
});

以下是一个带有runnable AlloyUI Scheduler的完整示例(向下滚动以查看从下午1点开始的事件):

YUI().use('aui-scheduler', function (Y) {

    var events = [];
    for (var i = 0; i < 4; i++) {

        events.push({
            content: 'Repeating Event',
            endDate: new Date(2014, 7, 12 + i, 17),
            startDate: new Date(2014, 7, 12 + i, 13)
        });
    }

    new Y.Scheduler({
        boundingBox: '#boundingBox',
        date: new Date(2014, 7, 10),
        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="boundingBox"></div>

如果此解决方案不够好,您可能需要查看Scheduler API docsSchedulerEvent有一个repeated attribute可能就是您要找的内容(注意:我无法让repeated属性以我预期的方式工作你的用例)。