Alloy UI Scheduler Multiple Day Event for selected Time Period

Question

The problem being faced with Alloy UI Scheduler is that, I am unable to select multiple day event for a selected time period for example from 12-Aug2014 to 15 Aug 2014 with timing from 1:00 PM to 5:00 PM everyday from 12th to 15th Aug 2014. As of now current alloy ui scheduler is taking it as a allDay event which should not be the case as shown in image attached.

Please let me know how to achieve the above. All Day Event in AlloyUI Scheduler

Rohan, is this a question about using the AlloyUI `Scheduler` or do you want to set these events programmatically? — stiemannkj1, Sep 12 '14 at 15:18
@stiemannkj1, thanks for responding the question is how multiple/recurring event can be set in alloy ui scheduler. — Rohan K, Sep 15 '14 at 07:15
If its not an inbuilt feature of AlloyUI scheduler, than javascript or jquery is the way. @stiemannkj1 — Rohan K, Sep 15 '14 at 12:42

stiemannkj1 · Answer 1 · 2017-06-05T02:52:34.837

The best way that I could find to do this is to use a for loop. For your specific example of events from 1pm to 5pm from Aug 12th to the 15th, you could create a for loop similar to this one:

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
    // ...
});

Here's a full example with a runnable AlloyUI Scheduler (scroll down to see the events that start at 1pm):

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>

If this solution is not good enough, you may want to check out the Scheduler API docs. SchedulerEvent has a repeated attribute that may be what you are looking for (Note: I could not get the repeated attribute to work in the way that I expected for your use case).

Alloy UI Scheduler Multiple Day Event for selected Time Period

1 Answers1