Scheduler

• Introduction
• Basic Example
• Real World Example

Allows user to access scheduler widget with built-in calendar.

Getting Started

First load the seed and CSS files, if you haven't yet.

<script src="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="https://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

Then initialize AlloyUI and load the Scheduler module.

YUI().use(
  'aui-scheduler',
  function(Y) {
    // code goes here
  }
);

Using Scheduler

Create an HTML element with a wrapper div:

<div id="wrapper">
  <div id="myScheduler"></div>
</div>

Now create a new instance of Scheduler component.

First, let's create an events variable where we stored our first calendar event, setting its name via content and a start and end date. Then we'll initialize the calendar view we're going to use, weekView.

Finally, we'll create a new Scheduler with its boundingBox set to our HTML element, its date set to when we scheduled our first event, and pass in events for items and weekView for views, setting render to true so that it renders on load.

YUI().use(
  'aui-scheduler',
  function(Y) {
    var events = [
      {
        content: 'Partial Lunar Eclipse',
        endDate: new Date(2013, 3, 25, 5),
        startDate: new Date(2013, 3, 25, 1)
      }
    ];

    var weekView = new Y.SchedulerWeekView();

    new Y.Scheduler(
      {
        boundingBox: '#myScheduler',
        date: new Date(2013, 3, 25),
        items: events,
        render: true,
        views: [weekView]
      }
    );
  }
);

Configuring Scheduler

There are some other optional parameters that you can pass to your Scheduler instance.

For example, you can add other views to your views option with the Scheduler View constructors. This will allow you to view your events in different formats. You can also set activeView to the view you want Scheduler to start on.

YUI().use(
  'aui-scheduler',
  function(Y) {
    var events = [
      {
        content: 'Partial Lunar Eclipse',
        endDate: new Date(2013, 3, 25, 5),
        startDate: new Date(2013, 3, 25, 1)
      }
    ];

    var agendaView = new Y.SchedulerAgendaView();
    var dayView = new Y.SchedulerDayView();
    var weekView = new Y.SchedulerWeekView();
    var monthView = new Y.SchedulerMonthView();

    new Y.Scheduler(
      {
        activeView: weekView,
        boundingBox: '#myScheduler',
        date: new Date(2013, 3, 25),
        items: events,
        render: true,
        views: [dayView, weekView, monthView, agendaView]
      }
    );
  }
);

Adding eventRecorder to your options via the NewEventRecorder constructor allows you change the duration of existing events and create new events directly inside Scheduler, all of which are recorded and saved in Scheduler.

YUI().use(
  'aui-scheduler',
  function(Y) {
    var events = [
      {
        content: 'Partial Lunar Eclipse',
        endDate: new Date(2013, 3, 25, 5),
        startDate: new Date(2013, 3, 25, 1)
      }
    ];

    var agendaView = new Y.SchedulerAgendaView();
    var dayView = new Y.SchedulerDayView();
    var weekView = new Y.SchedulerWeekView();
    var monthView = new Y.SchedulerMonthView();

    var eventRecorder = new Y.SchedulerEventRecorder();

    new Y.Scheduler(
      {
        activeView: weekView,
        boundingBox: '#myScheduler',
        date: new Date(2013, 3, 25),
        eventRecorder: eventRecorder,
        items: events,
        render: true,
        views: [dayView, weekView, monthView, agendaView]
      }
    );
  }
);

You can even customize your individual events with a number of options, including color, meeting, reminder, and disabled. Events can also span multiple days and overlap each other.

YUI().use(
  'aui-scheduler',
  function(Y) {
    var events = [
      {
        content: 'Partial Lunar Eclipse',
        endDate: new Date(2013, 3, 25, 5),
        startDate: new Date(2013, 3, 25, 1)
      },
      {
        color: "#8d8",
        content: 'Earth Day Lunch',
        disabled: true,
        endDate: new Date(2013, 3, 22, 13),
        meeting: true,
        reminder: true,
        startDate: new Date(2013, 3, 22, 12)
      },
      {
        content: "Weeklong",
        endDate: new Date(2013, 3, 27),
        startDate: new Date(2013, 3, 21)
      }
    ];

    var agendaView = new Y.SchedulerAgendaView();
    var dayView = new Y.SchedulerDayView();
    var weekView = new Y.SchedulerWeekView();
    var monthView = new Y.SchedulerMonthView();

    var eventRecorder = new Y.SchedulerEventRecorder();

    new Y.Scheduler(
      {
        activeView: weekView,
        boundingBox: '#myScheduler',
        date: new Date(2013, 3, 25),
        eventRecorder: eventRecorder,
        items: events,
        render: true,
        views: [dayView, weekView, monthView, agendaView]
      }
    );
  }
);